diff --git a/packages/code-studio/src/main/AppMainContainer.scss b/packages/code-studio/src/main/AppMainContainer.scss
index 3524998f8f..f8b4f2f2dd 100644
--- a/packages/code-studio/src/main/AppMainContainer.scss
+++ b/packages/code-studio/src/main/AppMainContainer.scss
@@ -280,6 +280,7 @@ $nav-space: 4px; // give a gap around some buttons for focus area that are in na
   display: flex;
   width: 100%;
   justify-content: space-between;
+  align-items: center;
 
   .btn-link {
     font-size: $tab-font-size;
diff --git a/packages/code-studio/src/main/AppMainContainer.tsx b/packages/code-studio/src/main/AppMainContainer.tsx
index 156f102821..f08e334c9b 100644
--- a/packages/code-studio/src/main/AppMainContainer.tsx
+++ b/packages/code-studio/src/main/AppMainContainer.tsx
@@ -20,6 +20,7 @@ import {
   Button,
   InfoModal,
   LoadingSpinner,
+  Logo,
   BasicModal,
   DebouncedModal,
 } from '@deephaven/components';
@@ -91,7 +92,6 @@ import JSZip from 'jszip';
 import SettingsMenu from '../settings/SettingsMenu';
 import AppControlsMenu from './AppControlsMenu';
 import { getLayoutStorage, getServerConfigValues } from '../redux';
-import Logo from '../settings/community-wordmark-app.svg';
 import './AppMainContainer.scss';
 import WidgetList, { WindowMouseEvent } from './WidgetList';
 import EmptyDashboard from './EmptyDashboard';
@@ -740,12 +740,7 @@ export class AppMainContainer extends Component<
       >
         <nav className="nav-container">
           <div className="app-main-top-nav-menus">
-            <img
-              src={Logo}
-              alt="Deephaven Data Labs"
-              width="115px"
-              className="ml-1"
-            />
+            <Logo className="ml-1" style={{ maxHeight: '20px' }} />
             <div>
               <Button
                 kind="ghost"
@@ -800,10 +795,7 @@ export class AppMainContainer extends Component<
                 onClick={this.handleSettingsMenuShow}
                 icon={
                   <span className="fa-layers">
-                    <FontAwesomeIcon
-                      icon={vsGear}
-                      transform="grow-3 right-1 down-1"
-                    />
+                    <FontAwesomeIcon icon={vsGear} transform="grow-3" />
                     {isDisconnected && !isAuthFailed && (
                       <>
                         <FontAwesomeIcon
diff --git a/packages/code-studio/src/settings/LegalNotice.tsx b/packages/code-studio/src/settings/LegalNotice.tsx
index 7f2e390216..6fc01041ce 100644
--- a/packages/code-studio/src/settings/LegalNotice.tsx
+++ b/packages/code-studio/src/settings/LegalNotice.tsx
@@ -13,7 +13,7 @@ function LegalNotice(): ReactElement {
       <Button kind="ghost" onClick={toggle} icon={vsLaw}>
         Legal Notices
       </Button>
-      <Modal isOpen={modal} toggle={toggle} className="theme-bg-light">
+      <Modal isOpen={modal} toggle={toggle}>
         <ModalHeader toggle={toggle}>Legal Notice</ModalHeader>
         <ModalBody>
           <p>
diff --git a/packages/code-studio/src/settings/SettingsMenu.scss b/packages/code-studio/src/settings/SettingsMenu.scss
index cf7a981abb..ecb93a4991 100644
--- a/packages/code-studio/src/settings/SettingsMenu.scss
+++ b/packages/code-studio/src/settings/SettingsMenu.scss
@@ -1,6 +1,5 @@
 @import '@deephaven/components/scss/custom.scss';
 
-$settings-menu-bg: $gray-700;
 $settings-menu-width: 400px;
 $settings-menu-header-min-height: 60px;
 $settings-menu-padding: $spacer-3;
@@ -9,7 +8,7 @@ $settings-menu-header-color: var(--dh-color-fg);
 
 $settings-menu-collapse-trigger-color: var(--dh-color-fg);
 
-$settings-menu-rule-bg: $gray-600;
+$settings-menu-rule-bg: $gray-800;
 $settings-menu-rule-button-color: $gray-300;
 $settings-menu-rule-border: $gray-400;
 $settings-menu-rule-focused-border: $primary;
@@ -21,9 +20,12 @@ $input-btn-focus-box-shadow-over-primary: 0 0 0 0.2rem
 $settings-menu-z-index: $zindex-modal;
 
 .app-settings-menu {
+  --settings-menu-bg: var(--dh-color-surface-bg);
+  --dh-color-hr: var(--dh-color-gray-500);
+
   display: flex;
   flex-direction: column;
-  background: $settings-menu-bg;
+  background: var(--settings-menu-bg);
   box-shadow: $box-shadow;
   position: fixed;
   top: 0;
@@ -181,7 +183,7 @@ $settings-menu-z-index: $zindex-modal;
 .app-settings-footer {
   .app-settings-footer-section {
     padding: $settings-menu-padding 0;
-    border-top: 1px solid $gray-800;
+    border-top: 1px solid var(--dh-color-hr);
     .app-settings-footer-item:not(:last-child) {
       padding-bottom: $settings-menu-padding;
     }
diff --git a/packages/code-studio/src/settings/SettingsMenu.tsx b/packages/code-studio/src/settings/SettingsMenu.tsx
index c61ec5c0b3..2fdfa56c4a 100644
--- a/packages/code-studio/src/settings/SettingsMenu.tsx
+++ b/packages/code-studio/src/settings/SettingsMenu.tsx
@@ -13,6 +13,7 @@ import {
 import {
   Button,
   CopyButton,
+  Logo,
   ThemeContext,
   ThemePicker,
   Tooltip,
@@ -24,7 +25,6 @@ import {
   makeMessage,
 } from '@deephaven/jsapi-utils';
 import { assertNotNull } from '@deephaven/utils';
-import Logo from './community-wordmark-app.svg';
 import FormattingSectionContent from './FormattingSectionContent';
 import LegalNotice from './LegalNotice';
 import SettingsMenuSection from './SettingsMenuSection';
@@ -147,6 +147,7 @@ export class SettingsMenu extends Component<
     const userDisplayName = user.displayName ?? user.name;
     const hasUserImage = user.image != null && user.image !== '';
     const showUserName = userDisplayName !== '';
+
     return (
       <div className="app-settings-menu">
         <header className="app-settings-menu-header">
@@ -345,16 +346,17 @@ export class SettingsMenu extends Component<
               </div>
             </div>
             <div className="app-settings-footer-section">
-              <div className="logo">
-                <a
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  href="https://deephaven.io"
-                  className="d-inline-block custom-link p-1"
-                >
-                  <img src={Logo} alt="Deephaven Data Labs" width="230px" />
-                </a>
-              </div>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href="https://deephaven.io"
+                style={{
+                  display: 'block',
+                  width: '61.8%',
+                }}
+              >
+                <Logo />
+              </a>
             </div>
           </div>
         </div>
diff --git a/packages/code-studio/src/styleguide/Buttons.tsx b/packages/code-studio/src/styleguide/Buttons.tsx
index 828dbbc527..194edced88 100644
--- a/packages/code-studio/src/styleguide/Buttons.tsx
+++ b/packages/code-studio/src/styleguide/Buttons.tsx
@@ -5,6 +5,10 @@ import { Button, ButtonOld, SocketedButton } from '@deephaven/components';
 import { dhTruck } from '@deephaven/icons';
 import { sampleSectionIdAndClasses } from './utils';
 
+function noOp(): void {
+  return undefined;
+}
+
 interface ButtonsState {
   toggle: boolean;
 }
@@ -80,18 +84,23 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
     return (
       <div {...sampleSectionIdAndClasses('buttons-socketed')}>
         <h5>Socketed Buttons (for linker)</h5>
-        <SocketedButton style={{ marginBottom: '1rem', marginRight: '1rem' }}>
+        <SocketedButton
+          style={{ marginBottom: '1rem', marginRight: '1rem' }}
+          onClick={noOp}
+        >
           Unlinked
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           isLinked
+          onClick={noOp}
         >
           Linked
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           isLinkedSource
+          onClick={noOp}
         >
           Linked Source
         </SocketedButton>
@@ -99,12 +108,14 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           isLinked
           isInvalid
+          onClick={noOp}
         >
           Error
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           disabled
+          onClick={noOp}
         >
           Disabled
         </SocketedButton>
@@ -130,7 +141,13 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
       >
         <h5>Inline Buttons</h5>
         Regular btn-inline:
-        <Button className="mx-2" kind="inline" icon={dhTruck} tooltip="test" />
+        <Button
+          className="mx-2"
+          kind="inline"
+          icon={dhTruck}
+          tooltip="test"
+          onClick={noOp}
+        />
         Toggle button (class active):
         <Button
           className="mx-2"
@@ -143,21 +160,23 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
           tooltip="test"
         />
         Disabled:
-        <Button className="mx-2" kind="inline" disabled>
+        <Button className="mx-2" kind="inline" disabled onClick={noOp}>
           Disabled
         </Button>
         With Text:
-        <Button className="mx-2" kind="inline" icon={dhTruck}>
+        <Button className="mx-2" kind="inline" icon={dhTruck} onClick={noOp}>
           <span>Text Button</span>
         </Button>
         <br />
         <br />
         <span>btn-link-icon (no text):</span>
-        <Button kind="ghost" icon={dhTruck} tooltip="test" />
+        <Button kind="ghost" icon={dhTruck} tooltip="test" onClick={noOp} />
         <span className="mx-2">btn-link:</span>
-        <Button kind="ghost">Text Button </Button>
+        <Button kind="ghost" onClick={noOp}>
+          Text Button
+        </Button>
         <span className="mx-2">btn-link (text w/ optional with icon):</span>
-        <Button kind="ghost" icon={dhTruck}>
+        <Button kind="ghost" icon={dhTruck} onClick={noOp}>
           Text Button
         </Button>
       </div>
diff --git a/packages/code-studio/src/styleguide/Modals.tsx b/packages/code-studio/src/styleguide/Modals.tsx
index 626bed57a9..9aeae85769 100644
--- a/packages/code-studio/src/styleguide/Modals.tsx
+++ b/packages/code-studio/src/styleguide/Modals.tsx
@@ -42,7 +42,7 @@ function Modals(): React.ReactElement {
       </div>
       <h2 className="ui-title">Custom Modal</h2>
       <div style={{ padding: '1rem' }}>
-        <div className="modal-dialog theme-bg-light" role="dialog">
+        <div className="modal-dialog" role="dialog">
           <div className="modal-content">
             <div className="modal-header">
               <h5 className="modal-title">Modal title</h5>
diff --git a/packages/code-studio/src/styleguide/SamplesMenu.tsx b/packages/code-studio/src/styleguide/SamplesMenu.tsx
index c3707864d8..cbee3c0eba 100644
--- a/packages/code-studio/src/styleguide/SamplesMenu.tsx
+++ b/packages/code-studio/src/styleguide/SamplesMenu.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React, { Key, useCallback, useEffect, useState } from 'react';
 import {
   ActionButton,
@@ -12,6 +13,7 @@ import { vsMenu } from '@deephaven/icons';
 import {
   MENU_CATEGORY_DATA_ATTRIBUTE,
   NO_MENU_DATA_ATTRIBUTE,
+  SPECTRUM_COMPARISON_SAMPLES_ID,
   SPECTRUM_COMPONENT_SAMPLES_ID,
 } from './constants';
 
@@ -26,18 +28,18 @@ type LinkCategory = { category: string; items: Link[] };
  * menu category. These will be queried by the SamplesMenu component to build
  * up the menu sections.
  */
-export function SampleMenuCategory({
-  'data-menu-category': dataMenuCategory,
-}: Record<typeof MENU_CATEGORY_DATA_ATTRIBUTE, string>): JSX.Element {
-  return <div data-menu-category={dataMenuCategory} />;
+export function SampleMenuCategory(
+  props: Record<typeof MENU_CATEGORY_DATA_ATTRIBUTE, string>
+): JSX.Element {
+  return <div {...props} />;
 }
 
 /**
  * Creates a menu from h2, h3 elements on the page and assigns them each an id
  * for hash navigation purposes. If the current hash matches one of the ids, it
  * will scroll to that element. This handles the initial page load scenario.
- * Menu sections are identified by divs with MENU_CATEGORY_DATA_ATTRIBUTE
- * attributes.
+ * Menu categories are identified by divs with MENU_CATEGORY_DATA_ATTRIBUTE
+ * attributes originating from the <SampleMenuCategory> component.
  */
 export function SamplesMenu(): JSX.Element {
   const [links, setLinks] = useState<LinkCategory[]>([]);
@@ -53,17 +55,25 @@ export function SamplesMenu(): JSX.Element {
       `#${SPECTRUM_COMPONENT_SAMPLES_ID}`
     );
 
+    const spectrumComparisonSamples = document.querySelector(
+      `#${SPECTRUM_COMPARISON_SAMPLES_ID}`
+    );
+
     document
       .querySelectorAll(`h2,h3,[${MENU_CATEGORY_DATA_ATTRIBUTE}]`)
-      .forEach(el => {
-        if (el.textContent == null || el.hasAttribute(NO_MENU_DATA_ATTRIBUTE)) {
+      .forEach(headingEl => {
+        if (
+          headingEl.textContent == null ||
+          headingEl.hasAttribute(NO_MENU_DATA_ATTRIBUTE)
+        ) {
           return;
         }
 
         // Create a new category section
-        if (el.hasAttribute(MENU_CATEGORY_DATA_ATTRIBUTE)) {
+        if (headingEl.hasAttribute(MENU_CATEGORY_DATA_ATTRIBUTE)) {
           currentCategory = {
-            category: el.getAttribute(MENU_CATEGORY_DATA_ATTRIBUTE) ?? '',
+            category:
+              headingEl.getAttribute(MENU_CATEGORY_DATA_ATTRIBUTE) ?? '',
             items: [],
           };
           categories.push(currentCategory);
@@ -71,16 +81,22 @@ export function SamplesMenu(): JSX.Element {
           return;
         }
 
-        const id = `${
-          spectrumComponentsSamples?.contains(el) === true ? 'spectrum-' : ''
-        }${el.textContent}`
+        const idPrefix =
+          // eslint-disable-next-line no-nested-ternary
+          spectrumComponentsSamples?.contains(headingEl) === true
+            ? 'spectrum-'
+            : spectrumComparisonSamples?.contains(headingEl) === true
+            ? 'spectrum-compare-'
+            : '';
+
+        const id = `${idPrefix}${headingEl.textContent}`
           .toLowerCase()
           .replace(/\s/g, '-');
 
         // eslint-disable-next-line no-param-reassign
-        el.id = id;
+        headingEl.id = id;
 
-        currentCategory.items.push({ id, label: el.textContent });
+        currentCategory.items.push({ id, label: headingEl.textContent });
       });
 
     setLinks(categories);
diff --git a/packages/code-studio/src/styleguide/SpectrumComparison.tsx b/packages/code-studio/src/styleguide/SpectrumComparison.tsx
new file mode 100644
index 0000000000..7d23701411
--- /dev/null
+++ b/packages/code-studio/src/styleguide/SpectrumComparison.tsx
@@ -0,0 +1,284 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/style-prop-object */
+import React, { Fragment, useCallback, useState } from 'react';
+import {
+  ActionButton,
+  Button,
+  Checkbox,
+  ComboBox,
+  Flex,
+  Grid,
+  Item,
+  Picker,
+  Radio,
+  RadioGroup,
+  SpectrumButtonProps,
+  TextField,
+  View,
+} from '@adobe/react-spectrum';
+import {
+  Button as BootstrapButtonOld,
+  Checkbox as CheckboxOld,
+  ComboBox as ComboBoxOld,
+  RadioGroup as RadioGroupOld,
+  RadioItem,
+  Select,
+} from '@deephaven/components';
+import {
+  SAMPLE_SECTION_E2E_IGNORE,
+  SPECTRUM_COMPARISON_SAMPLES_ID,
+} from './constants';
+import { sampleSectionIdAndClasses } from './utils';
+
+type BootstrapLevel = 'primary' | 'secondary' | 'danger';
+
+const buttons: [BootstrapLevel, SpectrumButtonProps['variant']][] = [
+  ['primary', 'accent'],
+  ['secondary', 'primary'],
+  ['danger', 'negative'],
+];
+
+const options = [
+  { title: 'One', value: '1' },
+  { title: 'Two', value: '2' },
+  { title: 'Three', value: '3' },
+];
+
+export function SpectrumComparison(): JSX.Element {
+  const [isChecked, setIsChecked] = useState(false);
+  const [radioValue, setRadioValue] = useState('1');
+
+  const handleRadioChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setRadioValue(event.target.value);
+    },
+    []
+  );
+
+  return (
+    <div
+      {...sampleSectionIdAndClasses(SPECTRUM_COMPARISON_SAMPLES_ID, [
+        SAMPLE_SECTION_E2E_IGNORE,
+      ])}
+    >
+      <h2 className="ui-title" data-no-menu>
+        Bootstrap / Spectrum Comparison
+      </h2>
+      <Flex gap={20} wrap>
+        <View>
+          <h3>Buttons - Filled</h3>
+          <Grid gap={20} columns="repeat(2, 120px)" autoRows="40x">
+            <label>Bootstrap</label>
+            <label>Spectrum</label>
+
+            {buttons.map(([level, variant]) => (
+              <Fragment key={level}>
+                <BootstrapButtonOld kind={level}>Button</BootstrapButtonOld>
+
+                <Button variant={variant} style="fill">
+                  Button
+                </Button>
+              </Fragment>
+            ))}
+
+            <BootstrapButtonOld kind="primary" disabled>
+              Disabled
+            </BootstrapButtonOld>
+            <Button variant="accent" style="fill" isDisabled>
+              Disabled
+            </Button>
+          </Grid>
+        </View>
+
+        <View>
+          <h3>Buttons - Outline</h3>
+          <Grid gap={20} columns="repeat(2, 120px)">
+            <label>Bootstrap</label>
+            <label>Spectrum</label>
+
+            {buttons.map(([level, variant]) => (
+              <Fragment key={level}>
+                <BootstrapButtonOld kind={level}>{level}</BootstrapButtonOld>
+                <Button variant={variant} style="outline">
+                  {variant}
+                </Button>
+              </Fragment>
+            ))}
+
+            <BootstrapButtonOld kind="secondary" disabled>
+              Disabled
+            </BootstrapButtonOld>
+            <Button variant="primary" style="outline" isDisabled>
+              Disabled
+            </Button>
+          </Grid>
+        </View>
+
+        <View>
+          <h3>Action Buttons</h3>
+
+          <Grid gap={20} columns="repeat(2, 120px)" autoRows="40x">
+            <label>Bootstrap</label>
+            <label>Spectrum</label>
+
+            <BootstrapButtonOld kind="inline">Inline</BootstrapButtonOld>
+            <ActionButton>Action</ActionButton>
+
+            <BootstrapButtonOld kind="inline" disabled>
+              Disabled
+            </BootstrapButtonOld>
+            <ActionButton isDisabled>Disabled</ActionButton>
+          </Grid>
+        </View>
+
+        <View>
+          <h3>Pickers</h3>
+          <Grid gap={20} columns="repeat(2, 192px)" autoRows="40x">
+            <label>Bootstrap</label>
+            <label>Spectrum</label>
+
+            {[false, true].map(isDisabled => (
+              <Fragment key={String(isDisabled)}>
+                <div>
+                  <label className="input-label">
+                    {isDisabled ? 'Disabled ' : ''}Combobox
+                  </label>
+                  <ComboBoxOld
+                    disabled={isDisabled}
+                    options={options}
+                    defaultValue="One"
+                  />
+                </div>
+
+                <ComboBox
+                  isDisabled={isDisabled}
+                  label={isDisabled ? 'Disabled Combobox' : 'Combobox'}
+                  inputValue="One"
+                >
+                  <Item key="1">One</Item>
+                  <Item key="2">Two</Item>
+                  <Item key="3">Three</Item>
+                </ComboBox>
+              </Fragment>
+            ))}
+
+            {[false, true].map(isDisabled => (
+              <Fragment key={String(isDisabled)}>
+                <div>
+                  <label className="input-label">Select</label>
+                  <Select
+                    disabled={isDisabled}
+                    placeholder="Select"
+                    onChange={_v => {
+                      // no-op
+                    }}
+                    className="custom-select"
+                  >
+                    <option disabled value="0">
+                      {isDisabled ? '' : 'Disabled '}Select
+                    </option>
+                    <option value="1">One</option>
+                    <option value="2">Two</option>
+                    <option value="3">Three</option>
+                  </Select>
+                </div>
+                <Picker
+                  isDisabled={isDisabled}
+                  label={isDisabled ? 'Disabled Picker' : 'Picker'}
+                  placeholder="Picker"
+                >
+                  <Item key="1">One</Item>
+                  <Item key="2">Two</Item>
+                  <Item key="3">Three</Item>
+                </Picker>
+              </Fragment>
+            ))}
+          </Grid>
+        </View>
+
+        <View>
+          <h3>Text Field</h3>
+          <Grid gap={20} columns="repeat(2, 192px)" autoRows="40x">
+            <label>Bootstrap</label>
+            <label>Spectrum</label>
+            <div>
+              <label className="input-label">type=text</label>
+              <input
+                type="text"
+                className="form-control"
+                placeholder="Text Input"
+              />
+            </div>
+            <TextField type="text" label="TextField" />
+
+            <div>
+              <label className="input-label">Disabled</label>
+              <input
+                type="text"
+                className="form-control"
+                disabled
+                value="Disabled"
+              />
+            </div>
+            <TextField
+              type="text"
+              label="Disabled"
+              isDisabled
+              value="Disabled"
+            />
+          </Grid>
+        </View>
+
+        <View>
+          <h3>Checkbox</h3>
+          <Grid gap={20} columns="repeat(2, 120px)">
+            <label>Bootstrap</label>
+            <label>Spectrum</label>
+
+            <CheckboxOld
+              className="form-group"
+              checked={isChecked}
+              onChange={() => setIsChecked(v => !v)}
+            >
+              Checkbox
+            </CheckboxOld>
+            <Checkbox>Checkbox</Checkbox>
+
+            <CheckboxOld
+              className="form-group"
+              disabled
+              checked={isChecked}
+              onChange={() => setIsChecked(v => !v)}
+            >
+              Disabled
+            </CheckboxOld>
+            <Checkbox isDisabled>Disabled</Checkbox>
+
+            <Flex direction="column">
+              <label>
+                Radio Group
+                <RadioGroupOld onChange={handleRadioChange} value={radioValue}>
+                  <RadioItem value="1">One</RadioItem>
+                  <RadioItem value="2">Two</RadioItem>
+                  <RadioItem value="3">Three</RadioItem>
+                </RadioGroupOld>
+              </label>
+            </Flex>
+
+            <RadioGroup
+              label="Radio Group"
+              value={radioValue}
+              onChange={setRadioValue}
+            >
+              <Radio value="1">One</Radio>
+              <Radio value="2">Two</Radio>
+              <Radio value="3">Three</Radio>
+            </RadioGroup>
+          </Grid>
+        </View>
+      </Flex>
+    </div>
+  );
+}
+
+export default SpectrumComparison;
diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
index b2d9967c2d..fa86461e18 100644
--- a/packages/code-studio/src/styleguide/SpectrumComponents.tsx
+++ b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
@@ -29,6 +29,12 @@ import {
   ToggleButton,
   View,
   Well,
+  DialogTrigger,
+  Dialog,
+  Header,
+  Divider,
+  ButtonGroup,
+  Flex,
 } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhTruck, vsEmptyWindow } from '@deephaven/icons';
@@ -60,7 +66,30 @@ export function SpectrumComponents(): JSX.Element {
         </View>
         <View {...sampleSectionIdAndClassesSpectrum('spectrum-overlays')}>
           <h3>Overlays</h3>
-          <ContextualHelpSample />
+          <Flex gap="size-160">
+            <ContextualHelpSample />
+            <DialogTrigger>
+              <ActionButton>Dialog Trigger</ActionButton>
+              {close => (
+                <Dialog>
+                  <Heading>Some Heading</Heading>
+                  <Header>Some Header</Header>
+                  <Divider />
+                  <Content>
+                    <Text>Are you sure?</Text>
+                  </Content>
+                  <ButtonGroup>
+                    <Button variant="secondary" onPress={close}>
+                      Cancel
+                    </Button>
+                    <Button variant="accent" onPress={close}>
+                      Confirm
+                    </Button>
+                  </ButtonGroup>
+                </Dialog>
+              )}
+            </DialogTrigger>
+          </Flex>
         </View>
         <View {...sampleSectionIdAndClassesSpectrum('spectrum-well')}>
           <h3>Wells</h3>
diff --git a/packages/code-studio/src/styleguide/StyleGuide.scss b/packages/code-studio/src/styleguide/StyleGuide.scss
index 6cba5e0b85..8bb4f6510f 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.scss
+++ b/packages/code-studio/src/styleguide/StyleGuide.scss
@@ -174,8 +174,10 @@ h5.sub-title {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: var(--dh-color-content-bg);
     border-color: transparent;
+    background-color: transparent;
+    height: auto;
+    padding: $spacer-2 2px;
     &:focus {
       border-color: $primary;
     }
@@ -196,3 +198,13 @@ h5.sub-title {
     animation: none;
   }
 }
+
+#sample-section-spectrum-comparison-samples {
+  // Approximating Spectrum input label styles for easy comparison
+  .input-label {
+    margin: 0;
+    padding: 4px 0 5px;
+    font-size: 12px;
+    line-height: 1.3;
+  }
+}
diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx
index 6ba9e9ef99..7f35ae1674 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.tsx
+++ b/packages/code-studio/src/styleguide/StyleGuide.tsx
@@ -29,6 +29,7 @@ import GotoTopButton from './GotoTopButton';
 import { HIDE_FROM_E2E_TESTS_CLASS } from './utils';
 import { GoldenLayout } from './GoldenLayout';
 import { RandomAreaPlotAnimation } from './RandomAreaPlotAnimation';
+import SpectrumComparison from './SpectrumComparison';
 
 const stickyProps = {
   position: 'sticky',
@@ -120,6 +121,9 @@ function StyleGuide(): React.ReactElement {
 
         <SampleMenuCategory data-menu-category="Spectrum Components" />
         <SpectrumComponents />
+
+        <SampleMenuCategory data-menu-category="Spectrum Comparison" />
+        <SpectrumComparison />
       </div>
     </div>
   );
diff --git a/packages/code-studio/src/styleguide/Swatch.tsx b/packages/code-studio/src/styleguide/Swatch.tsx
index 3493e320a9..dd872769ac 100644
--- a/packages/code-studio/src/styleguide/Swatch.tsx
+++ b/packages/code-studio/src/styleguide/Swatch.tsx
@@ -41,7 +41,7 @@ export function Swatch({ className, children }: SwatchProps): JSX.Element {
       }}
     >
       {hasValue && (
-        <Tooltip>
+        <Tooltip interactive>
           <div>{tooltip.value}</div>
           <div>{tooltip.normalized}</div>
         </Tooltip>
diff --git a/packages/code-studio/src/styleguide/ThemeColors.module.scss b/packages/code-studio/src/styleguide/ThemeColors.module.scss
index f95623925a..d5cd4bdb89 100644
--- a/packages/code-studio/src/styleguide/ThemeColors.module.scss
+++ b/packages/code-studio/src/styleguide/ThemeColors.module.scss
@@ -26,12 +26,23 @@
     align-items: center;
     height: var(--swatch-height);
     justify-content: space-between;
-    padding: 0 10px;
+    padding-left: 10px;
 
     span {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
+    // hide copy swatch button until hover
+    button {
+      opacity: 0;
+    }
+
+    &:hover {
+      button {
+        opacity: 1;
+      }
+    }
   }
 }
diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx
index e7c6314fc9..9d631d99ba 100644
--- a/packages/code-studio/src/styleguide/ThemeColors.tsx
+++ b/packages/code-studio/src/styleguide/ThemeColors.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { useMemo } from 'react';
 import cl from 'classnames';
-import { Tooltip, useTheme } from '@deephaven/components';
+import { CopyButton, Tooltip, useTheme } from '@deephaven/components';
 import { ColorUtils } from '@deephaven/utils';
 import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?inline';
 import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?inline';
@@ -71,7 +71,7 @@ export function ThemeColors(): JSX.Element {
                         color: `var(--dh-color-${contrastColor(value)})`,
                       }}
                     >
-                      <Tooltip>
+                      <Tooltip interactive>
                         <div>{name}</div>
                         <div>{value}</div>
                         <div>{ColorUtils.normalizeCssColor(value, true)}</div>
@@ -80,6 +80,12 @@ export function ThemeColors(): JSX.Element {
                       {name.endsWith('-hue') || note != null ? (
                         <span>{note ?? value}</span>
                       ) : null}
+                      <CopyButton
+                        copy={name}
+                        style={{
+                          color: `var(--dh-color-${contrastColor(value)})`,
+                        }}
+                      />
                     </div>
                   )
                 )}
diff --git a/packages/code-studio/src/styleguide/colorUtils.ts b/packages/code-studio/src/styleguide/colorUtils.ts
index 6acf93f548..dc2094ab51 100644
--- a/packages/code-studio/src/styleguide/colorUtils.ts
+++ b/packages/code-studio/src/styleguide/colorUtils.ts
@@ -11,6 +11,7 @@ const REASSIGN_VARIABLE_GROUPS: Record<string, string> = {
   // Semantic
   '--dh-color-border': 'General',
   '--dh-color-bg': 'General',
+  '--dh-color-surface-bg': 'General',
   '--dh-color-fg': 'General',
   '--dh-color-content-bg': 'General',
   '--dh-color-dropshadow': 'General',
diff --git a/packages/code-studio/src/styleguide/constants.ts b/packages/code-studio/src/styleguide/constants.ts
index af5b342f11..ebeadb2454 100644
--- a/packages/code-studio/src/styleguide/constants.ts
+++ b/packages/code-studio/src/styleguide/constants.ts
@@ -1,3 +1,5 @@
 export const MENU_CATEGORY_DATA_ATTRIBUTE = 'data-menu-category';
 export const NO_MENU_DATA_ATTRIBUTE = 'data-no-menu';
+export const SAMPLE_SECTION_E2E_IGNORE = 'sample-section-e2e-ignore';
 export const SPECTRUM_COMPONENT_SAMPLES_ID = 'spectrum-component-samples';
+export const SPECTRUM_COMPARISON_SAMPLES_ID = 'spectrum-comparison-samples';
diff --git a/packages/code-studio/src/styleguide/hooks.ts b/packages/code-studio/src/styleguide/hooks.ts
index c32d12c96a..7604a1348e 100644
--- a/packages/code-studio/src/styleguide/hooks.ts
+++ b/packages/code-studio/src/styleguide/hooks.ts
@@ -41,18 +41,22 @@ export function useDhColorFromPseudoContent(
       return;
     }
 
-    const computedStyle = getComputedStyle(
+    const pseudoContent = getComputedStyle(
       elementRef.current,
       pseudoElement
     ).getPropertyValue('content');
 
     // Extract the var name from the content (e.g. '--dh-color-gray-900')
-    const dhColorVarName = /"(--dh-color-.*?)[,"]/.exec(computedStyle)?.[1];
+    const dhColorVarName = /"(--dh-color-.*?)[,"]/.exec(pseudoContent)?.[1];
     if (dhColorVarName == null) {
       return;
     }
 
-    setColor(dhColorVarName);
+    const dhColorValue = getComputedStyle(elementRef.current).getPropertyValue(
+      dhColorVarName
+    );
+
+    setColor(dhColorValue);
   }, [elementRef, pseudoElement]);
 
   return color;
diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss
index dfd7ffda18..e1ae369719 100644
--- a/packages/components/scss/BaseStyleSheet.scss
+++ b/packages/components/scss/BaseStyleSheet.scss
@@ -9,7 +9,8 @@
 
   color: var(--dh-color-text);
 
-  .spectrum-theme-provider {
+  .spectrum-theme-provider,
+  [class^='spectrum_'] {
     color: var(--dh-color-text);
   }
 }
@@ -66,10 +67,6 @@ body {
   bottom: 0;
 }
 
-hr {
-  background-color: $gray-400;
-}
-
 .scroll-pane,
 .scroll-pane-x,
 .scroll-pane-y {
@@ -126,6 +123,19 @@ button:focus {
   min-width: 7rem;
   // Matching Spectrum styles
   -webkit-font-smoothing: antialiased;
+  // the following is to match spectrum buttons
+  height: 32px;
+  // vertical-align: top;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 3px;
+  padding-bottom: 5px;
+}
+
+.btn-sm {
+  height: 28px;
+  line-height: 28px;
 }
 
 span.btn-disabled-wrapper {
@@ -136,6 +146,18 @@ span.btn-disabled-wrapper {
   }
 }
 
+// We use disabled success buttons as success messages in a few places.
+// We should stop doing that, and phase them out when we have toasts.
+.btn-success {
+  &.disabled,
+  &:disabled {
+    --dh-color-text-disabled: var(--dh-color-positive-contrast);
+    --dh-color-disabled-bg: var(--dh-color-positive-bg);
+
+    opacity: 0.5;
+  }
+}
+
 .btn-link {
   min-width: unset;
   padding: $spacer-1;
@@ -258,17 +280,22 @@ span.btn-disabled-wrapper {
 }
 
 .btn-icon {
+  // used in chart builder and conditional formatting
   text-align: center;
   padding: 0;
   min-width: 0;
   font-size: small;
   text-overflow: ellipsis;
   border-radius: 0;
+  height: auto;
+  flex-direction: column;
+  gap: 3px;
+  color: var(--dh-color-text);
 
   svg,
   img {
     display: block;
-    background: $gray-500;
+    background: var(--dh-color-action-bg);
     margin: auto;
     border-radius: 2px;
     margin-bottom: 2px;
@@ -282,9 +309,10 @@ span.btn-disabled-wrapper {
   &:hover,
   &:focus,
   &.active {
+    color: var(--dh-color-text);
     svg,
     img {
-      box-shadow: 0 0 0 2px $input-border-color;
+      box-shadow: 0 0 0 2px var(--dh-color-action-hover-border);
       filter: saturate(100%);
     }
   }
@@ -297,15 +325,14 @@ span.btn-disabled-wrapper {
 
     svg,
     img {
-      box-shadow: 0 0 0 2px $input-focus-border-color;
+      box-shadow: 0 0 0 2px var(--dh-color-action-active-border);
     }
   }
 }
 
 .btn-inline {
   min-width: 2.75rem;
-  padding-left: $spacer-1;
-  padding-right: $spacer-1;
+  padding: 0 $spacer-1;
   border-radius: $border-radius;
   background: var(--dh-color-action-bg);
   border: 1px solid var(--dh-color-action-border);
@@ -333,6 +360,7 @@ span.btn-disabled-wrapper {
     background-color: var(--dh-color-action-disabled-bg);
     border: 1px solid var(--dh-color-action-disabled-border);
     color: var(--dh-color-action-disabled-fg);
+    opacity: 1;
     cursor: not-allowed;
   }
 
@@ -405,8 +433,10 @@ form label small {
   color: $gray-400;
 }
 
-.form-control.focus {
-  border: 1px solid $primary;
+.form-control.focus,
+.form-control:focus {
+  border: 1px solid var(--dh-color-input-focus-border);
+  box-shadow: none;
 }
 
 .form-control.is-invalid,
@@ -423,9 +453,12 @@ form label small {
 }
 
 .form-control:disabled {
-  border-color: $black;
-  color: $gray-500;
-  cursor: not-allowed;
+  border-color: var(--dh-color-input-disabled-border);
+  color: var(--dh-color-input-disabled-fg);
+}
+
+.form-control:hover:not(:focus):not(:disabled) {
+  border-color: var(--dh-color-input-hover-border);
 }
 
 .form-control:disabled::placeholder {
@@ -441,41 +474,53 @@ form label small {
   user-select: none; //checkboxs are label pseudo elements, clicking can toggle text selection otherwise
 }
 
-.custom-control-label::before {
-  border: 1px solid $gray-400;
-  top: 0.24rem;
-}
-
-.custom-control-label::after {
-  top: 0.24rem;
-}
-
-.custom-control-input:active ~ .custom-control-label::before {
-  background-color: $primary-dark;
-}
-
-.custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: $input-btn-focus-box-shadow;
-  border-color: $input-focus-border-color;
-}
-
 .custom-control-input:disabled ~ .custom-control-label::before {
-  background-color: $gray-500;
-  border: 1px solid $black;
   cursor: not-allowed;
 }
 
-.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
-  border: 1px solid $primary;
-}
-
 .custom-checkbox
   .custom-control-input:disabled
   ~ .custom-control-label::before {
-  border-color: $black;
   cursor: not-allowed;
 }
 
+.custom-radio {
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      mask: escape-svg($custom-radio-indicator-icon-checked) 4px / 6px 6px
+        no-repeat;
+      background: var(--dh-color-input-bg);
+    }
+  }
+}
+
+.custom-checkbox {
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      mask: escape-svg($custom-checkbox-indicator-icon-checked) 50%/75% 75%
+        no-repeat;
+      background: var(--dh-color-input-bg);
+    }
+  }
+
+  .custom-control-input:indeterminate ~ .custom-control-label {
+    &::after {
+      mask: escape-svg($custom-checkbox-indicator-icon-indeterminate) 50%/65%
+        65% no-repeat;
+      background: var(--dh-color-input-bg);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      border: var(--dh-color-input-disabled-fg);
+    }
+    &:indeterminate ~ .custom-control-label::before {
+      border: var(--dh-color-input-disabled-fg);
+    }
+  }
+}
+
 .custom-select {
   $caret-size: 10px 6px;
   $error-size: 16px;
@@ -483,8 +528,8 @@ form label small {
   background-image: var(--dh-svg-icon-select-indicator);
   background-size: $caret-size;
 
-  &:hover {
-    background-image: var(--dh-svg-icon-select-indicator-hover);
+  &:focus {
+    box-shadow: none;
   }
 
   &.is-invalid,
@@ -504,15 +549,23 @@ form label small {
 }
 
 .custom-select:disabled {
-  border-color: $black;
-  cursor: not-allowed;
+  color: var(--dh-color-text-disabled);
+  background-color: var(--dh-color-input-disabled-bg);
+  border-color: var(--dh-color-input-disabled-border);
   background-image: var(--dh-svg-icon-select-indicator-disabled);
+  opacity: 1;
   &.is-invalid {
     background-image: var(--dh-svg-icon-select-indicator-disabled),
       var(--dh-svg-icon-error);
   }
 }
 
+.custom-select:hover:not(:disabled) {
+  background-color: var(--dh-color-selector-hover-bg);
+  background-image: var(--dh-svg-icon-select-indicator-hover);
+  border-color: var(--dh-color-input-hover-border);
+}
+
 input[type='number'] {
   -moz-appearance: textfield;
   appearance: textfield;
@@ -539,14 +592,17 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 .input-group > .input-group-append.cb-dropdown > .btn {
-  border: 1px solid $gray-400;
+  border: 1px solid $input-border-color;
 
   &:focus {
     border-color: $input-focus-border-color;
   }
   &:disabled {
-    border-color: $background;
-    cursor: not-allowed;
+    background-color: $input-disabled-bg;
+    border-color: var(--dh-color-input-disabled-border);
+    .cb-caret {
+      background-color: var(--dh-color-icon-disabled-fg);
+    }
   }
 }
 /* stylelint-enable no-descending-specificity */
@@ -566,86 +622,8 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 /********** Modal Styling *********/
-.modal-dialog.theme-bg-light {
-  .modal-content {
-    color: $black;
-    background: $gray-100;
-  }
-
-  .form-control {
-    background: $gray-200;
-    color: $black;
-  }
-
-  .custom-checkbox {
-    .custom-control-label::before {
-      background-color: $gray-100;
-    }
-
-    .custom-control-input:checked ~ .custom-control-label::before {
-      background-color: $primary;
-    }
-
-    .custom-control-input:active ~ .custom-control-label::before {
-      background-color: $primary-light;
-      border-color: $primary;
-    }
-    .custom-control-input:disabled ~ .custom-control-label::before {
-      border-color: $black;
-      background-color: $gray-300;
-      cursor: not-allowed;
-    }
-  }
-
-  .custom-select {
-    background-color: $gray-200;
-    color: $black;
-  }
-
-  .modal-header {
-    border-bottom-color: transparent;
-    .close {
-      outline: 0;
-    }
-  }
-
-  .modal-footer {
-    border-top-color: transparent;
-  }
 
-  .btn-link {
-    color: $gray-700;
-    &:hover {
-      color: $black;
-    }
-  }
-
-  .btn-outline-secondary {
-    color: $gray-300;
-    background-color: transparent;
-    background-image: none;
-    border-color: $gray-300;
-    &:focus,
-    &.focus {
-      box-shadow: 0 0 0 0.2rem background-opacity(20);
-    }
-  }
-}
-
-.modal-dialog.theme-bg-dark {
-  .modal-title {
-    color: $foreground;
-  }
-  .modal-header {
-    .close {
-      color: $foreground;
-      text-shadow: 0 1px 0 $background;
-    }
-  }
-  .modal-content {
-    background: $content-bg;
-  }
-}
+// No using default modal styling
 
 /********** Browser Default Overides *********/
 ::selection {
@@ -711,14 +689,6 @@ input[type='number']::-webkit-inner-spin-button {
   background: hsla(var(--dh-color-scrollbar-hsl), 0.35);
 }
 
-// used in inverted color sections, like light modals
-.theme-bg-light {
-  --dh-color-scrollbar-hsl: #{var(--dh-color-bg-hsl)};
-
-  scrollbar-color: hsla(var(--dh-color-scrollbar-hsl), 0.5)
-    hsla(var(--dh-color-scrollbar-hsl), 0.3); // firefox
-}
-
 /********** Monaco Overides *********/
 //Note many monaco style are set inline, making overrides require !important
 
@@ -858,16 +828,6 @@ input[type='number']::-webkit-inner-spin-button {
     }
   }
 
-  .modal-dialog.theme-bg-light .custom-select {
-    background-image: var(--dh-svg-icon-select-indicator),
-      solid-gradient($gray-200);
-
-    &:-moz-focusring {
-      color: transparent;
-      text-shadow: 0 0 0 $background !important;
-    }
-  }
-
   .custom-select option {
     color: #3a4148;
   }
diff --git a/packages/components/scss/bootstrap_override_mixins_buttons.scss b/packages/components/scss/bootstrap_override_mixins_buttons.scss
index 4930d93f8e..08f1122adf 100644
--- a/packages/components/scss/bootstrap_override_mixins_buttons.scss
+++ b/packages/components/scss/bootstrap_override_mixins_buttons.scss
@@ -45,9 +45,10 @@
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
-    color: $color;
-    background-color: $background;
-    border-color: $border;
+    color: var(--dh-color-text-disabled);
+    background-color: var(--dh-color-disabled-bg);
+    border-color: transparent;
+    opacity: 1;
     // Remove CSS gradients if they're enabled
     @if $enable-gradients {
       background-image: none;
@@ -96,8 +97,10 @@
 
   &.disabled,
   &:disabled {
-    color: $color;
+    color: var(--dh-color-text-disabled);
     background-color: transparent;
+    border-color: var(--dh-color-disabled-bg);
+    opacity: 1;
   }
 
   &:not(:disabled):not(.disabled):active,
diff --git a/packages/components/scss/bootstrap_overrides.scss b/packages/components/scss/bootstrap_overrides.scss
index 5322ef8d81..5197a84a23 100644
--- a/packages/components/scss/bootstrap_overrides.scss
+++ b/packages/components/scss/bootstrap_overrides.scss
@@ -153,8 +153,7 @@ $grid-gutter-width: 30px;
 
 //Visual Overrides
 $border-radius: 4px;
-$box-shadow: 0 0.1rem 1rem hsla(var(--dh-color-black-hsl), 0.45); //because our UI is so dark, we need darker default shadows
-$box-shadow-900: 0 0.1rem 1rem hsla(var(--dh-color-true-black-hsl), 0.45); //darkest shadow for $black popups over $black UI
+$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);
 
 //Override Btn
 $btn-border-radius: 4rem;
@@ -166,6 +165,7 @@ $btn-transition:
   box-shadow 0.12s ease-in-out; //default 0.15 is too long
 $btn-border-width: 2px;
 $btn-font-weight: var(--spectrum-global-font-weight-bold);
+$btn-line-height: 1.3;
 
 //Override Inputs
 $input-bg: var(--dh-color-input-bg);
@@ -178,14 +178,28 @@ $input-focus-border-color: var(--dh-color-input-focus-border);
 $input-btn-focus-width: 0.2rem;
 $input-btn-focus-color: hsla(var(--dh-color-accent-hsl), 0.35);
 $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
+$input-btn-line-height: 1.3;
+// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).
+// The padding-y value has to be in rem to match units. Using 0.4214rem with 1.3
+// line height gets us to 31.99px vs Spectrum's 32px.
+$input-btn-padding-y: 0.4214rem;
 
 //checkbox
-$custom-control-indicator-bg: $gray-600;
-$custom-control-indicator-active-bg: var(--dh-color-accent-1100);
+$custom-control-indicator-bg: var(--dh-color-input-bg);
+$custom-control-indicator-border-color: var(--dh-color-input-border);
+$custom-checkbox-indicator-border-radius: 2px;
+$custom-control-indicator-border-width: 2px;
+$custom-control-indicator-active-bg: var(--dh-color-input-bg);
+$custom-control-indicator-active-border-color: var(--dh-color-input-fg);
+$custom-control-indicator-checked-bg: var(--dh-color-input-fg);
+$custom-control-indicator-checked-color: black; // used as mask fill color
+$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);
 $custom-control-indicator-bg-size: 75% 75%;
-$custom-control-indicator-disabled-bg: $gray-800;
-$custom-control-indicator-checked-disabled-bg: $gray-800;
-$custom-control-label-disabled-color: $gray-400;
+$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);
+$custom-control-indicator-checked-disabled-bg: var(
+  --dh-color-input-disabled-bg
+);
+$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);
 
 // The $custom-select-indicator variable is used by Bootstrap to provide the
 // icon for the select dropdown. Inline svgs can't use CSS variables, so we hard
@@ -193,6 +207,7 @@ $custom-control-label-disabled-color: $gray-400;
 // overrides this icon altogether for known dropdowns, so technically we may not
 // need this, but it's here in case there are any remaining instances.
 $custom-select-indicator-color: #929192;
+$custom-select-bg: var(--dh-color-selector-bg);
 $custom-select-bg-size: 16px 16px;
 //dhSort icon encoded
 $custom-select-indicator: str-replace(
@@ -205,9 +220,11 @@ $custom-select-disabled-color: $gray-500;
 $custom-select-disabled-bg: $gray-800;
 
 //modal
-$modal-content-bg: $gray-200;
+$modal-content-bg: $content-bg;
 $modal-content-border-width: 0;
 $modal-md: 550px;
+$close-color: var(--dh-color-text);
+$close-text-shadow: none;
 
 // Toast notification
 $toast-bg: var(--dh-color-accent-100);
@@ -228,12 +245,15 @@ $dropdown-link-hover-bg: $primary;
 $dropdown-divider-bg: $gray-700;
 
 //context menus
-$contextmenu-bg: $gray-600;
-$contextmenu-color: $foreground;
-$contextmenu-disabled-color: $text-muted;
-$contextmenu-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);
-$contextmenu-selected-bg: $primary;
-$contextmenu-selected-color: $foreground;
+$contextmenu-bg: var(--dh-color-popover-bg);
+$contextmenu-color: var(--dh-color-text);
+$contextmenu-disabled-color: var(--dh-color-input-disabled-fg);
+$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);
+$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);
+$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);
+
+//hr
+$hr-border-color: var(--dh-color-hr);
 
 //links
 $link-color: $gray-400;
diff --git a/packages/components/src/BasicModal.tsx b/packages/components/src/BasicModal.tsx
index 2acd83559f..fa3212cead 100644
--- a/packages/components/src/BasicModal.tsx
+++ b/packages/components/src/BasicModal.tsx
@@ -75,7 +75,7 @@ function BasicModal(props: BasicModalProps): JSX.Element {
   }
 
   return (
-    <Modal isOpen={isOpen} className="theme-bg-light" onOpened={onOpened}>
+    <Modal isOpen={isOpen} onOpened={onOpened}>
       <ModalHeader closeButton={false}>{headerText}</ModalHeader>
       <ModalBody>{modalBody}</ModalBody>
       <ModalFooter>
diff --git a/packages/components/src/Button.tsx b/packages/components/src/Button.tsx
index 9b7c8ffd7b..0200766e06 100644
--- a/packages/components/src/Button.tsx
+++ b/packages/components/src/Button.tsx
@@ -109,9 +109,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       ...rest
     } = props;
 
-    const iconOnly = Boolean(icon && children == null);
-    const btnClassName = getClassName(kind, iconOnly);
-
     let variantClassName;
     if (variant) {
       variantClassName = getVariantClasses(variant);
@@ -126,12 +123,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       );
     }
 
+    let iconOnly = iconElem != null && children == null;
     // Best effort backwards-compatible attempt to auto add margin to icon if text is also present
     // We would need to audit our usage of Buttons to remove margins by classname to just add the margin to every icon button with children
     if (iconElem != null && children != null) {
       // check if react children contains a text node to a depth of 2
       // to exlude poppers/menus, but not button text nested in spans
       let containsTextNode = false;
+      iconOnly = true; // assume icon only until we find a text node
       React.Children.forEach(children, child => {
         if (typeof child === 'string') {
           containsTextNode = true;
@@ -144,12 +143,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         }
       });
       if (containsTextNode) {
+        iconOnly = false; // is not iconOnly if we found a text node
         iconElem = React.cloneElement(iconElem, {
           className: classNames('mr-1', iconElem.props.className),
         });
       }
     }
 
+    const btnClassName = getClassName(kind, iconOnly);
+
     let tooltipElem: JSX.Element | undefined;
     if (tooltip !== undefined) {
       tooltipElem =
diff --git a/packages/components/src/ComboBox.scss b/packages/components/src/ComboBox.scss
index ef966db24f..046c18dc7f 100644
--- a/packages/components/src/ComboBox.scss
+++ b/packages/components/src/ComboBox.scss
@@ -10,23 +10,44 @@ $cb-option-hover-color: $dropdown-link-hover-color;
   flex-wrap: nowrap;
 
   .btn {
+    background-color: var(--dh-color-selector-bg);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
+    &:disabled {
+      opacity: 1;
+    }
   }
 
   .cb-caret {
     @include caret-icon;
   }
+
+  .btn:not(:disabled):hover {
+    background-color: var(--dh-color-selector-hover-bg);
+  }
   .btn:not(:disabled):hover .cb-caret {
     background-color: var(--dh-color-selector-hover-fg);
   }
 
+  .cb-input:focus + .cb-dropdown .btn {
+    border-color: var(--dh-color-input-focus-border);
+  }
+
   .cb-input.is-invalid + .cb-dropdown .btn {
     border-color: $form-feedback-invalid-color;
     color: $form-feedback-invalid-color;
   }
+
+  // React Spectrum accents the border of the input and the dropdown button on
+  // hover and focus. Focus gets precedence. Mimic that behavior here as well.
+  &:hover {
+    .cb-input:not(:focus):not(:disabled),
+    .cb-input:not(:focus) + .cb-dropdown .btn:not(:disabled) {
+      border-color: var(--dh-color-input-hover-border);
+    }
+  }
 }
 
 .cb-menu-container {
diff --git a/packages/components/src/ComboBox.tsx b/packages/components/src/ComboBox.tsx
index a9760a7552..0b89fd0973 100644
--- a/packages/components/src/ComboBox.tsx
+++ b/packages/components/src/ComboBox.tsx
@@ -483,6 +483,8 @@ class ComboBox extends Component<ComboBoxProps, ComboBoxState> {
         />
         <div className="input-group-append cb-dropdown">
           <button
+            // Mimic React Spectrum where dropdown button is not a tab stop
+            tabIndex={-1}
             type="button"
             className="btn cb-btn form-control"
             ref={this.toggleButton}
diff --git a/packages/components/src/CopyButton.tsx b/packages/components/src/CopyButton.tsx
index 53f3c111d4..b3ffedd1c3 100644
--- a/packages/components/src/CopyButton.tsx
+++ b/packages/components/src/CopyButton.tsx
@@ -12,6 +12,8 @@ type CopyButtonProps = {
   tooltip?: string;
   /** Optional extra classname */
   className?: string;
+  /** Optional extra styles */
+  style?: React.CSSProperties;
   /** Optional extra testid */
   'data-testid'?: string;
   /** Optional button children */
@@ -26,6 +28,7 @@ function CopyButton({
   kind = 'ghost',
   tooltip = 'Copy',
   className,
+  style,
   'data-testid': dataTestId,
   children,
 }: CopyButtonProps): JSX.Element {
@@ -34,6 +37,7 @@ function CopyButton({
     <Button
       kind={kind}
       className={className}
+      style={style}
       data-testid={dataTestId}
       icon={copied ? vsPassFilled : vsCopy}
       tooltip={copied ? 'Copied' : tooltip}
diff --git a/packages/components/src/DraggableItemList.scss b/packages/components/src/DraggableItemList.scss
index 2922f8f5c5..6bad87de17 100644
--- a/packages/components/src/DraggableItemList.scss
+++ b/packages/components/src/DraggableItemList.scss
@@ -1,6 +1,6 @@
 @import '../scss/custom.scss';
 
-$draggable-item-hover-bg: $secondary;
+$draggable-item-hover-bg: var(--dh-color-gray-500);
 $draggable-item-selected-bg: hsla(var(--dh-color-accent-hsl), 0.4);
 $draggable-item-selected-hover-bg: $primary;
 $draggable-item-dragging-bg: $primary;
diff --git a/packages/components/src/ItemListItem.scss b/packages/components/src/ItemListItem.scss
index 943d201578..1e985e8f5b 100644
--- a/packages/components/src/ItemListItem.scss
+++ b/packages/components/src/ItemListItem.scss
@@ -20,6 +20,7 @@
   flex-grow: 1;
   padding: 0 $input-btn-padding-x;
   justify-content: space-between;
+  align-items: center;
   cursor: pointer;
 
   .title {
diff --git a/packages/components/src/SocketedButton.scss b/packages/components/src/SocketedButton.scss
index 78ead78a08..60d237ccf0 100644
--- a/packages/components/src/SocketedButton.scss
+++ b/packages/components/src/SocketedButton.scss
@@ -1,9 +1,11 @@
 @import '../scss/custom.scss';
 
-$socket-button-bg: var(--dh-color-neutral-bg);
-$socket-button-disabled-bg: $input-disabled-bg;
-$socket-button-disabled-border-color: var(--dh-color-black);
-$socket-button-hover-bg: $primary-hover;
+$socket-button-bg: var(--dh-color-action-bg);
+$socket-button-disabled-bg: var(--dh-color-action-disabled-bg);
+$socket-button-disabled-border-color: var(--dh-color-action-disabled-border);
+$socket-button-hover-bg: var(--dh-color-action-hover-bg);
+$socket-button-hover-border: var(--dh-color-hover-border);
+$socket-button-down-bg: var(--dh-color-action-down-bg);
 $socket-size: 18px;
 $socket-linked-color: $primary;
 $socket-linked-source-color: $purple;
@@ -47,15 +49,15 @@ $socket-bg: $content-bg;
 
   &:hover {
     background-color: $socket-button-hover-bg;
-    border-color: $socket-button-hover-bg;
+    border-color: $socket-button-hover-border;
     &::after {
-      border-color: $socket-button-hover-bg;
+      border-color: $socket-button-hover-border;
     }
   }
 
   &:active {
-    border-color: $primary-light;
-    background-color: $primary-light;
+    border-color: $socket-button-hover-border;
+    background-color: $socket-button-down-bg;
   }
 
   .btn-socketed-icon {
diff --git a/packages/components/src/TimeSlider.scss b/packages/components/src/TimeSlider.scss
index 660c91ee82..b7d7173478 100644
--- a/packages/components/src/TimeSlider.scss
+++ b/packages/components/src/TimeSlider.scss
@@ -57,7 +57,7 @@ $tick-label-color: $gray-300;
 
       .track-fill {
         border-radius: $track-height * 0.5;
-        background: $primary-dark;
+        background: var(--dh-color-accent-bg);
         height: 100%;
         width: 100%;
         position: absolute;
diff --git a/packages/components/src/UISwitch.scss b/packages/components/src/UISwitch.scss
index 7c3c88e877..0984089171 100644
--- a/packages/components/src/UISwitch.scss
+++ b/packages/components/src/UISwitch.scss
@@ -13,6 +13,7 @@ $switch-background-color: $gray-800;
 $switch-background-active-color: $primary;
 
 .btn-switch {
+  display: inline-block;
   font-size: $switch-font-size;
   color: $gray-300;
   background: $switch-background-color;
@@ -21,6 +22,7 @@ $switch-background-active-color: $primary;
   width: $switch-width;
   overflow: hidden;
   border: 1px solid $input-border-color;
+  height: calc($switch-size + $switch-handle-padding * 2);
 
   .handle {
     position: relative;
diff --git a/packages/components/src/context-actions/ContextActions.scss b/packages/components/src/context-actions/ContextActions.scss
index 6c8ec56840..582dc86cbf 100644
--- a/packages/components/src/context-actions/ContextActions.scss
+++ b/packages/components/src/context-actions/ContextActions.scss
@@ -31,7 +31,7 @@ $hr-bg-color: $gray-700;
   text-align: left;
   border-radius: $border-radius;
   background-clip: border-box;
-  box-shadow: $box-shadow-900;
+  box-shadow: $box-shadow;
   max-height: 100vh;
   overflow-y: auto;
 
@@ -172,7 +172,7 @@ $hr-bg-color: $gray-700;
     cursor: default;
     user-select: none;
     font-weight: 500;
-    border-bottom: 1px solid $gray-500;
+    border-bottom: 1px solid var(--dh-color-hr);
   }
 
   .loading {
diff --git a/packages/components/src/menu-actions/DropdownMenu.scss b/packages/components/src/menu-actions/DropdownMenu.scss
index 012d48a273..c370a78b7f 100644
--- a/packages/components/src/menu-actions/DropdownMenu.scss
+++ b/packages/components/src/menu-actions/DropdownMenu.scss
@@ -1,5 +1,5 @@
 @import '../../scss/custom.scss';
-$menu-bg: $gray-700;
+$menu-bg: $contextmenu-bg;
 $arrow-width: 5px;
 $dropdownmenu-max-height: 80vh;
 
diff --git a/packages/components/src/modal/Modal.tsx b/packages/components/src/modal/Modal.tsx
index 86b8f8914f..0cc86fc61c 100644
--- a/packages/components/src/modal/Modal.tsx
+++ b/packages/components/src/modal/Modal.tsx
@@ -25,7 +25,7 @@ interface ModalProps {
 }
 
 function Modal({
-  className = 'theme-bg-light',
+  className = '',
   children,
   role = 'role',
   keyboard = true,
diff --git a/packages/components/src/navigation/MenuItem.scss b/packages/components/src/navigation/MenuItem.scss
index 3c795b279c..7df95ad695 100644
--- a/packages/components/src/navigation/MenuItem.scss
+++ b/packages/components/src/navigation/MenuItem.scss
@@ -3,14 +3,19 @@
 .btn-navigation-menu-item {
   display: flex;
   list-style: none;
+  font-weight: normal;
   color: var(--dh-color-menu-item-fg);
   border-radius: 0;
   text-align: left;
   margin: 0;
-  padding: $spacer-2 $spacer-1 $spacer-2 $spacer;
+  padding: $spacer-1 $spacer-1 $spacer-1 $spacer-3;
+  padding-right: 0;
   width: 100%;
+  height: auto;
+  min-height: 32px;
   text-decoration: none;
   border: $input-border-width solid transparent;
+  transition: none;
 
   .icon {
     width: 25px;
@@ -37,7 +42,7 @@
   }
 
   &:hover {
-    background: $primary;
+    background: var(--dh-color-item-list-hover-bg);
     color: $foreground;
     text-decoration: none;
 
diff --git a/packages/components/src/navigation/Page.scss b/packages/components/src/navigation/Page.scss
index 5e5209874f..b9a4ac6fa6 100644
--- a/packages/components/src/navigation/Page.scss
+++ b/packages/components/src/navigation/Page.scss
@@ -21,13 +21,6 @@
       text-align: center;
       padding-top: 0.6em;
     }
-
-    .btn-back {
-      font-size: 0.9rem;
-      text-decoration: none;
-      padding: $spacer-1;
-      margin: $spacer-1;
-    }
   }
 
   .navigation-content {
diff --git a/packages/components/src/navigation/Page.tsx b/packages/components/src/navigation/Page.tsx
index e8b8a1c130..8ad9c7aab3 100644
--- a/packages/components/src/navigation/Page.tsx
+++ b/packages/components/src/navigation/Page.tsx
@@ -29,7 +29,7 @@ export function Page({
           {onBack !== undefined && (
             <Button
               kind="ghost"
-              className="btn-back"
+              className="btn-back m-1 btn-sm"
               data-testid="btn-page-back"
               onClick={onBack}
               icon={vsChevronLeft}
@@ -43,7 +43,7 @@ export function Page({
           {onClose !== undefined && (
             <Button
               kind="ghost"
-              className="btn-close px-2 m-1"
+              className="btn-close btn-sm px-2 m-1"
               data-testid="btn-page-close"
               onClick={onClose}
               icon={vsClose}
diff --git a/packages/components/src/popper/Popper.scss b/packages/components/src/popper/Popper.scss
index cca022aff6..61f69e938e 100644
--- a/packages/components/src/popper/Popper.scss
+++ b/packages/components/src/popper/Popper.scss
@@ -1,7 +1,6 @@
 @import '../../scss/custom.scss';
 
 $arrow-width: 5px;
-$popper-shadow: 0 0.1rem 1.5rem 0.25rem hsla(var(--dh-color-black-hsl), 0.45);
 $animation-scale: 0.92;
 $animation-offset: 10px;
 
@@ -10,10 +9,17 @@ $animation-offset: 10px;
   z-index: 5000;
 }
 
+.popper.popper-tooltip {
+  --background-color: var(--dh-color-tooltip-bg);
+}
+
 .popper {
-  background: var(--dh-color-tooltip-bg);
+  --background-color: var(--dh-color-popover-bg);
+
+  background: var(--background-color);
   color: var(--dh-color-tooltip-fg);
   border-radius: $border-radius;
+  box-shadow: $box-shadow;
   transition:
     visibility $transition,
     opacity $transition;
@@ -22,7 +28,6 @@ $animation-offset: 10px;
 
   .popper-content {
     position: relative;
-    box-shadow: $popper-shadow;
 
     .tooltip-content {
       text-align: center;
@@ -36,7 +41,7 @@ $animation-offset: 10px;
     border-style: solid;
     position: absolute;
     margin: $arrow-width;
-    border-color: var(--dh-color-tooltip-bg);
+    border-color: var(--background-color);
   }
 }
 
diff --git a/packages/components/src/popper/Tooltip.tsx b/packages/components/src/popper/Tooltip.tsx
index 1409864ec8..02d8e3d4b3 100644
--- a/packages/components/src/popper/Tooltip.tsx
+++ b/packages/components/src/popper/Tooltip.tsx
@@ -311,7 +311,7 @@ class Tooltip extends Component<TooltipProps, TooltipState> {
         data-testid={dataTestId}
       >
         <Popper
-          className={classNames(popperClassName)}
+          className={classNames(popperClassName, 'popper-tooltip')}
           options={options}
           ref={this.popper}
           onEntered={onEntered}
diff --git a/packages/components/src/theme/Logo.css b/packages/components/src/theme/Logo.css
new file mode 100644
index 0000000000..779b5a67a8
--- /dev/null
+++ b/packages/components/src/theme/Logo.css
@@ -0,0 +1,16 @@
+:root {
+  --dh-logo-dark-img: url('./logos/community-wordmark-dark.svg');
+  --dh-logo-light-img: url('./logos/community-wordmark-light.svg');
+}
+
+.dh-logo {
+  --dh-logo-width: 230;
+  --dh-logo-height: 40;
+  aspect-ratio: var(--dh-logo-width) / var(--dh-logo-height);
+  max-height: 100%;
+  max-width: 100%;
+  height: calc(var(--dh-logo-height) * 1px); /* assign unit */
+  background-image: var(--dh-logo-img);
+  background-repeat: no-repeat;
+  background-position: left center;
+}
diff --git a/packages/components/src/theme/Logo.tsx b/packages/components/src/theme/Logo.tsx
new file mode 100644
index 0000000000..d8099061d3
--- /dev/null
+++ b/packages/components/src/theme/Logo.tsx
@@ -0,0 +1,13 @@
+import classNames from 'classnames';
+import './Logo.css';
+
+interface LogoProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function Logo({ className, style }: LogoProps): JSX.Element {
+  return <div className={classNames('dh-logo', className)} style={style} />;
+}
+
+export default Logo;
diff --git a/packages/components/src/theme/ThemeUtils.test.ts b/packages/components/src/theme/ThemeUtils.test.ts
index b281511f03..c91c75e168 100644
--- a/packages/components/src/theme/ThemeUtils.test.ts
+++ b/packages/components/src/theme/ThemeUtils.test.ts
@@ -308,6 +308,18 @@ describe('getDefaultBaseThemes', () => {
           './theme-dark-components.css?raw',
         ].join('\n'),
       },
+      {
+        name: 'Default Light',
+        themeKey: 'default-light',
+        styleContent: [
+          './theme-light-palette.css?raw',
+          './theme-light-semantic.css?raw',
+          './theme-light-semantic-chart.css?raw',
+          './theme-light-semantic-editor.css?raw',
+          './theme-light-semantic-grid.css?raw',
+          './theme-light-components.css?raw',
+        ].join('\n'),
+      },
     ]);
   });
 });
diff --git a/packages/components/src/theme/ThemeUtils.ts b/packages/components/src/theme/ThemeUtils.ts
index eac8c3be0c..6211e1ecfa 100644
--- a/packages/components/src/theme/ThemeUtils.ts
+++ b/packages/components/src/theme/ThemeUtils.ts
@@ -1,8 +1,10 @@
 import Log from '@deephaven/log';
 import { assertNotNull, ColorUtils } from '@deephaven/utils';
 import { themeDark } from './theme-dark';
+import { themeLight } from './theme-light';
 import {
   DEFAULT_DARK_THEME_KEY,
+  DEFAULT_LIGHT_THEME_KEY,
   DEFAULT_PRELOAD_DATA_VARIABLES,
   ThemeData,
   ThemePreloadData,
@@ -147,11 +149,11 @@ export function getDefaultBaseThemes(): ThemeData[] {
     // The ThemePicker shows whenever more than 1 theme is available. Disable
     // light theme for now to keep the picker hidden until it is fully
     // implemented by #1539.
-    // {
-    //   name: 'Default Light',
-    //   themeKey: DEFAULT_LIGHT_THEME_KEY,
-    //   styleContent: themeLight,
-    // },
+    {
+      name: 'Default Light',
+      themeKey: DEFAULT_LIGHT_THEME_KEY,
+      styleContent: themeLight,
+    },
   ];
 }
 
diff --git a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
index 4a8fbf0ea8..1046a36c38 100644
--- a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
+++ b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
@@ -4,14 +4,14 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
 <body>
   <div>
     <style
-      data-theme-key="default-dark"
+      data-theme-key="default-light"
     >
-      ./theme-dark-palette.css?raw
-./theme-dark-semantic.css?raw
-./theme-dark-semantic-chart.css?raw
-./theme-dark-semantic-editor.css?raw
-./theme-dark-semantic-grid.css?raw
-./theme-dark-components.css?raw
+      ./theme-light-palette.css?raw
+./theme-light-semantic.css?raw
+./theme-light-semantic-chart.css?raw
+./theme-light-semantic-editor.css?raw
+./theme-light-semantic-grid.css?raw
+./theme-light-components.css?raw
     </style>
     <div
       class="spectrum-theme-provider spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
diff --git a/packages/components/src/theme/index.ts b/packages/components/src/theme/index.ts
index 6b8e26e5f7..13c862b6fe 100644
--- a/packages/components/src/theme/index.ts
+++ b/packages/components/src/theme/index.ts
@@ -5,3 +5,4 @@ export * from './ThemePicker';
 export * from './ThemeProvider';
 export * from './ThemeUtils';
 export * from './useTheme';
+export * from './Logo';
diff --git a/packages/code-studio/src/settings/community-wordmark-app.svg b/packages/components/src/theme/logos/community-wordmark-dark.svg
similarity index 100%
rename from packages/code-studio/src/settings/community-wordmark-app.svg
rename to packages/components/src/theme/logos/community-wordmark-dark.svg
diff --git a/packages/components/src/theme/logos/community-wordmark-light.svg b/packages/components/src/theme/logos/community-wordmark-light.svg
new file mode 100644
index 0000000000..fcd59c605f
--- /dev/null
+++ b/packages/components/src/theme/logos/community-wordmark-light.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115 20">
+    <defs>
+        <style>.a{fill:#9ecd6f;}.b{fill:#333333;}.c{fill:#fad45b;}.d{fill:#65c4d8;}.e{fill:#ee5e82;}</style>
+    </defs>
+    <rect class="a" x="1" y="13" width="12" height="6" />
+    <rect class="d" x="1" y="1" width="12" height="6" />
+    <path class="b" d="M33.21,5.15a4.7,4.7,0,0,1,2,1.87,5.63,5.63,0,0,1,.7,2.85,5.48,5.48,0,0,1-.7,2.83,4.61,4.61,0,0,1-2,1.83,6.58,6.58,0,0,1-3,.64H26.73V4.5h3.49A6.46,6.46,0,0,1,33.21,5.15Zm-.12,7.58a3.89,3.89,0,0,0,1-2.86,4,4,0,0,0-1-2.9,3.76,3.76,0,0,0-2.87-1H28.49v7.82h1.73A3.86,3.86,0,0,0,33.09,12.73Z" />
+    <path class="b" d="M45.41,11.59H38.94a2.34,2.34,0,0,0,2.42,2.24,2,2,0,0,0,2-1.18h1.89a3.74,3.74,0,0,1-1.39,1.91,4,4,0,0,1-2.49.75,4.28,4.28,0,0,1-2.18-.55,3.81,3.81,0,0,1-1.5-1.53,4.63,4.63,0,0,1-.55-2.3,4.81,4.81,0,0,1,.53-2.29,3.66,3.66,0,0,1,1.49-1.53,4.44,4.44,0,0,1,2.21-.54,4.28,4.28,0,0,1,2.13.52A3.69,3.69,0,0,1,45,8.56a4.38,4.38,0,0,1,.52,2.17A5.52,5.52,0,0,1,45.41,11.59Zm-1.77-1.41A2,2,0,0,0,43,8.63,2.47,2.47,0,0,0,41.28,8a2.26,2.26,0,0,0-1.55.58A2.38,2.38,0,0,0,39,10.18Z" />
+    <path class="b" d="M55,11.59H48.56a2.34,2.34,0,0,0,.75,1.63,2.36,2.36,0,0,0,1.66.61,2,2,0,0,0,2-1.18h1.89a3.74,3.74,0,0,1-1.39,1.91,4,4,0,0,1-2.49.75,4.28,4.28,0,0,1-2.18-.55,3.81,3.81,0,0,1-1.5-1.53,4.74,4.74,0,0,1-.55-2.3,4.81,4.81,0,0,1,.53-2.29,3.72,3.72,0,0,1,1.49-1.53A4.44,4.44,0,0,1,51,6.57a4.25,4.25,0,0,1,2.13.52,3.69,3.69,0,0,1,1.46,1.47,4.38,4.38,0,0,1,.52,2.17A5.52,5.52,0,0,1,55,11.59Zm-1.76-1.41a2,2,0,0,0-.69-1.55A2.5,2.5,0,0,0,50.89,8a2.28,2.28,0,0,0-1.55.58,2.38,2.38,0,0,0-.77,1.56Z" />
+    <path class="b" d="M59.63,7a3.72,3.72,0,0,1,1.74-.4,3.83,3.83,0,0,1,3.46,2.07,4.86,4.86,0,0,1,.52,2.26,5,5,0,0,1-.52,2.28,3.91,3.91,0,0,1-1.44,1.57,3.82,3.82,0,0,1-2,.56,3.69,3.69,0,0,1-1.72-.39,3.89,3.89,0,0,1-1.23-1V19.2H56.67V6.71h1.75V8A3.5,3.5,0,0,1,59.63,7Zm3.58,2.42a2.42,2.42,0,0,0-1-1A2.52,2.52,0,0,0,61,8.09a2.51,2.51,0,0,0-2.21,1.32,3.08,3.08,0,0,0-.36,1.52,3.12,3.12,0,0,0,.36,1.53,2.46,2.46,0,0,0,.95,1,2.49,2.49,0,0,0,1.26.34,2.44,2.44,0,0,0,1.26-.35,2.5,2.5,0,0,0,1-1,3.18,3.18,0,0,0,.36-1.54A3,3,0,0,0,63.21,9.39Z" />
+    <path class="b" d="M73.06,7a3,3,0,0,1,1.19,1.23,4,4,0,0,1,.44,2v5H73V10.44a2.43,2.43,0,0,0-.57-1.74,2.29,2.29,0,0,0-3.11,0,2.39,2.39,0,0,0-.58,1.74v4.73H67V3.8H68.7V7.69a3,3,0,0,1,1.13-.83,3.86,3.86,0,0,1,1.5-.29A3.65,3.65,0,0,1,73.06,7Z" />
+    <path class="b" d="M76.69,8.64a3.83,3.83,0,0,1,3.46-2.07A3.69,3.69,0,0,1,81.89,7a3.43,3.43,0,0,1,1.19,1V6.71h1.77v8.46H83.08V13.91a3.46,3.46,0,0,1-1.21,1,3.7,3.7,0,0,1-1.75.4,3.77,3.77,0,0,1-2-.56,4,4,0,0,1-1.43-1.57,4.74,4.74,0,0,1-.53-2.28A4.63,4.63,0,0,1,76.69,8.64Zm6,.77a2.47,2.47,0,0,0-.94-1,2.43,2.43,0,0,0-1.26-.34,2.52,2.52,0,0,0-1.26.33,2.46,2.46,0,0,0-1,1A3,3,0,0,0,78,10.9a3.18,3.18,0,0,0,.36,1.54,2.5,2.5,0,0,0,1,1,2.46,2.46,0,0,0,3.45-1,3.12,3.12,0,0,0,.36-1.53A3.08,3.08,0,0,0,82.72,9.41Z" />
+    <path class="b" d="M90.56,13.6,93,6.71h1.86l-3.23,8.46H89.5L86.29,6.71h1.87Z" />
+    <path class="b" d="M103.79,11.59H97.32a2.34,2.34,0,0,0,.75,1.63,2.38,2.38,0,0,0,1.66.61,2.05,2.05,0,0,0,2-1.18h1.89a3.8,3.8,0,0,1-1.39,1.91,4.06,4.06,0,0,1-2.5.75,4.24,4.24,0,0,1-2.17-.55,3.9,3.9,0,0,1-1.51-1.53,4.74,4.74,0,0,1-.54-2.3A4.69,4.69,0,0,1,96,8.64a3.66,3.66,0,0,1,1.49-1.53,4.4,4.4,0,0,1,2.2-.54,4.32,4.32,0,0,1,2.14.52,3.75,3.75,0,0,1,1.46,1.47,4.49,4.49,0,0,1,.52,2.17A5.52,5.52,0,0,1,103.79,11.59ZM102,10.18a2,2,0,0,0-.69-1.55A2.47,2.47,0,0,0,99.66,8a2.28,2.28,0,0,0-1.56.58,2.37,2.37,0,0,0-.76,1.56Z" />
+    <path class="b" d="M111.58,7a3,3,0,0,1,1.24,1.23,4,4,0,0,1,.45,2v5h-1.74V10.44A2.43,2.43,0,0,0,111,8.7a2,2,0,0,0-1.55-.61,2,2,0,0,0-1.56.61,2.43,2.43,0,0,0-.57,1.74v4.73h-1.76V6.71h1.76v1a2.91,2.91,0,0,1,1.09-.82,3.61,3.61,0,0,1,1.42-.29A3.84,3.84,0,0,1,111.58,7Z" />
+    <rect class="c" x="1" y="7" width="6" height="12" />
+    <rect class="d" x="1" y="1" width="6" height="12" />
+    <rect class="e" x="13" y="7" width="6" height="6" />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/theme/theme-dark/theme-dark-components.css b/packages/components/src/theme/theme-dark/theme-dark-components.css
index b02f861cc3..e757b47cb4 100644
--- a/packages/components/src/theme/theme-dark/theme-dark-components.css
+++ b/packages/components/src/theme/theme-dark/theme-dark-components.css
@@ -7,6 +7,9 @@
   --dh-color-radial-reaction: hsla(var(--dh-color-visual-gray-hsl), 0.6);
   --dh-color-colorpicker-border: hsla(var(--dh-color-visual-gray-hsl), 0.1);
 
+  /* Logo */
+  --dh-logo-img: var(--dh-logo-dark-img);
+
   /* Login */
   --dh-color-login-form-bg: var(--dh-color-gray-400);
   --dh-color-login-status-message: var(--dh-color-gray-600);
@@ -27,14 +30,14 @@
   --dh-color-random-area-plot-animation-grid: var(--dh-color-gray-300);
 
   /* Actions */
-  --dh-color-action-bg: hsl(var(--dh-color-action-hsl));
-  --dh-color-action-fg: hsl(var(--dh-color-action-contrast-hsl));
+  --dh-color-action-bg: var(--dh-color-gray-75);
+  --dh-color-action-fg: var(--dh-color-text);
   --dh-color-action-border: var(--dh-color-border);
 
   --dh-color-action-down-bg: var(--dh-color-gray-300);
 
-  --dh-color-action-hover-bg: var(--dh-color-black);
-  --dh-color-action-hover-fg: var(--dh-color-action-fg);
+  --dh-color-action-hover-bg: var(--dh-color-gray-50);
+  --dh-color-action-hover-fg: var(--dh-color-text-hover);
   --dh-color-action-hover-border: var(--dh-color-hover-border);
 
   --dh-color-action-active-bg: var(--dh-color-accent-bg);
@@ -46,16 +49,24 @@
   --dh-color-action-active-hover-border: var(--dh-color-accent-hover-bg);
 
   --dh-color-action-disabled-bg: transparent;
-  --dh-color-action-disabled-fg: var(--dh-color-gray-700);
-  --dh-color-action-disabled-border: var(--dh-color-black);
+  --dh-color-action-disabled-fg: var(--dh-color-text-disabled);
+  --dh-color-action-disabled-border: var(--dh-color-gray-300);
+
+  /* Icons */
+  --dh-color-icon-fg: var(--dh-color-gray-700);
+  --dh-color-icon-disabled-fg: var(--dh-color-gray-400);
 
   /* Inputs */
-  --dh-color-input-bg: var(--dh-color-gray-500);
-  --dh-color-input-fg: var(--dh-color-fg);
-  --dh-color-input-disabled-bg: var(--dh-color-gray-300);
-  --dh-color-input-border: var(--dh-color-gray-600);
+  --dh-color-input-bg: var(--dh-color-gray-50);
+  --dh-color-input-fg: var(--dh-color-text);
+  --dh-color-input-border: var(--dh-color-border);
   --dh-color-input-placeholder: var(--dh-color-gray-600);
-  --dh-color-input-focus-border: hsla(var(--dh-color-accent-hsl), 0.85);
+  --dh-color-input-active-bg: var(--dh-color-input-bg);
+  --dh-color-input-disabled-bg: var(--dh-color-disabled-bg);
+  --dh-color-input-disabled-border: transparent;
+  --dh-color-input-disabled-fg: var(--dh-color-text-disabled);
+  --dh-color-input-hover-border: var(--dh-color-gray-600);
+  --dh-color-input-focus-border: var(--dh-color-border-focus);
 
   /* Form Controls */
   --dh-color-search-icon: var(--dh-color-fg);
@@ -65,23 +76,21 @@
     0.25
   );
 
+  /* Labels */
+  --dh-color-label-text: var(--dh-color-gray-700);
+
   /* Selectors (pickers, dropdowns, select, etc.) */
-  --dh-color-selector-fg: hsla(var(--dh-color-gray-800-hsl), 0.4);
-  --dh-color-selector-hover-fg: hsl(var(--dh-color-gray-800-hsl));
-  --dh-color-selector-disabled-fg: hsla(
-    var(--dh-color-gray-800-hsl),
-    /* 
-     * Other dropdowns have opacity .4 when not hovered and then an additional 
-     * .65 opacity applied to disabled, hence .4 * .65 == .26
-     */
-      0.26
-  );
+  --dh-color-selector-fg: var(--dh-color-icon-fg);
+  --dh-color-selector-bg: var(--dh-color-gray-75);
+  --dh-color-selector-hover-bg: var(--dh-color-gray-50);
+  --dh-color-selector-hover-fg: var(--dh-color-gray-900);
+  --dh-color-selector-disabled-fg: var(--dh-color-icon-disabled-fg);
 
   /* Item List */
   --dh-color-item-list-bg: transparent;
   --dh-color-item-list-active-bg: var(--dh-color-highlight-active);
   --dh-color-item-list-hover-bg: var(--dh-color-highlight-hover);
-  --dh-color-item-list-selected-fg: var(--dh-color-white);
+  --dh-color-item-list-selected-fg: var(--dh-color-text);
   --dh-color-item-list-selected-bg: var(--dh-color-highlight-selected);
   --dh-color-item-list-selected-hover-bg: var(
     --dh-color-highlight-selected-hover
@@ -103,13 +112,28 @@
    * --dh-color-item-list-keyboard-selected-hover-bg
    */
 
+  /* Golden Layout */
+  --dh-color-golden-layout-tab-header-bg: var(--dh-color-gray-75);
+  --dh-color-golden-layout-tab-bg: var(--dh-color-gray-75);
+  --dh-color-golden-layout-tab-selected-bg: var(--dh-color-content-bg);
+
   /* Navigation Menu */
   --dh-color-menu-item-fg: var(--dh-color-gray-700);
 
+  /* Hr */
+  --dh-color-hr: var(--dh-color-gray-200);
+
+  /* Dialogs */
+  --dh-color-dialog-title-fg: var(--dh-color-heading-text);
+  --dh-color-dialog-fg: var(--dh-color-text);
+
+  /* Popovers */
+  --dh-color-popover-bg: var(--dh-color-bg);
+
   /* Tooltips */
   --dh-color-tooltip-bg: var(--dh-color-gray-400);
   --dh-color-tooltip-fg: var(--dh-color-fg);
-  --dh-color-tooltip-box-shadow: hsla(var(--dh-color-black-hsl), 0.8);
+  --dh-color-tooltip-box-shadow: var(--dh-color-dropshadow);
 
   /* Wells */
   --dh-color-well-bg: hsla(var(--dh-color-visual-gray-hsl), 0.02);
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css
index 1f9a739792..dd6ec15ee6 100644
--- a/packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css
@@ -6,6 +6,9 @@
   --dh-color-editor-line-number-fg: var(--dh-color-gray-700);
   --dh-color-editor-line-highlight-bg: var(--dh-color-gray-200);
   --dh-color-editor-selection-bg: var(--dh-color-text-highlight);
+  --dh-color-editor-inactive-selection-bg: var(--dh-color-gray-300);
+  --dh-color-editor-selection-highlight-bg: var(--dh-color-gray-500);
+  --dh-color-editor-word-highlight-bg: var(--dh-color-gray-500);
 
   /* Code rules */
   --dh-color-editor-comment: var(--dh-color-gray-700);
@@ -21,6 +24,15 @@
   --dh-color-editor-string-delim: var(--dh-color-gray-700);
   --dh-color-editor-string: var(--dh-color-visual-yellow);
 
+  /* Brackets */
+  --dh-color-editor-bracket-fg1: var(--dh-color-visual-yellow);
+  --dh-color-editor-bracket-fg2: var(--dh-color-visual-purple);
+  --dh-color-editor-bracket-fg3: var(--dh-color-visual-blue);
+  --dh-color-editor-bracket-fg4: var(--dh-color-visual-yellow);
+  --dh-color-editor-bracket-fg5: var(--dh-color-visual-purple);
+  --dh-color-editor-bracket-fg6: var(--dh-color-visual-blue);
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-visual-negative);
+
   /* Input */
   --dh-color-editor-focus-border: var(--dh-color-focus-border);
   --dh-color-editor-input-option-active-border: var(--dh-color-focus-ring);
@@ -30,8 +42,9 @@
 
   /* Menus */
   --dh-color-editor-context-menu-bg: var(--dh-color-gray-300);
-  --dh-color-editor-context-menu-fg: var(--dh-color-gray-900);
+  --dh-color-editor-context-menu-fg: var(--dh-color-text);
   --dh-color-editor-menu-selection-bg: var(--dh-color-highlight-hover);
+  --dh-color-editor-menu-selection-fg: var(--dh-color-text);
 
   /* Logging */
   --dh-color-editor-log-date: var(--dh-color-gray-700);
@@ -54,9 +67,9 @@
   /* Suggest */
   --dh-color-editor-suggest-bg: var(--dh-color-gray-200);
   --dh-color-editor-suggest-border: var(--dh-color-gray-400);
-  --dh-color-editor-suggest-fg: var(--dh-color-white);
+  --dh-color-editor-suggest-fg: var(--dh-color-text);
   --dh-color-editor-suggest-selected-bg: var(--dh-color-highlight-selected);
-  --dh-color-editor-suggest-selected-fg: var(--dh-color-white);
+  --dh-color-editor-suggest-selected-fg: var(--dh-color-text);
   --dh-color-editor-suggest-highlight-fg: var(--dh-color-accent-700);
   --dh-color-editor-suggest-focus-highlight-fg: var(--dh-color-accent-700);
   --dh-color-editor-suggest-hover-bg: var(--dh-color-highlight-hover);
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css
index 0f205b14df..abe37f020e 100644
--- a/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css
@@ -1,6 +1,6 @@
 :root {
   /* Grid */
-  --dh-color-grid-bg: var(--dh-color-bg);
+  --dh-color-grid-bg: var(--dh-color-gray-75);
 
   /* Header */
   --dh-color-grid-header-bg: var(--dh-color-gray-100);
@@ -15,10 +15,11 @@
   /* Row */
   --dh-color-grid-row-0-bg: var(--dh-color-gray-300);
   --dh-color-grid-row-1-bg: var(--dh-color-gray-100);
-  --dh-color-grid-row-hover-bg: var(--dh-color-gray-400);
+  --dh-color-grid-row-hover-bg: var(--dh-color-highlight-hover);
   --dh-color-grid-row-hover-bg-selected: var(
     --dh-color-highlight-selected-hover
   );
+  --dh-color-grid-row-shadow-alpha: 0.15;
 
   /* Selection */
   --dh-color-grid-selection: var(--dh-color-highlight-selected);
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic.css b/packages/components/src/theme/theme-dark/theme-dark-semantic.css
index 9522e2373b..406e8b1232 100644
--- a/packages/components/src/theme/theme-dark/theme-dark-semantic.css
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic.css
@@ -3,12 +3,13 @@
 :root {
   /* HSL base colors */
   --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-surface-bg-hsl: var(--dh-color-gray-400-hsl);
+  --dh-color-fg-hsl: var(--dh-color-white-hsl);
+
+  --dh-color-disabled-bg-hsl: var(--dh-color-gray-200-hsl);
   --dh-color-scrollbar-hsl: var(--dh-color-fg-hsl);
 
-  --dh-color-action-hsl: var(--dh-color-gray-75-hsl);
   --dh-color-accent-hsl: var(--dh-color-blue-600-hsl);
   --dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl);
   --dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl);
@@ -25,6 +26,9 @@
   --dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl);
   --dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl);
 
+  --dh-color-border-hsl: var(--dh-color-gray-500-hsl);
+  --dh-color-border-focus-hsl: var(--dh-color-accent-800-hsl);
+
   --dh-color-info-hsl: var(--dh-color-cyan-1000-hsl);
   --dh-color-neutral-hsl: var(--dh-color-gray-500-hsl);
   --dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl);
@@ -43,7 +47,6 @@
   --dh-color-contrast-dark-hsl: var(--dh-color-gray-50-hsl);
   --dh-color-contrast-light-hsl: var(--dh-color-gray-900-hsl);
 
-  --dh-color-action-contrast-hsl: var(--dh-color-contrast-light-hsl);
   --dh-color-accent-contrast-hsl: var(--dh-color-contrast-light-hsl);
   --dh-color-info-contrast-hsl: var(--dh-color-contrast-dark-hsl);
   --dh-color-negative-contrast-hsl: var(--dh-color-contrast-light-hsl);
@@ -67,25 +70,27 @@
   --dh-color-visual-seafoam-hsl: var(--dh-color-seafoam-1100-hsl);
   --dh-color-visual-yellow-hsl: var(--dh-color-yellow-1200-hsl);
 
-  --dh-color-visual-positive-hsl: var(--dh-color-green-1100-hsl);
+  --dh-color-visual-positive-hsl: var(--dh-color-green-1200-hsl);
   --dh-color-visual-negative-hsl: var(--dh-color-red-800-hsl);
   --dh-color-visual-notice-hsl: var(--dh-color-yellow-1200-hsl);
   --dh-color-visual-info-hsl: var(--dh-color-cyan-1100-hsl);
 
   /* General */
-  --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-surface-bg: hsl(var(--dh-color-surface-bg-hsl));
+  --dh-color-fg: hsl(var(--dh-color-fg-hsl));
+  --dh-color-border: hsl(var(--dh-color-border-hsl));
   --dh-color-hover-border: var(--dh-color-gray-600);
+  --dh-color-border-focus: hsl(var(--dh-color-border-focus-hsl));
+  --dh-color-disabled-bg: hsl(var(--dh-color-disabled-bg-hsl));
 
   /* Text */
   --dh-color-heading-text: var(--dh-color-gray-900);
   --dh-color-text: var(--dh-color-gray-800);
   --dh-color-text-disabled: var(--dh-color-gray-400);
   --dh-color-text-highlight: hsla(var(--dh-color-blue-700-hsl), 0.3);
+  --dh-color-text-hover: var(--dh-color-gray-900);
 
   /* Contrast Base */
   --dh-color-contrast-dark: hsl(var(--dh-color-contrast-dark-hsl));
@@ -137,7 +142,7 @@
 
   /* Highlight */
   --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.15);
-  --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.08);
+  --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.15);
   --dh-color-highlight-invalid: hsla(var(--dh-color-visual-red-hsl), 0.15);
   --dh-color-highlight-selected: hsla(var(--dh-color-visual-blue-hsl), 0.13);
   --dh-color-highlight-selected-hover: hsla(
diff --git a/packages/components/src/theme/theme-light/index.ts b/packages/components/src/theme/theme-light/index.ts
index 5788e85bd5..024818654f 100644
--- a/packages/components/src/theme/theme-light/index.ts
+++ b/packages/components/src/theme/theme-light/index.ts
@@ -1,4 +1,11 @@
 import themeLightPalette from './theme-light-palette.css?raw';
+import themeLightSemantic from './theme-light-semantic.css?raw';
+import themeLightSemanticChart from './theme-light-semantic-chart.css?raw';
+import themeLightSemanticEditor from './theme-light-semantic-editor.css?raw';
+import themeLightSemanticGrid from './theme-light-semantic-grid.css?raw';
+import themeLightComponents from './theme-light-components.css?raw';
+
+/**
 
 /**
  * DH theme variables are imported via Vite `?raw` query which provides the
@@ -37,6 +44,13 @@ import themeLightPalette from './theme-light-palette.css?raw';
  *   --dh-color-from-light-components: #000;
  * }
  */
-export const themeLight = themeLightPalette;
+export const themeLight = [
+  themeLightPalette,
+  themeLightSemantic,
+  themeLightSemanticChart,
+  themeLightSemanticEditor,
+  themeLightSemanticGrid,
+  themeLightComponents,
+].join('\n');
 
 export default themeLight;
diff --git a/packages/components/src/theme/theme-light/theme-light-components.css b/packages/components/src/theme/theme-light/theme-light-components.css
new file mode 100644
index 0000000000..7c61bbe687
--- /dev/null
+++ b/packages/components/src/theme/theme-light/theme-light-components.css
@@ -0,0 +1,141 @@
+/* stylelint-disable custom-property-empty-line-before */
+/* stylelint-disable alpha-value-notation */
+:root {
+  --dh-color-loading-spinner-primary: var(--dh-color-accent-bg);
+  --dh-color-loading-spinner-secondary: hsla(var(--dh-color-gray-800-hsl), 0.5);
+  --dh-color-quickactions-bg: hsla(var(--dh-color-visual-gray-hsl), 0.9);
+  --dh-color-radial-reaction: hsla(var(--dh-color-visual-gray-hsl), 0.6);
+  --dh-color-colorpicker-border: hsla(var(--dh-color-visual-gray-hsl), 0.1);
+
+  /* Logo */
+  --dh-logo-img: var(--dh-logo-light-img);
+
+  /* Login */
+  --dh-color-login-form-bg: var(--dh-color-gray-200);
+  --dh-color-login-status-message: var(--dh-color-gray-600);
+  --dh-color-login-logo-bg: var(--dh-color-gray-50);
+  --dh-color-login-footer-fg: var(--dh-color-gray-700);
+
+  /* We should base this color on something from the palette, but for now just
+   * hard coding the original value */
+  --dh-color-random-area-plot-animation-fg-fill: hsla(
+    var(--dh-color-accent-hsl),
+    0.08
+  );
+  --dh-color-random-area-plot-animation-fg-stroke: hsla(
+    var(--dh-color-accent-hsl),
+    0.2
+  );
+  --dh-color-random-area-plot-animation-bg: var(--dh-color-gray-75);
+  --dh-color-random-area-plot-animation-grid: var(--dh-color-gray-300);
+
+  /* Actions */
+  --dh-color-action-bg: var(--dh-color-gray-75);
+  --dh-color-action-fg: var(--dh-color-text);
+  --dh-color-action-border: var(--dh-color-border);
+
+  --dh-color-action-down-bg: var(--dh-color-gray-300);
+
+  --dh-color-action-hover-bg: var(--dh-color-gray-50);
+  --dh-color-action-hover-fg: var(--dh-color-text-hover);
+  --dh-color-action-hover-border: var(--dh-color-hover-border);
+
+  --dh-color-action-active-bg: var(--dh-color-accent-bg);
+  --dh-color-action-active-fg: var(--dh-color-accent-contrast);
+  --dh-color-action-active-border: var(--dh-color-accent-bg);
+
+  --dh-color-action-active-hover-bg: var(--dh-color-accent-hover-bg);
+  --dh-color-action-active-hover-fg: var(--dh-color-accent-contrast);
+  --dh-color-action-active-hover-border: var(--dh-color-accent-hover-bg);
+
+  --dh-color-action-disabled-bg: transparent;
+  --dh-color-action-disabled-fg: var(--dh-color-text-disabled);
+  --dh-color-action-disabled-border: var(--dh-color-gray-300);
+
+  /* Icons */
+  --dh-color-icon-fg: var(--dh-color-gray-700);
+  --dh-color-icon-disabled-fg: var(--dh-color-gray-400);
+
+  /* Inputs */
+  --dh-color-input-bg: var(--dh-color-gray-50);
+  --dh-color-input-fg: var(--dh-color-text);
+  --dh-color-input-border: var(--dh-color-border);
+  --dh-color-input-placeholder: var(--dh-color-gray-600);
+  --dh-color-input-active-bg: var(--dh-color-input-bg);
+  --dh-color-input-disabled-bg: var(--dh-color-disabled-bg);
+  --dh-color-input-disabled-border: transparent;
+  --dh-color-input-disabled-fg: var(--dh-color-text-disabled);
+  --dh-color-input-hover-border: var(--dh-color-gray-600);
+  --dh-color-input-focus-border: var(--dh-color-border-focus);
+
+  /* Form Controls */
+  --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),
+    0.25
+  );
+
+  /* Labels */
+  --dh-color-label-text: var(--dh-color-gray-700);
+
+  /* Selectors (pickers, dropdowns, select, etc.) */
+  --dh-color-selector-fg: var(--dh-color-icon-fg);
+  --dh-color-selector-bg: var(--dh-color-gray-75);
+  --dh-color-selector-hover-bg: var(--dh-color-gray-50);
+  --dh-color-selector-hover-fg: var(--dh-color-gray-900);
+  --dh-color-selector-disabled-fg: var(--dh-color-icon-disabled-fg);
+
+  /* Item List */
+  --dh-color-item-list-bg: transparent;
+  --dh-color-item-list-active-bg: var(--dh-color-highlight-active);
+  --dh-color-item-list-hover-bg: var(--dh-color-highlight-hover);
+  --dh-color-item-list-selected-fg: var(--dh-color-text);
+  --dh-color-item-list-selected-bg: var(--dh-color-highlight-selected);
+  --dh-color-item-list-selected-hover-bg: var(
+    --dh-color-highlight-selected-hover
+  );
+  --dh-color-item-list-selected-inactive-bg: var(--dh-color-gray-200);
+  --dh-color-item-list-selected-border: hsla(var(--dh-color-accent-hsl), 0.6);
+  --dh-color-item-list-drop-target-fg: var(--dh-color-white);
+
+  --dh-color-item-list-keyboard-selected-bg: hsla(
+    var(--dh-color-accent-hsl),
+    0.5
+  );
+
+  /* 
+   * There are a couple of related variables used in Enterprise SingleClickItemList.
+   * that aren't consumed in DHC. We should see if there is a way to include these
+   * in the theming variables.
+   * --dh-color-item-list-keyboard-selected-border
+   * --dh-color-item-list-keyboard-selected-hover-bg
+   */
+
+  /* Golden Layout */
+  --dh-color-golden-layout-tab-header-bg: var(--dh-color-gray-200);
+  --dh-color-golden-layout-tab-bg: var(--dh-color-gray-100);
+  --dh-color-golden-layout-tab-selected-bg: var(--dh-color-content-bg);
+
+  /* Navigation Menu */
+  --dh-color-menu-item-fg: var(--dh-color-gray-700);
+
+  /* Hr */
+  --dh-color-hr: var(--dh-color-gray-300);
+
+  /* Dialogs */
+  --dh-color-dialog-title-fg: var(--dh-color-heading-text);
+  --dh-color-dialog-fg: var(--dh-color-text);
+
+  /* Popovers */
+  --dh-color-popover-bg: var(--dh-color-gray-50);
+
+  /* Tooltips */
+  --dh-color-tooltip-bg: var(--dh-color-gray-50);
+  --dh-color-tooltip-fg: var(--dh-color-fg);
+  --dh-color-tooltip-box-shadow: var(--dh-color-dropshadow);
+
+  /* Wells */
+  --dh-color-well-bg: hsla(var(--dh-color-visual-gray-hsl), 0.02);
+  --dh-color-well-border: hsla(var(--dh-color-visual-gray-hsl), 0.05);
+}
diff --git a/packages/components/src/theme/theme-light/theme-light-palette.css b/packages/components/src/theme/theme-light/theme-light-palette.css
index 78971c64a6..63f9a833db 100644
--- a/packages/components/src/theme/theme-light/theme-light-palette.css
+++ b/packages/components/src/theme/theme-light/theme-light-palette.css
@@ -1,53 +1,437 @@
+/* stylelint-disable custom-property-empty-line-before */
 :root {
+  /* Gray */
+  --dh-color-gray-50-hsl: 0, 0%, 100%;
+  --dh-color-gray-75-hsl: 0, 0%, 99.22%;
+  --dh-color-gray-100-hsl: 0, 0%, 97.25%;
+  --dh-color-gray-200-hsl: 0, 0%, 90.2%;
+  --dh-color-gray-300-hsl: 0, 0%, 83.53%;
+  --dh-color-gray-400-hsl: 0, 0%, 69.41%;
+  --dh-color-gray-500-hsl: 0, 0%, 56.47%;
+  --dh-color-gray-600-hsl: 0, 0%, 42.75%;
+  --dh-color-gray-700-hsl: 0, 0%, 27.45%;
+  --dh-color-gray-800-hsl: 0, 0%, 13.33%;
+  --dh-color-gray-900-hsl: 0, 0%, 0%;
+
+  --dh-color-gray-light-hsl: var(--dh-color-gray-900-hsl);
+  --dh-color-gray-mid-hsl: var(--dh-color-gray-600-hsl);
+  --dh-color-gray-dark-hsl: var(--dh-color-gray-300-hsl);
+
+  /** Black & White */
+  --dh-color-black-hsl: var(--dh-color-gray-900-hsl);
+  --dh-color-white-hsl: var(--dh-color-gray-75-hsl);
+  --dh-color-true-black-hsl: 0deg, 0%, 0%;
+  --dh-color-true-white-hsl: 0deg, 0%, 100%;
+
+  --dh-color-red-100-hsl: 10, 100%, 95.29%;
+  --dh-color-red-200-hsl: 10.24, 100%, 91.96%;
+  --dh-color-red-300-hsl: 10, 100%, 88.24%;
+  --dh-color-red-400-hsl: 9.77, 100%, 83.14%;
+  --dh-color-red-500-hsl: 9.58, 100%, 76.67%;
+  --dh-color-red-600-hsl: 8.96, 100%, 69.8%;
+  --dh-color-red-700-hsl: 7.46, 91.71%, 62.16%;
+  --dh-color-red-800-hsl: 4.66, 82.13%, 53.92%;
+  --dh-color-red-900-hsl: 1.54, 85.9%, 44.51%;
+  --dh-color-red-1000-hsl: 0, 100%, 35.29%;
+  --dh-color-red-1100-hsl: 0, 100%, 28.82%;
+  --dh-color-red-1200-hsl: 0, 100%, 22.75%;
+  --dh-color-red-1300-hsl: 0, 100%, 17.45%;
+  --dh-color-red-1400-hsl: 0, 100%, 13.14%;
+  --dh-color-orange-100-hsl: 37.65, 100%, 90%;
+  --dh-color-orange-200-hsl: 36.59, 100%, 83.92%;
+  --dh-color-orange-300-hsl: 36.11, 96.43%, 78.04%;
+  --dh-color-orange-400-hsl: 33.85, 100%, 69.41%;
+  --dh-color-orange-500-hsl: 31.5, 100%, 60.78%;
+  --dh-color-orange-600-hsl: 30.39, 92.71%, 51.57%;
+  --dh-color-orange-700-hsl: 29.21, 100%, 44.71%;
+  --dh-color-orange-800-hsl: 27.49, 100%, 39.8%;
+  --dh-color-orange-900-hsl: 25.76, 100%, 34.71%;
+  --dh-color-orange-1000-hsl: 24.56, 100%, 29.22%;
+  --dh-color-orange-1100-hsl: 23.11, 100%, 23.92%;
+  --dh-color-orange-1200-hsl: 21.65, 100%, 19.02%;
+  --dh-color-orange-1300-hsl: 20, 97.3%, 14.51%;
+  --dh-color-orange-1400-hsl: 19.62, 96.3%, 10.59%;
+  --dh-color-yellow-100-hsl: 53.94, 92.52%, 79.02%;
+  --dh-color-yellow-200-hsl: 53.93, 92.31%, 64.31%;
+  --dh-color-yellow-300-hsl: 52.38, 96.83%, 49.41%;
+  --dh-color-yellow-400-hsl: 51.21, 100%, 45.49%;
+  --dh-color-yellow-500-hsl: 49.95, 100%, 42.16%;
+  --dh-color-yellow-600-hsl: 48.67, 100%, 38.43%;
+  --dh-color-yellow-700-hsl: 47.73, 100%, 34.51%;
+  --dh-color-yellow-800-hsl: 46.45, 100%, 30.39%;
+  --dh-color-yellow-900-hsl: 46.02, 100%, 26.08%;
+  --dh-color-yellow-1000-hsl: 44.46, 100%, 21.96%;
+  --dh-color-yellow-1100-hsl: 44.18, 100%, 17.84%;
+  --dh-color-yellow-1200-hsl: 42.5, 100%, 14.12%;
+  --dh-color-yellow-1300-hsl: 41.11, 100%, 10.59%;
+  --dh-color-yellow-1400-hsl: 39, 100%, 7.84%;
+  --dh-color-chartreuse-100-hsl: 73.94, 95.95%, 70.98%;
+  --dh-color-chartreuse-200-hsl: 73.9, 88.94%, 60.98%;
+  --dh-color-chartreuse-300-hsl: 74.14, 81.28%, 53.92%;
+  --dh-color-chartreuse-400-hsl: 74.23, 81.51%, 46.67%;
+  --dh-color-chartreuse-500-hsl: 74.44, 90.34%, 40.59%;
+  --dh-color-chartreuse-600-hsl: 74.48, 96.67%, 35.29%;
+  --dh-color-chartreuse-700-hsl: 74.62, 100%, 30.59%;
+  --dh-color-chartreuse-800-hsl: 74.56, 100%, 26.67%;
+  --dh-color-chartreuse-900-hsl: 75, 100%, 22.75%;
+  --dh-color-chartreuse-1000-hsl: 75, 100%, 18.82%;
+  --dh-color-chartreuse-1100-hsl: 74.81, 100%, 15.1%;
+  --dh-color-chartreuse-1200-hsl: 75.25, 100%, 11.57%;
+  --dh-color-chartreuse-1300-hsl: 75, 100%, 8.63%;
+  --dh-color-chartreuse-1400-hsl: 73.55, 100%, 6.08%;
+  --dh-color-celery-100-hsl: 106.23, 91.04%, 86.86%;
+  --dh-color-celery-200-hsl: 108.54, 83.18%, 79.02%;
+  --dh-color-celery-300-hsl: 110.29, 75.54%, 72.75%;
+  --dh-color-celery-400-hsl: 115.93, 65.56%, 64.71%;
+  --dh-color-celery-500-hsl: 120.93, 57.33%, 55.88%;
+  --dh-color-celery-600-hsl: 126.08, 65.49%, 44.31%;
+  --dh-color-celery-700-hsl: 129.75, 91.95%, 34.12%;
+  --dh-color-celery-800-hsl: 127.45, 100%, 28.43%;
+  --dh-color-celery-900-hsl: 127.26, 100%, 24.31%;
+  --dh-color-celery-1000-hsl: 128.74, 100%, 20.2%;
+  --dh-color-celery-1100-hsl: 129.4, 100%, 16.27%;
+  --dh-color-celery-1200-hsl: 129.38, 100%, 12.55%;
+  --dh-color-celery-1300-hsl: 128.75, 100%, 9.41%;
+  --dh-color-celery-1400-hsl: 128.82, 100%, 6.67%;
+  --dh-color-green-100-hsl: 145.71, 75%, 89.02%;
+  --dh-color-green-200-hsl: 147.89, 76.34%, 81.76%;
+  --dh-color-green-300-hsl: 150.91, 72.26%, 73.14%;
+  --dh-color-green-400-hsl: 152.77, 64.32%, 63.73%;
+  --dh-color-green-500-hsl: 153.89, 56.22%, 54.31%;
+  --dh-color-green-600-hsl: 155.47, 59.31%, 45.29%;
+  --dh-color-green-700-hsl: 157.34, 77.3%, 36.27%;
+  --dh-color-green-800-hsl: 159.02, 100%, 28.04%;
+  --dh-color-green-900-hsl: 157.87, 100%, 23.92%;
+  --dh-color-green-1000-hsl: 156.83, 100%, 19.8%;
+  --dh-color-green-1100-hsl: 157.04, 100%, 15.88%;
+  --dh-color-green-1200-hsl: 155.17, 85.29%, 13.33%;
+  --dh-color-green-1300-hsl: 151.67, 64.29%, 10.98%;
+  --dh-color-green-1400-hsl: 150, 52.38%, 8.24%;
+  --dh-color-seafoam-100-hsl: 174.15, 71.93%, 88.82%;
+  --dh-color-seafoam-200-hsl: 174.08, 71.72%, 80.59%;
+  --dh-color-seafoam-300-hsl: 175.48, 67.88%, 73.14%;
+  --dh-color-seafoam-400-hsl: 175.9, 61.26%, 62.55%;
+  --dh-color-seafoam-500-hsl: 176.52, 56.1%, 51.76%;
+  --dh-color-seafoam-600-hsl: 177.47, 84.69%, 38.43%;
+  --dh-color-seafoam-700-hsl: 177.39, 100%, 31.57%;
+  --dh-color-seafoam-800-hsl: 177.86, 100%, 27.45%;
+  --dh-color-seafoam-900-hsl: 177.48, 100%, 23.33%;
+  --dh-color-seafoam-1000-hsl: 177.58, 100%, 19.41%;
+  --dh-color-seafoam-1100-hsl: 177.31, 73.63%, 17.84%;
+  --dh-color-seafoam-1200-hsl: 177.14, 53.85%, 15.29%;
+  --dh-color-seafoam-1300-hsl: 177.69, 41.94%, 12.16%;
+  --dh-color-seafoam-1400-hsl: 176.25, 34.78%, 9.02%;
+  --dh-color-cyan-100-hsl: 187.24, 100%, 88.63%;
+  --dh-color-cyan-200-hsl: 189.89, 100%, 82.16%;
+  --dh-color-cyan-300-hsl: 190, 91.94%, 75.69%;
+  --dh-color-cyan-400-hsl: 191.02, 85.96%, 66.47%;
+  --dh-color-cyan-500-hsl: 191.6, 79.74%, 55.49%;
+  --dh-color-cyan-600-hsl: 192.6, 84.75%, 46.27%;
+  --dh-color-cyan-700-hsl: 193.27, 99%, 39.41%;
+  --dh-color-cyan-800-hsl: 195.33, 100%, 35.29%;
+  --dh-color-cyan-900-hsl: 197.36, 100%, 31.18%;
+  --dh-color-cyan-1000-hsl: 199.27, 100%, 26.86%;
+  --dh-color-cyan-1100-hsl: 201.39, 100%, 22.55%;
+  --dh-color-cyan-1200-hsl: 203.23, 100%, 18.24%;
+  --dh-color-cyan-1300-hsl: 204, 100%, 13.73%;
+  --dh-color-cyan-1400-hsl: 204.71, 100%, 10%;
+  --dh-color-blue-100-hsl: 205.16, 100%, 93.92%;
+  --dh-color-blue-200-hsl: 206.04, 100%, 89.61%;
+  --dh-color-blue-300-hsl: 206.76, 100%, 85.49%;
+  --dh-color-blue-400-hsl: 207.38, 96.26%, 79.02%;
+  --dh-color-blue-500-hsl: 209.08, 92.86%, 72.55%;
+  --dh-color-blue-600-hsl: 210.19, 89.71%, 65.69%;
+  --dh-color-blue-700-hsl: 211.12, 88.63%, 58.63%;
+  --dh-color-blue-800-hsl: 212.56, 90.28%, 51.57%;
+  --dh-color-blue-900-hsl: 212.75, 98.2%, 43.53%;
+  --dh-color-blue-1000-hsl: 212.31, 100%, 35.69%;
+  --dh-color-blue-1100-hsl: 211.86, 100%, 28.43%;
+  --dh-color-blue-1200-hsl: 211.86, 100%, 22.16%;
+  --dh-color-blue-1300-hsl: 212.14, 100%, 16.47%;
+  --dh-color-blue-1400-hsl: 212, 100%, 11.76%;
+  --dh-color-indigo-100-hsl: 236.67, 100%, 96.47%;
+  --dh-color-indigo-200-hsl: 236.13, 100%, 93.92%;
+  --dh-color-indigo-300-hsl: 237.27, 100%, 91.37%;
+  --dh-color-indigo-400-hsl: 237.1, 100%, 87.84%;
+  --dh-color-indigo-500-hsl: 237.83, 100%, 83.73%;
+  --dh-color-indigo-600-hsl: 237.74, 100%, 79.22%;
+  --dh-color-indigo-700-hsl: 237.14, 95.45%, 74.12%;
+  --dh-color-indigo-800-hsl: 237.86, 86.42%, 68.24%;
+  --dh-color-indigo-900-hsl: 237.53, 73%, 60.78%;
+  --dh-color-indigo-1000-hsl: 237.39, 56.56%, 52.16%;
+  --dh-color-indigo-1100-hsl: 237.97, 54.13%, 42.75%;
+  --dh-color-indigo-1200-hsl: 238.13, 55.81%, 33.73%;
+  --dh-color-indigo-1300-hsl: 237.53, 57.48%, 24.9%;
+  --dh-color-indigo-1400-hsl: 237.69, 56.52%, 18.04%;
+  --dh-color-purple-100-hsl: 273, 100%, 96.08%;
+  --dh-color-purple-200-hsl: 270, 100%, 93.33%;
+  --dh-color-purple-300-hsl: 268.09, 100%, 90.78%;
+  --dh-color-purple-400-hsl: 268.66, 97.1%, 86.47%;
+  --dh-color-purple-500-hsl: 266.97, 95.7%, 81.76%;
+  --dh-color-purple-600-hsl: 266.55, 94.96%, 76.67%;
+  --dh-color-purple-700-hsl: 266.67, 91.84%, 71.18%;
+  --dh-color-purple-800-hsl: 266.75, 87.71%, 64.9%;
+  --dh-color-purple-900-hsl: 266.82, 77.98%, 57.25%;
+  --dh-color-purple-1000-hsl: 266.71, 69.48%, 48.82%;
+  --dh-color-purple-1100-hsl: 267.07, 81.19%, 39.61%;
+  --dh-color-purple-1200-hsl: 266.03, 85%, 31.37%;
+  --dh-color-purple-1300-hsl: 263.33, 73.77%, 23.92%;
+  --dh-color-purple-1400-hsl: 260.69, 65.91%, 17.25%;
+  --dh-color-fuchsia-100-hsl: 308.18, 100%, 95.69%;
+  --dh-color-fuchsia-200-hsl: 308.11, 100%, 92.75%;
+  --dh-color-fuchsia-300-hsl: 306.55, 96.49%, 88.82%;
+  --dh-color-fuchsia-400-hsl: 303.9, 90.59%, 83.33%;
+  --dh-color-fuchsia-500-hsl: 301.21, 83.19%, 76.67%;
+  --dh-color-fuchsia-600-hsl: 300, 77.07%, 69.22%;
+  --dh-color-fuchsia-700-hsl: 299.15, 70.85%, 60.98%;
+  --dh-color-fuchsia-800-hsl: 299.59, 60.16%, 51.76%;
+  --dh-color-fuchsia-900-hsl: 299.6, 68.66%, 42.55%;
+  --dh-color-fuchsia-1000-hsl: 299.61, 96.27%, 31.57%;
+  --dh-color-fuchsia-1100-hsl: 299.53, 100%, 25.29%;
+  --dh-color-fuchsia-1200-hsl: 300, 88.68%, 20.78%;
+  --dh-color-fuchsia-1300-hsl: 301.05, 67.06%, 16.67%;
+  --dh-color-fuchsia-1400-hsl: 301.62, 58.73%, 12.35%;
+  --dh-color-magenta-100-hsl: 340, 100%, 95.88%;
+  --dh-color-magenta-200-hsl: 339.43, 100%, 93.14%;
+  --dh-color-magenta-300-hsl: 338.49, 100%, 89.61%;
+  --dh-color-magenta-400-hsl: 338.18, 100%, 84.9%;
+  --dh-color-magenta-500-hsl: 337.36, 100%, 79.22%;
+  --dh-color-magenta-600-hsl: 336.64, 92.91%, 72.35%;
+  --dh-color-magenta-700-hsl: 335.03, 82.32%, 64.51%;
+  --dh-color-magenta-800-hsl: 334.29, 70.93%, 55.49%;
+  --dh-color-magenta-900-hsl: 334.34, 70.94%, 45.88%;
+  --dh-color-magenta-1000-hsl: 332.2, 90.11%, 35.69%;
+  --dh-color-magenta-1100-hsl: 330.85, 100%, 27.84%;
+  --dh-color-magenta-1200-hsl: 330.54, 100%, 21.96%;
+  --dh-color-magenta-1300-hsl: 331.11, 93.1%, 17.06%;
+  --dh-color-magenta-1400-hsl: 334.44, 81.82%, 12.94%;
+
   /* Grays */
-  --dh-color-gray-900: #000;
-  --dh-color-gray-800: #222;
-  --dh-color-gray-700: #464646;
-  --dh-color-gray-600: #6d6d6d;
-  --dh-color-gray-500: #909090;
-  --dh-color-gray-400: #b1b1b1;
-  --dh-color-gray-300: #d5d5d5;
-  --dh-color-gray-200: #e6e6e6;
-  --dh-color-gray-100: #f8f8f8;
-  --dh-color-gray-75: #fdfdfd;
-  --dh-color-gray-50: #fff;
-
-  /* Blues */
-  --dh-color-blue-100: #112451;
-  --dh-color-blue-200: #16306c;
-  --dh-color-blue-300: #1d3d88;
-  --dh-color-blue-400: #254ba4;
-  --dh-color-blue-500: #2f5bc0;
-  --dh-color-blue-600: #3b6bda;
-  --dh-color-blue-700: #4c7dee;
-  --dh-color-blue-800: #6390fa;
-  --dh-color-blue-900: #7ca4ff;
-  --dh-color-blue-1000: #97b7ff;
-  --dh-color-blue-1100: #afc9ff;
-  --dh-color-blue-1200: #c7d9ff;
-  --dh-color-blue-1300: #dbe6ff;
-  --dh-color-blue-1400: #ecf1ff;
+  --dh-color-gray-50: hsl(var(--dh-color-gray-50-hsl));
+  --dh-color-gray-75: hsl(var(--dh-color-gray-75-hsl));
+  --dh-color-gray-100: hsl(var(--dh-color-gray-100-hsl));
+  --dh-color-gray-200: hsl(var(--dh-color-gray-200-hsl));
+  --dh-color-gray-300: hsl(var(--dh-color-gray-300-hsl));
+  --dh-color-gray-400: hsl(var(--dh-color-gray-400-hsl));
+  --dh-color-gray-500: hsl(var(--dh-color-gray-500-hsl));
+  --dh-color-gray-600: hsl(var(--dh-color-gray-600-hsl));
+  --dh-color-gray-700: hsl(var(--dh-color-gray-700-hsl));
+  --dh-color-gray-800: hsl(var(--dh-color-gray-800-hsl));
+  --dh-color-gray-900: hsl(var(--dh-color-gray-900-hsl));
+
+  --dh-color-gray-light: hsl(var(--dh-color-gray-light-hsl));
+  --dh-color-gray-mid: hsl(var(--dh-color-gray-mid-hsl));
+  --dh-color-gray-dark: hsl(var(--dh-color-gray-dark-hsl));
+
+  /** Black & White */
+  --dh-color-black: hsl(var(--dh-color-black-hsl));
+  --dh-color-white: hsl(var(--dh-color-white-hsl));
+
+  /* Blue */
+  --dh-color-blue-100: hsl(var(--dh-color-blue-100-hsl));
+  --dh-color-blue-200: hsl(var(--dh-color-blue-200-hsl));
+  --dh-color-blue-300: hsl(var(--dh-color-blue-300-hsl));
+  --dh-color-blue-400: hsl(var(--dh-color-blue-400-hsl));
+  --dh-color-blue-500: hsl(var(--dh-color-blue-500-hsl));
+  --dh-color-blue-600: hsl(var(--dh-color-blue-600-hsl));
+  --dh-color-blue-700: hsl(var(--dh-color-blue-700-hsl));
+  --dh-color-blue-800: hsl(var(--dh-color-blue-800-hsl));
+  --dh-color-blue-900: hsl(var(--dh-color-blue-900-hsl));
+  --dh-color-blue-1000: hsl(var(--dh-color-blue-1000-hsl));
+  --dh-color-blue-1100: hsl(var(--dh-color-blue-1100-hsl));
+  --dh-color-blue-1200: hsl(var(--dh-color-blue-1200-hsl));
+  --dh-color-blue-1300: hsl(var(--dh-color-blue-1300-hsl));
+  --dh-color-blue-1400: hsl(var(--dh-color-blue-1400-hsl));
+
+  /* Red */
+  --dh-color-red-100: hsl(var(--dh-color-red-100-hsl));
+  --dh-color-red-200: hsl(var(--dh-color-red-200-hsl));
+  --dh-color-red-300: hsl(var(--dh-color-red-300-hsl));
+  --dh-color-red-400: hsl(var(--dh-color-red-400-hsl));
+  --dh-color-red-500: hsl(var(--dh-color-red-500-hsl));
+  --dh-color-red-600: hsl(var(--dh-color-red-600-hsl));
+  --dh-color-red-700: hsl(var(--dh-color-red-700-hsl));
+  --dh-color-red-800: hsl(var(--dh-color-red-800-hsl));
+  --dh-color-red-900: hsl(var(--dh-color-red-900-hsl));
+  --dh-color-red-1000: hsl(var(--dh-color-red-1000-hsl));
+  --dh-color-red-1100: hsl(var(--dh-color-red-1100-hsl));
+  --dh-color-red-1200: hsl(var(--dh-color-red-1200-hsl));
+  --dh-color-red-1300: hsl(var(--dh-color-red-1300-hsl));
+  --dh-color-red-1400: hsl(var(--dh-color-red-1400-hsl));
+
+  /* Orange */
+  --dh-color-orange-100: hsl(var(--dh-color-orange-100-hsl));
+  --dh-color-orange-200: hsl(var(--dh-color-orange-200-hsl));
+  --dh-color-orange-300: hsl(var(--dh-color-orange-300-hsl));
+  --dh-color-orange-400: hsl(var(--dh-color-orange-400-hsl));
+  --dh-color-orange-500: hsl(var(--dh-color-orange-500-hsl));
+  --dh-color-orange-600: hsl(var(--dh-color-orange-600-hsl));
+  --dh-color-orange-700: hsl(var(--dh-color-orange-700-hsl));
+  --dh-color-orange-800: hsl(var(--dh-color-orange-800-hsl));
+  --dh-color-orange-900: hsl(var(--dh-color-orange-900-hsl));
+  --dh-color-orange-1000: hsl(var(--dh-color-orange-1000-hsl));
+  --dh-color-orange-1100: hsl(var(--dh-color-orange-1100-hsl));
+  --dh-color-orange-1200: hsl(var(--dh-color-orange-1200-hsl));
+  --dh-color-orange-1300: hsl(var(--dh-color-orange-1300-hsl));
+  --dh-color-orange-1400: hsl(var(--dh-color-orange-1400-hsl));
+
+  /* Yellow */
+  --dh-color-yellow-100: hsl(var(--dh-color-yellow-100-hsl));
+  --dh-color-yellow-200: hsl(var(--dh-color-yellow-200-hsl));
+  --dh-color-yellow-300: hsl(var(--dh-color-yellow-300-hsl));
+  --dh-color-yellow-400: hsl(var(--dh-color-yellow-400-hsl));
+  --dh-color-yellow-500: hsl(var(--dh-color-yellow-500-hsl));
+  --dh-color-yellow-600: hsl(var(--dh-color-yellow-600-hsl));
+  --dh-color-yellow-700: hsl(var(--dh-color-yellow-700-hsl));
+  --dh-color-yellow-800: hsl(var(--dh-color-yellow-800-hsl));
+  --dh-color-yellow-900: hsl(var(--dh-color-yellow-900-hsl));
+  --dh-color-yellow-1000: hsl(var(--dh-color-yellow-1000-hsl));
+  --dh-color-yellow-1100: hsl(var(--dh-color-yellow-1100-hsl));
+  --dh-color-yellow-1200: hsl(var(--dh-color-yellow-1200-hsl));
+  --dh-color-yellow-1300: hsl(var(--dh-color-yellow-1300-hsl));
+  --dh-color-yellow-1400: hsl(var(--dh-color-yellow-1400-hsl));
+
+  /* Chartreuse */
+  --dh-color-chartreuse-100: hsl(var(--dh-color-chartreuse-100-hsl));
+  --dh-color-chartreuse-200: hsl(var(--dh-color-chartreuse-200-hsl));
+  --dh-color-chartreuse-300: hsl(var(--dh-color-chartreuse-300-hsl));
+  --dh-color-chartreuse-400: hsl(var(--dh-color-chartreuse-400-hsl));
+  --dh-color-chartreuse-500: hsl(var(--dh-color-chartreuse-500-hsl));
+  --dh-color-chartreuse-600: hsl(var(--dh-color-chartreuse-600-hsl));
+  --dh-color-chartreuse-700: hsl(var(--dh-color-chartreuse-700-hsl));
+  --dh-color-chartreuse-800: hsl(var(--dh-color-chartreuse-800-hsl));
+  --dh-color-chartreuse-900: hsl(var(--dh-color-chartreuse-900-hsl));
+  --dh-color-chartreuse-1000: hsl(var(--dh-color-chartreuse-1000-hsl));
+  --dh-color-chartreuse-1100: hsl(var(--dh-color-chartreuse-1100-hsl));
+  --dh-color-chartreuse-1200: hsl(var(--dh-color-chartreuse-1200-hsl));
+  --dh-color-chartreuse-1300: hsl(var(--dh-color-chartreuse-1300-hsl));
+  --dh-color-chartreuse-1400: hsl(var(--dh-color-chartreuse-1400-hsl));
+
+  /* Celery */
+  --dh-color-celery-100: hsl(var(--dh-color-celery-100-hsl));
+  --dh-color-celery-200: hsl(var(--dh-color-celery-200-hsl));
+  --dh-color-celery-300: hsl(var(--dh-color-celery-300-hsl));
+  --dh-color-celery-400: hsl(var(--dh-color-celery-400-hsl));
+  --dh-color-celery-500: hsl(var(--dh-color-celery-500-hsl));
+  --dh-color-celery-600: hsl(var(--dh-color-celery-600-hsl));
+  --dh-color-celery-700: hsl(var(--dh-color-celery-700-hsl));
+  --dh-color-celery-800: hsl(var(--dh-color-celery-800-hsl));
+  --dh-color-celery-900: hsl(var(--dh-color-celery-900-hsl));
+  --dh-color-celery-1000: hsl(var(--dh-color-celery-1000-hsl));
+  --dh-color-celery-1100: hsl(var(--dh-color-celery-1100-hsl));
+  --dh-color-celery-1200: hsl(var(--dh-color-celery-1200-hsl));
+  --dh-color-celery-1300: hsl(var(--dh-color-celery-1300-hsl));
+  --dh-color-celery-1400: hsl(var(--dh-color-celery-1400-hsl));
+
+  /* Green */
+  --dh-color-green-100: hsl(var(--dh-color-green-100-hsl));
+  --dh-color-green-200: hsl(var(--dh-color-green-200-hsl));
+  --dh-color-green-300: hsl(var(--dh-color-green-300-hsl));
+  --dh-color-green-400: hsl(var(--dh-color-green-400-hsl));
+  --dh-color-green-500: hsl(var(--dh-color-green-500-hsl));
+  --dh-color-green-600: hsl(var(--dh-color-green-600-hsl));
+  --dh-color-green-700: hsl(var(--dh-color-green-700-hsl));
+  --dh-color-green-800: hsl(var(--dh-color-green-800-hsl));
+  --dh-color-green-900: hsl(var(--dh-color-green-900-hsl));
+  --dh-color-green-1000: hsl(var(--dh-color-green-1000-hsl));
+  --dh-color-green-1100: hsl(var(--dh-color-green-1100-hsl));
+  --dh-color-green-1200: hsl(var(--dh-color-green-1200-hsl));
+  --dh-color-green-1300: hsl(var(--dh-color-green-1300-hsl));
+  --dh-color-green-1400: hsl(var(--dh-color-green-1400-hsl));
 
   /* Seafoam */
-  --dh-color-seafoam-100: #1f2925;
-  --dh-color-seafoam-200: #263630;
-  --dh-color-seafoam-300: #2f463e;
-  --dh-color-seafoam-400: #37574b;
-  --dh-color-seafoam-500: #3e6959;
-  --dh-color-seafoam-600: #447b68;
-  --dh-color-seafoam-700: #488f78;
-  --dh-color-seafoam-800: #4ca387;
-  --dh-color-seafoam-900: #4fb797;
-  --dh-color-seafoam-1000: #54cba6;
-  --dh-color-seafoam-1100: #5edeb7;
-  --dh-color-seafoam-1200: #78edc7;
-  --dh-color-seafoam-1300: #9ef8d7;
-  --dh-color-seafoam-1400: #cbfce8;
-
-  /* Semantic */
-  --dh-color-black: var(--dh-color-gray-50);
-  --dh-color-white: var(--dh-color-gray-75);
-  --dh-color-bg: var(--dh-color-white);
-  --dh-color-fg: var(--dh-color-black);
-  --dh-color-grid-bg: var(--dh-color-bg);
+  --dh-color-seafoam-100: hsl(var(--dh-color-seafoam-100-hsl));
+  --dh-color-seafoam-200: hsl(var(--dh-color-seafoam-200-hsl));
+  --dh-color-seafoam-300: hsl(var(--dh-color-seafoam-300-hsl));
+  --dh-color-seafoam-400: hsl(var(--dh-color-seafoam-400-hsl));
+  --dh-color-seafoam-500: hsl(var(--dh-color-seafoam-500-hsl));
+  --dh-color-seafoam-600: hsl(var(--dh-color-seafoam-600-hsl));
+  --dh-color-seafoam-700: hsl(var(--dh-color-seafoam-700-hsl));
+  --dh-color-seafoam-800: hsl(var(--dh-color-seafoam-800-hsl));
+  --dh-color-seafoam-900: hsl(var(--dh-color-seafoam-900-hsl));
+  --dh-color-seafoam-1000: hsl(var(--dh-color-seafoam-1000-hsl));
+  --dh-color-seafoam-1100: hsl(var(--dh-color-seafoam-1100-hsl));
+  --dh-color-seafoam-1200: hsl(var(--dh-color-seafoam-1200-hsl));
+  --dh-color-seafoam-1300: hsl(var(--dh-color-seafoam-1300-hsl));
+  --dh-color-seafoam-1400: hsl(var(--dh-color-seafoam-1400-hsl));
+
+  /* Cyan */
+  --dh-color-cyan-100: hsl(var(--dh-color-cyan-100-hsl));
+  --dh-color-cyan-200: hsl(var(--dh-color-cyan-200-hsl));
+  --dh-color-cyan-300: hsl(var(--dh-color-cyan-300-hsl));
+  --dh-color-cyan-400: hsl(var(--dh-color-cyan-400-hsl));
+  --dh-color-cyan-500: hsl(var(--dh-color-cyan-500-hsl));
+  --dh-color-cyan-600: hsl(var(--dh-color-cyan-600-hsl));
+  --dh-color-cyan-700: hsl(var(--dh-color-cyan-700-hsl));
+  --dh-color-cyan-800: hsl(var(--dh-color-cyan-800-hsl));
+  --dh-color-cyan-900: hsl(var(--dh-color-cyan-900-hsl));
+  --dh-color-cyan-1000: hsl(var(--dh-color-cyan-1000-hsl));
+  --dh-color-cyan-1100: hsl(var(--dh-color-cyan-1100-hsl));
+  --dh-color-cyan-1200: hsl(var(--dh-color-cyan-1200-hsl));
+  --dh-color-cyan-1300: hsl(var(--dh-color-cyan-1300-hsl));
+  --dh-color-cyan-1400: hsl(var(--dh-color-cyan-1400-hsl));
+
+  /* Indigo */
+  --dh-color-indigo-100: hsl(var(--dh-color-indigo-100-hsl));
+  --dh-color-indigo-200: hsl(var(--dh-color-indigo-200-hsl));
+  --dh-color-indigo-300: hsl(var(--dh-color-indigo-300-hsl));
+  --dh-color-indigo-400: hsl(var(--dh-color-indigo-400-hsl));
+  --dh-color-indigo-500: hsl(var(--dh-color-indigo-500-hsl));
+  --dh-color-indigo-600: hsl(var(--dh-color-indigo-600-hsl));
+  --dh-color-indigo-700: hsl(var(--dh-color-indigo-700-hsl));
+  --dh-color-indigo-800: hsl(var(--dh-color-indigo-800-hsl));
+  --dh-color-indigo-900: hsl(var(--dh-color-indigo-900-hsl));
+  --dh-color-indigo-1000: hsl(var(--dh-color-indigo-1000-hsl));
+  --dh-color-indigo-1100: hsl(var(--dh-color-indigo-1100-hsl));
+  --dh-color-indigo-1200: hsl(var(--dh-color-indigo-1200-hsl));
+  --dh-color-indigo-1300: hsl(var(--dh-color-indigo-1300-hsl));
+  --dh-color-indigo-1400: hsl(var(--dh-color-indigo-1400-hsl));
+
+  /* Purple */
+  --dh-color-purple-100: hsl(var(--dh-color-purple-100-hsl));
+  --dh-color-purple-200: hsl(var(--dh-color-purple-200-hsl));
+  --dh-color-purple-300: hsl(var(--dh-color-purple-300-hsl));
+  --dh-color-purple-400: hsl(var(--dh-color-purple-400-hsl));
+  --dh-color-purple-500: hsl(var(--dh-color-purple-500-hsl));
+  --dh-color-purple-600: hsl(var(--dh-color-purple-600-hsl));
+  --dh-color-purple-700: hsl(var(--dh-color-purple-700-hsl));
+  --dh-color-purple-800: hsl(var(--dh-color-purple-800-hsl));
+  --dh-color-purple-900: hsl(var(--dh-color-purple-900-hsl));
+  --dh-color-purple-1000: hsl(var(--dh-color-purple-1000-hsl));
+  --dh-color-purple-1100: hsl(var(--dh-color-purple-1100-hsl));
+  --dh-color-purple-1200: hsl(var(--dh-color-purple-1200-hsl));
+  --dh-color-purple-1300: hsl(var(--dh-color-purple-1300-hsl));
+  --dh-color-purple-1400: hsl(var(--dh-color-purple-1400-hsl));
+
+  /* Fuchsia */
+  --dh-color-fuchsia-100: hsl(var(--dh-color-fuchsia-100-hsl));
+  --dh-color-fuchsia-200: hsl(var(--dh-color-fuchsia-200-hsl));
+  --dh-color-fuchsia-300: hsl(var(--dh-color-fuchsia-300-hsl));
+  --dh-color-fuchsia-400: hsl(var(--dh-color-fuchsia-400-hsl));
+  --dh-color-fuchsia-500: hsl(var(--dh-color-fuchsia-500-hsl));
+  --dh-color-fuchsia-600: hsl(var(--dh-color-fuchsia-600-hsl));
+  --dh-color-fuchsia-700: hsl(var(--dh-color-fuchsia-700-hsl));
+  --dh-color-fuchsia-800: hsl(var(--dh-color-fuchsia-800-hsl));
+  --dh-color-fuchsia-900: hsl(var(--dh-color-fuchsia-900-hsl));
+  --dh-color-fuchsia-1000: hsl(var(--dh-color-fuchsia-1000-hsl));
+  --dh-color-fuchsia-1100: hsl(var(--dh-color-fuchsia-1100-hsl));
+  --dh-color-fuchsia-1200: hsl(var(--dh-color-fuchsia-1200-hsl));
+  --dh-color-fuchsia-1300: hsl(var(--dh-color-fuchsia-1300-hsl));
+  --dh-color-fuchsia-1400: hsl(var(--dh-color-fuchsia-1400-hsl));
+
+  /* Magenta */
+  --dh-color-magenta-100: hsl(var(--dh-color-magenta-100-hsl));
+  --dh-color-magenta-200: hsl(var(--dh-color-magenta-200-hsl));
+  --dh-color-magenta-300: hsl(var(--dh-color-magenta-300-hsl));
+  --dh-color-magenta-400: hsl(var(--dh-color-magenta-400-hsl));
+  --dh-color-magenta-500: hsl(var(--dh-color-magenta-500-hsl));
+  --dh-color-magenta-600: hsl(var(--dh-color-magenta-600-hsl));
+  --dh-color-magenta-700: hsl(var(--dh-color-magenta-700-hsl));
+  --dh-color-magenta-800: hsl(var(--dh-color-magenta-800-hsl));
+  --dh-color-magenta-900: hsl(var(--dh-color-magenta-900-hsl));
+  --dh-color-magenta-1000: hsl(var(--dh-color-magenta-1000-hsl));
+  --dh-color-magenta-1100: hsl(var(--dh-color-magenta-1100-hsl));
+  --dh-color-magenta-1200: hsl(var(--dh-color-magenta-1200-hsl));
+  --dh-color-magenta-1300: hsl(var(--dh-color-magenta-1300-hsl));
+  --dh-color-magenta-1400: hsl(var(--dh-color-magenta-1400-hsl));
 }
diff --git a/packages/components/src/theme/theme-light/theme-light-semantic-chart.css b/packages/components/src/theme/theme-light/theme-light-semantic-chart.css
new file mode 100644
index 0000000000..2ef1d4ed65
--- /dev/null
+++ b/packages/components/src/theme/theme-light/theme-light-semantic-chart.css
@@ -0,0 +1,47 @@
+/* stylelint-disable alpha-value-notation */
+/* stylelint-disable custom-property-empty-line-before */
+:root {
+  --dh-color-chart-bg: var(--dh-color-content-bg);
+  --dh-color-chart-plot-bg: var(--dh-color-gray-200);
+  --dh-color-chart-title: var(--dh-color-white);
+
+  /* Colorway */
+  --dh-color-chart-colorway: var(--dh-color-visual-cyan)
+    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-seafoam)
+    var(--dh-color-visual-magenta) var(--dh-color-white);
+  --dh-color-chart-grid: var(--dh-color-gray-400);
+  --dh-color-chart-axis-line: var(--dh-color-gray-500);
+  --dh-color-chart-axis-line-zero: var(--dh-color-gray-700);
+  --dh-color-chart-active: var(--dh-color-accent-600);
+
+  --dh-color-chart-range-bg: hsla(var(--dh-color-gray-500-hsl) 0.7);
+  --dh-color-chart-area: var(--dh-color-visual-blue);
+  --dh-color-chart-trend: var(--dh-color-green-1200);
+
+  /* Error band */
+  --dh-color-chart-error-band-line: var(--dh-color-green-1400);
+  --dh-color-chart-error-band-fill: hsla(var(--dh-color-green-1200-hsl), 0.1);
+
+  /* OHLC */
+  --dh-color-chart-ohlc-increase: var(--dh-color-visual-green);
+  --dh-color-chart-ohlc-decrease: var(--dh-color-visual-red);
+
+  /* 
+   * This color shows up in the styleguide, but it doesn't seem to be consumed
+   * in production code. There has been discussion about it not being needed 
+   * anymore. 
+   */
+  --dh-color-chart-line-deprecated: var(--dh-color-visual-green);
+
+  --dh-color-plotly-axis-text: var(--dh-color-gray-500);
+  --dh-color-plotly-zoombox: hsla(var(--dh-color-true-black-hsl), 0.5);
+  --dh-color-plotly-zoombox-corners-fill: var(--dh-color-white);
+  --dh-color-plotly-zoombox-corners-stroke: var(--dh-color-gray-75);
+
+  --dh-color-plotly-modebar-btn-active: var(--dh-color-true-white-hsl, 0.7);
+  --dh-color-plotly-modebar-btn-warning: var(--dh-color-visual-orange);
+  --dh-color-plotly-notifier-note-bg: var(--dh-color-gray-500);
+}
diff --git a/packages/components/src/theme/theme-light/theme-light-semantic-editor.css b/packages/components/src/theme/theme-light/theme-light-semantic-editor.css
new file mode 100644
index 0000000000..116c2d8725
--- /dev/null
+++ b/packages/components/src/theme/theme-light/theme-light-semantic-editor.css
@@ -0,0 +1,80 @@
+:root {
+  /* Editor */
+  --dh-color-editor-bg: var(--dh-color-content-bg);
+  --dh-color-editor-fg: var(--dh-color-gray-900);
+  --dh-color-editor-error-fg: var(--dh-color-visual-red);
+  --dh-color-editor-line-number-fg: var(--dh-color-gray-700);
+  --dh-color-editor-line-highlight-bg: var(--dh-color-gray-100);
+  --dh-color-editor-selection-bg: var(--dh-color-text-highlight);
+  --dh-color-editor-inactive-selection-bg: var(--dh-color-gray-200);
+  --dh-color-editor-selection-highlight-bg: var(--dh-color-gray-200);
+  --dh-color-editor-word-highlight-bg: var(--dh-color-gray-200);
+
+  /* Code rules */
+  --dh-color-editor-comment: var(--dh-color-green-800);
+  --dh-color-editor-delimiter: var(--dh-color-gray-700);
+  --dh-color-editor-identifier-js: var(--dh-color-visual-yellow);
+  --dh-color-editor-identifier-namespace: var(--dh-color-visual-red);
+  --dh-color-editor-identifier: var(--dh-color-gray-900);
+  --dh-color-editor-keyword: var(--dh-color-visual-blue);
+  --dh-color-editor-number: var(--dh-color-visual-purple);
+  --dh-color-editor-operator: var(--dh-color-visual-red);
+  --dh-color-editor-predefined: var(--dh-color-visual-green);
+  --dh-color-editor-storage: var(--dh-color-visual-red);
+  --dh-color-editor-string-delim: var(--dh-color-gray-700);
+  --dh-color-editor-string: var(--dh-color-red-1200);
+
+  /* Brackets */
+  --dh-color-editor-bracket-fg1: var(--dh-color-visual-blue);
+  --dh-color-editor-bracket-fg2: var(--dh-color-visual-green);
+  --dh-color-editor-bracket-fg3: var(--dh-color-visual-purple);
+  --dh-color-editor-bracket-fg4: var(--dh-color-visual-blue);
+  --dh-color-editor-bracket-fg5: var(--dh-color-visual-green);
+  --dh-color-editor-bracket-fg6: var(--dh-color-visual-purple);
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-visual-negative);
+
+  /* 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-input-bg);
+  --dh-color-editor-input-fg: var(--dh-color-text);
+  --dh-color-editor-input-border: var(--dh-color-border);
+
+  /* Menus */
+  --dh-color-editor-context-menu-bg: var(--dh-color-gray-50);
+  --dh-color-editor-context-menu-fg: var(--dh-color-text);
+  --dh-color-editor-menu-selection-bg: var(--dh-color-highlight-hover);
+  --dh-color-editor-menu-selection-fg: var(--dh-color-text);
+
+  /* Logging */
+  --dh-color-editor-log-date: var(--dh-color-gray-700);
+  --dh-color-editor-log-error: var(--dh-color-visual-red);
+  --dh-color-editor-log-info: var(--dh-color-visual-cyan);
+  --dh-color-editor-log-stdout: var(--dh-color-gray-900);
+  --dh-color-editor-log-warn: var(--dh-color-visual-yellow);
+  --dh-color-editor-log-debug: var(--dh-color-visual-purple);
+  --dh-color-editor-log-trace: var(--dh-color-visual-green);
+
+  /* Find */
+  --dh-color-editor-find-bg: var(--dh-color-gray-50);
+  --dh-color-editor-find-match-bg: var(--dh-color-highlight-selected);
+  --dh-color-editor-find-match-highlight-bg: var(
+    --dh-color-highlight-selected-hover
+  );
+  --dh-color-editor-find-option-active-bg: var(--dh-color-accent-700);
+  --dh-color-editor-find-option-active-fg: var(--dh-color-gray-900);
+
+  /* Suggest */
+  --dh-color-editor-suggest-bg: var(--dh-color-gray-100);
+  --dh-color-editor-suggest-border: var(--dh-color-gray-400);
+  --dh-color-editor-suggest-fg: var(--dh-color-text);
+  --dh-color-editor-suggest-selected-bg: var(--dh-color-highlight-selected);
+  --dh-color-editor-suggest-selected-fg: var(--dh-color-text);
+  --dh-color-editor-suggest-highlight-fg: var(--dh-color-accent-700);
+  --dh-color-editor-suggest-focus-highlight-fg: var(--dh-color-accent-700);
+  --dh-color-editor-suggest-hover-bg: var(--dh-color-highlight-hover);
+
+  /* Links */
+  --dh-color-editor-link-foreground: var(--dh-color-accent-1000);
+  --dh-color-editor-link-active-fg: var(--dh-color-accent-1100);
+}
diff --git a/packages/components/src/theme/theme-light/theme-light-semantic-grid.css b/packages/components/src/theme/theme-light/theme-light-semantic-grid.css
new file mode 100644
index 0000000000..609909420c
--- /dev/null
+++ b/packages/components/src/theme/theme-light/theme-light-semantic-grid.css
@@ -0,0 +1,104 @@
+:root {
+  /* Grid */
+  --dh-color-grid-bg: var(--dh-color-content-bg);
+
+  /* Header */
+  --dh-color-grid-header-bg: var(--dh-color-gray-100);
+  --dh-color-grid-header-text: var(--dh-color-heading-text);
+  --dh-color-grid-header-separator: var(--dh-color-gray-50);
+  --dh-color-grid-header-separator-hover: var(--dh-color-gray-600);
+  --dh-color-grid-header-separator-hidden-hover: var(--dh-color-accent-700);
+  --dh-color-grid-header-sort-bar: var(--dh-color-visual-purple);
+  --dh-color-grid-header-reverse-bar: var(--dh-color-visual-green);
+  --dh-color-grid-header-bar-casing: var(--dh-color-gray-50);
+
+  /* Row */
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-50);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-hover-bg: var(--dh-color-highlight-hover);
+  --dh-color-grid-row-hover-bg-selected: var(
+    --dh-color-highlight-selected-hover
+  );
+  --dh-color-grid-row-shadow-alpha: 0.07;
+
+  /* Selection */
+  --dh-color-grid-selection: var(--dh-color-highlight-selected);
+  --dh-color-grid-selection-outline: var(--dh-color-accent-900);
+  --dh-color-grid-selection-outline-casing: var(--dh-color-gray-50);
+
+  /** Sroll Bar */
+  --dh-color-grid-scroll-bar-active-selection-tick: var(--dh-color-accent-400);
+  --dh-color-grid-scroll-bar-bg: var(--dh-color-gray-100);
+  --dh-color-grid-scroll-bar-hover-bg: var(--dh-color-gray-200);
+  --dh-color-grid-scroll-bar-casing: var(--dh-color-gray-400);
+  --dh-color-grid-scroll-bar-corner: var(--dh-color-gray-100);
+  --dh-color-grid-scroll-bar: var(--dh-color-gray-500);
+  --dh-color-grid-scroll-bar-hover: var(--dh-color-gray-600);
+  --dh-color-grid-scroll-bar-active: var(--dh-color-gray-700);
+
+  /* Text */
+  --dh-color-grid-text: var(--dh-color-text);
+  --dh-color-grid-text-hyperlink: var(--dh-color-accent-1000);
+  --dh-color-grid-text-pending: var(--dh-color-modified);
+  --dh-color-grid-text-error: var(--dh-color-visual-negative);
+
+  /* Data Types */
+  --dh-color-grid-date: var(--dh-color-visual-purple);
+  --dh-color-grid-number-positive: var(--dh-color-visual-positive);
+  --dh-color-grid-number-negative: var(--dh-color-visual-negative);
+  --dh-color-grid-number-zero: var(--dh-color-visual-purple);
+  --dh-color-grid-string-null: var(--dh-color-gray-600);
+
+  /* Filter Bar */
+  --dh-color-grid-filter-bar-active-bg: hsla(
+    var(--dh-color-accent-700-hsl),
+    0.5
+  );
+  --dh-color-grid-filter-bar-active: var(--dh-color-accent-100);
+  --dh-color-grid-filter-bar-expanded-bg: var(--dh-color-gray-50);
+  --dh-color-grid-filter-bar-expanded-active-bg: hsla(
+    var(--dh-color-accent-1000-hsl),
+    0.19
+  );
+  --dh-color-grid-filter-bar-expanded-active-cell-bg: hsla(
+    var(--dh-color-accent-700-hsl),
+    0.32
+  );
+  --dh-color-grid-filter-bar-separator: var(--dh-color-gray-600);
+  --dh-color-grid-filter-bar-error: var(--dh-color-visual-negative);
+  --dh-color-grid-filter-icon: var(--dh-color-accent-600);
+
+  /* Context Menu */
+  --dh-color-grid-context-menu-sort-icon: var(--dh-color-visual-purple);
+  --dh-color-grid-context-menu-reverse-icon: var(--dh-color-visual-green);
+
+  /* Column */
+  --dh-color-grid-column-linker-hover-bg: var(
+    --dh-color-highlight-selected-hover
+  );
+  --dh-color-grid-column-grouped-divider: var(--dh-color-gray-50);
+
+  /* Tree */
+  --dh-color-grid-tree-line: var(--dh-color-gray-500);
+  --dh-color-grid-tree-marker: var(--dh-color-gray-700);
+  --dh-color-grid-tree-marker-hover: var(--dh-color-gray-900);
+
+  /* Floating */
+  --dh-color-grid-floating-row: var(--dh-color-gray-300);
+  --dh-color-grid-floating-row-bg: var(--dh-color-gray-200);
+  --dh-color-grid-floating-divider-inner: var(--dh-color-gray-200);
+  --dh-color-grid-floating-divider-outer: var(--dh-color-gray-50);
+
+  /* Overflow Button */
+  --dh-color-grid-overflow-button: var(--dh-color-gray-700);
+  --dh-color-grid-overflow-button-hover: var(--dh-color-gray-900);
+
+  /* Data Bars */
+  --dh-color-grid-data-bar-positive: var(--dh-color-visual-positive);
+  --dh-color-grid-data-bar-negative: var(--dh-color-visual-negative);
+  --dh-color-grid-data-bar-marker: var(--dh-color-white);
+  --dh-color-grid-data-bar-zero-line: var(--dh-color-gray-300);
+
+  /* Scrim */
+  --dh-color-grid-scrim: var(--dh-color-gray-200);
+}
diff --git a/packages/components/src/theme/theme-light/theme-light-semantic.css b/packages/components/src/theme/theme-light/theme-light-semantic.css
new file mode 100644
index 0000000000..8fed65fde9
--- /dev/null
+++ b/packages/components/src/theme/theme-light/theme-light-semantic.css
@@ -0,0 +1,224 @@
+/* stylelint-disable custom-property-empty-line-before */
+/* stylelint-disable alpha-value-notation */
+:root {
+  /* HSL base colors */
+  --dh-color-bg-hsl: var(--dh-color-gray-300-hsl);
+  --dh-color-content-bg-hsl: var(--dh-color-gray-50-hsl);
+  --dh-color-surface-bg-hsl: var(--dh-color-gray-200-hsl);
+  --dh-color-fg-hsl: var(--dh-color-black-hsl);
+
+  --dh-color-disabled-bg-hsl: var(--dh-color-gray-200-hsl);
+  --dh-color-scrollbar-hsl: var(--dh-color-fg-hsl);
+
+  --dh-color-accent-hsl: var(--dh-color-blue-900-hsl);
+  --dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl);
+  --dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl);
+  --dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl);
+  --dh-color-accent-400-hsl: var(--dh-color-blue-400-hsl);
+  --dh-color-accent-500-hsl: var(--dh-color-blue-500-hsl);
+  --dh-color-accent-600-hsl: var(--dh-color-blue-600-hsl);
+  --dh-color-accent-700-hsl: var(--dh-color-blue-700-hsl);
+  --dh-color-accent-800-hsl: var(--dh-color-blue-800-hsl);
+  --dh-color-accent-900-hsl: var(--dh-color-blue-900-hsl);
+  --dh-color-accent-1000-hsl: var(--dh-color-blue-1000-hsl);
+  --dh-color-accent-1100-hsl: var(--dh-color-blue-1100-hsl);
+  --dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl);
+  --dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl);
+  --dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl);
+
+  --dh-color-border-hsl: var(--dh-color-gray-700-hsl);
+  --dh-color-border-focus-hsl: var(--dh-color-accent-800-hsl);
+
+  --dh-color-info-hsl: var(--dh-color-cyan-1000-hsl);
+  --dh-color-neutral-hsl: var(--dh-color-gray-500-hsl);
+  --dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl);
+  --dh-color-positive-hsl: var(--dh-color-green-900-hsl);
+  --dh-color-negative-hsl: var(--dh-color-red-800-hsl);
+
+  /*
+   * Contrast Colors
+   *
+   * Note that React Spectrum guidance suggests that background colors containing
+   * yellow, orange, chartreuse or cyan should use a dark contrast color. All
+   * others should use light. Therefore, these should stay in sync with the 
+   * --dh-color-xxx-hsl values above.
+   * https://spectrum.adobe.com/page/using-color/#Solid-color-background-with-black-or-white
+   */
+  --dh-color-contrast-dark-hsl: var(--dh-color-gray-50-hsl);
+  --dh-color-contrast-light-hsl: var(--dh-color-gray-900-hsl);
+
+  --dh-color-accent-contrast-hsl: var(--dh-color-contrast-dark-hsl);
+  --dh-color-info-contrast-hsl: var(--dh-color-contrast-dark-hsl);
+  --dh-color-negative-contrast-hsl: var(--dh-color-contrast-dark-hsl);
+  --dh-color-neutral-contrast-hsl: var(--dh-color-contrast-light-hsl);
+  --dh-color-notice-contrast-hsl: var(--dh-color-contrast-dark-hsl);
+  --dh-color-positive-contrast-hsl: var(--dh-color-contrast-dark-hsl);
+
+  /* Visual HSL */
+  --dh-color-visual-blue-hsl: var(--dh-color-blue-900-hsl);
+  --dh-color-visual-celery-hsl: var(--dh-color-celery-1000-hsl);
+  --dh-color-visual-chartreuse-hsl: var(--dh-color-chartreuse-1100-hsl);
+  --dh-color-visual-cyan-hsl: var(--dh-color-cyan-1100-hsl);
+  --dh-color-visual-fuchsia-hsl: var(--dh-color-fuchsia-900-hsl);
+  --dh-color-visual-gray-hsl: var(--dh-color-gray-600-hsl);
+  --dh-color-visual-green-hsl: var(--dh-color-green-900-hsl);
+  --dh-color-visual-indigo-hsl: var(--dh-color-indigo-900-hsl);
+  --dh-color-visual-magenta-hsl: var(--dh-color-magenta-900-hsl);
+  --dh-color-visual-orange-hsl: var(--dh-color-orange-800-hsl);
+  --dh-color-visual-purple-hsl: var(--dh-color-purple-800-hsl);
+  --dh-color-visual-red-hsl: var(--dh-color-red-800-hsl);
+  --dh-color-visual-seafoam-hsl: var(--dh-color-seafoam-1100-hsl);
+  --dh-color-visual-yellow-hsl: var(--dh-color-yellow-700-hsl);
+
+  --dh-color-visual-positive-hsl: var(--dh-color-green-800-hsl);
+  --dh-color-visual-negative-hsl: var(--dh-color-red-800-hsl);
+  --dh-color-visual-notice-hsl: var(--dh-color-yellow-700-hsl);
+  --dh-color-visual-info-hsl: var(--dh-color-cyan-1100-hsl);
+
+  /* General */
+  --dh-color-bg: hsl(var(--dh-color-bg-hsl));
+  --dh-color-content-bg: hsl(var(--dh-color-content-bg-hsl));
+  --dh-color-surface-bg: hsl(var(--dh-color-surface-bg-hsl));
+  --dh-color-fg: hsl(var(--dh-color-fg-hsl));
+  --dh-color-border: hsl(var(--dh-color-border-hsl));
+  --dh-color-hover-border: var(--dh-color-gray-900);
+  --dh-color-border-focus: hsl(var(--dh-color-border-focus-hsl));
+  --dh-color-disabled-bg: hsl(var(--dh-color-disabled-bg-hsl));
+
+  /* Text */
+  --dh-color-heading-text: var(--dh-color-gray-900);
+  --dh-color-text: var(--dh-color-gray-800);
+  --dh-color-text-disabled: var(--dh-color-gray-400);
+  --dh-color-text-highlight: hsla(var(--dh-color-blue-700-hsl), 0.15);
+  --dh-color-text-hover: var(--dh-color-gray-900);
+
+  /* Contrast Base */
+  --dh-color-contrast-dark: hsl(var(--dh-color-contrast-dark-hsl));
+  --dh-color-contrast-light: hsl(var(--dh-color-contrast-light-hsl));
+
+  /** Accent Colors */
+  --dh-color-accent-100: hsl(var(--dh-color-accent-100-hsl));
+  --dh-color-accent-200: hsl(var(--dh-color-accent-200-hsl));
+  --dh-color-accent-300: hsl(var(--dh-color-accent-300-hsl));
+  --dh-color-accent-400: hsl(var(--dh-color-accent-400-hsl));
+  --dh-color-accent-500: hsl(var(--dh-color-accent-500-hsl));
+  --dh-color-accent-600: hsl(var(--dh-color-accent-600-hsl));
+  --dh-color-accent-700: hsl(var(--dh-color-accent-700-hsl));
+  --dh-color-accent-800: hsl(var(--dh-color-accent-800-hsl));
+  --dh-color-accent-900: hsl(var(--dh-color-accent-900-hsl));
+  --dh-color-accent-1000: hsl(var(--dh-color-accent-1000-hsl));
+  --dh-color-accent-1100: hsl(var(--dh-color-accent-1100-hsl));
+  --dh-color-accent-1200: hsl(var(--dh-color-accent-1200-hsl));
+  --dh-color-accent-1300: hsl(var(--dh-color-accent-1300-hsl));
+  --dh-color-accent-1400: hsl(var(--dh-color-accent-1400-hsl));
+
+  /* Accent */
+  --dh-color-accent-bg: hsl(var(--dh-color-accent-hsl));
+  --dh-color-accent-hover-bg: var(--dh-color-accent-1000);
+  --dh-color-accent-down-bg: var(--dh-color-accent-1100);
+  --dh-color-accent-key-focus-bg: var(--dh-color-accent-1000);
+  --dh-color-accent-contrast: hsl(var(--dh-color-accent-contrast-hsl));
+
+  /* Background Defaults */
+  --dh-color-gray-bg: var(--dh-color-gray-700);
+  --dh-color-blue-bg: var(--dh-color-blue-700);
+  --dh-color-red-bg: var(--dh-color-red-700);
+  --dh-color-orange-bg: var(--dh-color-orange-800);
+  --dh-color-yellow-bg: var(--dh-color-yellow-1000);
+  --dh-color-chartreuse-bg: var(--dh-color-chartreuse-900);
+  --dh-color-celery-bg: var(--dh-color-celery-800);
+  --dh-color-green-bg: var(--dh-color-green-700);
+  --dh-color-seafoam-bg: var(--dh-color-seafoam-700);
+  --dh-color-cyan-bg: var(--dh-color-cyan-700);
+  --dh-color-indigo-bg: var(--dh-color-indigo-700);
+  --dh-color-purple-bg: var(--dh-color-purple-700);
+  --dh-color-fuchsia-bg: var(--dh-color-fuchsia-700);
+  --dh-color-magenta-bg: var(--dh-color-magenta-700);
+
+  /* Focus */
+  --dh-color-focus: var(--dh-color-blue-800);
+  --dh-color-focus-border: var(--dh-color-blue-800);
+  --dh-color-focus-ring: var(--dh-color-focus);
+
+  /* Highlight */
+  --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.15);
+  --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.08);
+  --dh-color-highlight-invalid: hsla(var(--dh-color-visual-red-hsl), 0.15);
+  --dh-color-highlight-selected: hsla(var(--dh-color-visual-blue-hsl), 0.07);
+  --dh-color-highlight-selected-hover: hsla(
+    var(--dh-color-visual-blue-hsl),
+    0.13
+  );
+
+  /* Keyboard selected */
+  --dh-color-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);
+
+  /* Shadows / Overlays */
+  --dh-color-dropshadow: hsla(var(--dh-color-true-black-hsl), 0.25);
+  --dh-color-overlay-modal-bg: hsla(var(--dh-color-visual-gray-hsl), 0.6);
+  --dh-color-overlay-hover-bg: hsla(var(--dh-color-visual-gray-hsl), 0.08);
+
+  /* Negative */
+  --dh-color-negative-bg: hsl(var(--dh-color-negative-hsl));
+  --dh-color-negative-hover-bg: var(--dh-color-red-900);
+  --dh-color-negative-down-bg: var(--dh-color-red-1000);
+  --dh-color-negative-key-focus-bg: var(--dh-color-red-900);
+  --dh-color-negative-contrast: hsl(var(--dh-color-negative-contrast-hsl));
+
+  /* Neutral */
+  --dh-color-neutral-bg: hsl(var(--dh-color-neutral-hsl));
+  --dh-color-neutral-hover-bg: var(--dh-color-gray-400);
+  --dh-color-neutral-down-bg: var(--dh-color-gray-300);
+  --dh-color-neutral-key-focus-bg: var(--dh-color-gray-400);
+  --dh-color-neutral-contrast: hsl(var(--dh-color-neutral-contrast-hsl));
+
+  --dh-color-neutral-subdued-bg: var(--dh-color-gray-400);
+  --dh-color-neutral-subdued-hover-bg: var(--dh-color-gray-300);
+  --dh-color-neutral-subdued-down-bg: var(--dh-color-gray-200);
+  --dh-color-neutral-subdued-key-focus-bg: var(--dh-color-gray-300);
+
+  /* Positive */
+  --dh-color-positive-bg: hsl(var(--dh-color-positive-hsl));
+  --dh-color-positive-hover-bg: var(--dh-color-green-800);
+  --dh-color-positive-down-bg: var(--dh-color-green-700);
+  --dh-color-positive-key-focus-bg: var(--dh-color-green-800);
+  --dh-color-positive-contrast: hsl(var(--dh-color-positive-contrast-hsl));
+
+  /* Informative */
+  --dh-color-info-bg: hsl(var(--dh-color-info-hsl));
+  --dh-color-info-hover-bg: var(--dh-color-cyan-900);
+  --dh-color-info-down-bg: var(--dh-color-cyan-800);
+  --dh-color-info-key-focus-bg: var(--dh-color-cyan-900);
+  --dh-color-info-contrast: hsl(var(--dh-color-info-contrast-hsl));
+
+  /* Notice */
+  --dh-color-notice-bg: hsl(var(--dh-color-notice-hsl));
+  --dh-color-notice-hover-bg: var(--dh-color-yellow-900);
+  --dh-color-notice-down-bg: var(--dh-color-yellow-800);
+  --dh-color-notice-key-focus-bg: var(--dh-color-yellow-1000);
+  --dh-color-notice-contrast: hsl(var(--dh-color-notice-contrast-hsl));
+
+  /* Visual Colors */
+  --dh-color-visual-blue: hsl(var(--dh-color-visual-blue-hsl));
+  --dh-color-visual-celery: hsl(var(--dh-color-visual-celery-hsl));
+  --dh-color-visual-chartreuse: hsl(var(--dh-color-visual-chartreuse-hsl));
+  --dh-color-visual-cyan: hsl(var(--dh-color-visual-cyan-hsl));
+  --dh-color-visual-fuchsia: hsl(var(--dh-color-visual-fuchsia-hsl));
+  --dh-color-visual-gray: hsl(var(--dh-color-visual-gray-hsl));
+  --dh-color-visual-green: hsl(var(--dh-color-visual-green-hsl));
+  --dh-color-visual-indigo: hsl(var(--dh-color-visual-indigo-hsl));
+  --dh-color-visual-magenta: hsl(var(--dh-color-visual-magenta-hsl));
+  --dh-color-visual-orange: hsl(var(--dh-color-visual-orange-hsl));
+  --dh-color-visual-purple: hsl(var(--dh-color-visual-purple-hsl));
+  --dh-color-visual-red: hsl(var(--dh-color-visual-red-hsl));
+  --dh-color-visual-seafoam: hsl(var(--dh-color-visual-seafoam-hsl));
+  --dh-color-visual-yellow: hsl(var(--dh-color-visual-yellow-hsl));
+
+  --dh-color-visual-positive: hsl(var(--dh-color-visual-positive-hsl));
+  --dh-color-visual-negative: hsl(var(--dh-color-visual-negative-hsl));
+  --dh-color-visual-notice: hsl(var(--dh-color-visual-notice-hsl));
+  --dh-color-visual-info: hsl(var(--dh-color-visual-info-hsl));
+
+  /* Editing */
+  --dh-color-modified: var(--dh-color-orange-800);
+}
diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css
index bd3d783b31..52370d6078 100644
--- a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css
+++ b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css
@@ -1,8 +1,36 @@
 /* stylelint-disable custom-property-empty-line-before */
 /* stylelint-disable alpha-value-notation */
 .dh-spectrum-alias {
-  --spectrum-body-text-color: var(--dh-color-text);
+  /*********** Override variables in spectrum-global.css **********************/
   --spectrum-alias-background-color-default: var(--dh-color-bg);
+  --spectrum-alias-background-color-disabled: var(--dh-color-disabled-bg);
+
+  --spectrum-alias-label-text-color: var(--dh-color-label-text);
+  --spectrum-alias-text-color: var(--dh-color-text);
+  --spectrum-alias-text-color-hover: var(--dh-color-text-hover);
+  --spectrum-alias-text-color-disabled: var(--dh-color-text-disabled);
+  --spectrum-alias-border-color: var(--dh-color-border);
+  --spectrum-alias-border-color-focus: var(--dh-color-border-focus);
+  --spectrum-alias-input-border-color-key-focus: var(
+    --spectrum-alias-border-color-focus
+  );
+  --spectrum-alias-focus-color: var(--dh-color-focus);
+  --spectrum-alias-focus-ring-color: var(--dh-color-focus-ring);
+  --spectrum-alias-icon-color: var(--dh-color-icon-fg);
+  --spectrum-alias-icon-color-disabled: var(--dh-color-icon-disabled-fg);
+
+  --spectrum-actionbutton-background-color-disabled: var(
+    --dh-color-action-disabled-bg
+  );
+  --spectrum-actionbutton-border-color-disabled: var(
+    --dh-color-action-disabled-border
+  );
+  --spectrum-actionbutton-text-color-disabled: var(
+    --dh-color-action-disabled-fg
+  );
+
+  /*********** Override variables in spectrum-darkest.css *********************/
+  --spectrum-body-text-color: var(--dh-color-text);
 
   /* Shadows / Overlays */
   --spectrum-alias-dropshadow-color: var(--dh-color-dropshadow);
@@ -70,11 +98,6 @@
     --spectrum-global-color-gray-50
   );
 
-  /* Actions */
-  --spectrum-actionbutton-background-color-disabled: var(
-    --dh-color-action-disabled-bg
-  );
-
   /* Tabs */
   --spectrum-tabs-compact-selection-indicator-color: var(
     --spectrum-global-color-blue-500
@@ -191,4 +214,59 @@
   --spectrum-purple-background-color-default: var(--dh-color-purple-bg);
   --spectrum-fuchsia-background-color-default: var(--dh-color-fuchsia-bg);
   --spectrum-magenta-background-color-default: var(--dh-color-magenta-bg);
+
+  /* Visual levels */
+  --spectrum-negative-visual-color: var(--dh-color-visual-negative);
+  --spectrum-positive-visual-color: var(--dh-color-visual-positive);
+  --spectrum-notice-visual-color: var(--dh-color-visual-notice);
+  --spectrum-informative-visual-color: var(--dh-color-visual-info);
+
+  /* Visual */
+  --spectrum-gray-visual-color: var(--dh-color-visual-gray);
+  --spectrum-red-visual-color: var(--dh-color-visual-red);
+  --spectrum-orange-visual-color: var(--dh-color-visual-orange);
+  --spectrum-yellow-visual-color: var(--dh-color-visual-yellow);
+  --spectrum-chartreuse-visual-color: var(--dh-color-visual-chartreuse);
+  --spectrum-celery-visual-color: var(--dh-color-visual-celery);
+  --spectrum-green-visual-color: var(--dh-color-visual-green);
+  --spectrum-seafoam-visual-color: var(--dh-color-visual-seafoam);
+  --spectrum-cyan-visual-color: var(--dh-color-visual-cyan);
+  --spectrum-blue-visual-color: var(--dh-color-visual-blue);
+  --spectrum-indigo-visual-color: var(--dh-color-visual-indigo);
+  --spectrum-purple-visual-color: var(--dh-color-visual-purple);
+  --spectrum-fuchsia-visual-color: var(--dh-color-visual-fuchsia);
+  --spectrum-magenta-visual-color: var(--dh-color-visual-magenta);
+
+  /*********** Override component specific variables **************************/
+
+  /* Textfield */
+  --spectrum-textfield-background-color: var(--dh-color-input-bg);
+  --spectrum-textfield-background-color-down: var(--dh-color-input-active-bg);
+  --spectrum-textfield-background-color-disabled: var(
+    --dh-color-input-disabled-bg
+  );
+  --spectrum-textfield-border-color: var(--dh-color-input-border);
+  --spectrum-textfield-border-color-disabled: var(
+    --dh-color-input-disabled-border
+  );
+
+  /* Fieldbutton */
+  --spectrum-fieldbutton-background-color: var(--dh-color-selector-bg);
+  --spectrum-fieldbutton-background-color-hover: var(
+    --dh-color-selector-hover-bg
+  );
+  --spectrum-fieldbutton-background-color-disabled: var(
+    --dh-color-input-disabled-bg
+  );
+  --spectrum-fieldbutton-border-color: var(--dh-color-input-border);
+  --spectrum-fieldbutton-border-color-hover: var(--dh-color-input-hover-border);
+  --spectrum-fieldbutton-icon-color: var(--dh-color-selector-fg);
+  --spectrum-fieldbutton-icon-color-hover: var(--dh-color-selector-hover-fg);
+
+  /* Dialogs */
+  --spectrum-dialog-title-text-color: var(--dh-color-dialog-title-fg);
+  --spectrum-dialog-content-text-color: var(--dh-color-dialog-fg);
+
+  /* Popovers */
+  --spectrum-popover-background-color: var(--dh-color-popover-bg);
 }
diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css
index 8d57e66c4d..d0119fd51d 100644
--- a/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css
+++ b/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css
@@ -4,6 +4,11 @@
   font-family: var(--font-family-sans-serif) !important;
 }
 
+/* Override _reboot.scss */
+label[class^='spectrum-'] {
+  margin-bottom: 0;
+}
+
 .svg-inline--fa[class*='spectrum-Icon--sizeS'] {
   /* 
   Resize fontawesome icons used inside a spectrum icon wrapper to match
diff --git a/packages/console/src/Console.scss b/packages/console/src/Console.scss
index ba23b95774..dbd24e059b 100644
--- a/packages/console/src/Console.scss
+++ b/packages/console/src/Console.scss
@@ -24,10 +24,7 @@
       display: block;
       position: absolute;
       width: 100%;
-      background: linear-gradient(
-        hsla(var(--dh-color-black-hsl), 0.6),
-        hsla(var(--dh-color-black-hsl), 0)
-      );
+      box-shadow: var(--dh-color-dropshadow) 0 6px 6px -6px inset;
       height: $size;
       opacity: 0;
       transition: opacity $transition-long;
diff --git a/packages/console/src/ConsoleInput.scss b/packages/console/src/ConsoleInput.scss
index 2dd1cc3aae..e1fcd76f44 100644
--- a/packages/console/src/ConsoleInput.scss
+++ b/packages/console/src/ConsoleInput.scss
@@ -1,6 +1,5 @@
 @import '@deephaven/components/scss/custom.scss';
 
-$console-input-bg: $gray-600;
 $console-input-inner-bg: $content-bg;
 $console-input-min-height: 40px;
 $console-input-padding: 4px;
@@ -17,7 +16,9 @@ $console-input-margin-padding-top: 7px;
 $console-input-margin-color: $foreground;
 
 .console-input-wrapper {
-  background-color: $console-input-bg;
+  --console-input-bg: var(--dh-color-surface-bg);
+
+  background-color: var(--console-input-bg);
   padding: $console-input-padding;
   min-height: $console-input-min-height;
   display: flex;
diff --git a/packages/console/src/ConsoleMenu.scss b/packages/console/src/ConsoleMenu.scss
deleted file mode 100644
index 88d9d6e102..0000000000
--- a/packages/console/src/ConsoleMenu.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import '@deephaven/components/scss/custom.scss';
-$console-pane-menu-color: $gray-300;
-$console-pane-menu-hover-color: $white;
-$console-pane-menu-icons-color: $gray-400;
-$console-pane-arrow-stroke-color: $black;
-$console-pane-arrow-stroke-width: 30;
-
-.console-pane-menu {
-  .btn-link {
-    border: 0;
-    min-width: 2rem;
-    padding: 4px; //must use pixels for buttons with svg icons or risk half pixel issues
-    color: $console-pane-menu-icons-color;
-    z-index: 15; // so focus ring appears above tab header bar
-
-    svg.fa-caret-down g g path {
-      color: $console-pane-menu-color;
-      stroke: $console-pane-arrow-stroke-color;
-      stroke-width: $console-pane-arrow-stroke-width;
-    }
-
-    &:hover {
-      color: $console-pane-menu-hover-color;
-      svg.fa-caret-down g g path {
-        color: $console-pane-menu-hover-color;
-      }
-    }
-  }
-  .btn-overflow {
-    color: $console-pane-menu-color;
-    padding-right: 0;
-  }
-}
diff --git a/packages/console/src/ConsoleMenu.tsx b/packages/console/src/ConsoleMenu.tsx
index 35d3eb5a63..a4352aa8c8 100644
--- a/packages/console/src/ConsoleMenu.tsx
+++ b/packages/console/src/ConsoleMenu.tsx
@@ -21,7 +21,6 @@ import {
 import Log from '@deephaven/log';
 import type { dh as DhType, VariableDefinition } from '@deephaven/jsapi-types';
 import memoize from 'memoize-one';
-import './ConsoleMenu.scss';
 import ConsoleUtils from './common/ConsoleUtils';
 
 const log = Log.module('ConsoleMenu');
@@ -187,24 +186,28 @@ class ConsoleMenu extends PureComponent<ConsoleMenuProps, ConsoleMenuState> {
     const disableWidgetActions = widgetActions.length === 0;
 
     return (
-      <div className="console-pane-menu">
+      <>
         <Button
           kind="ghost"
-          className="btn-link-icon"
           disabled={disableTableActions}
           onClick={() => {
             // no-op: click is handled in `DropdownMenu`
           }}
+          icon={
+            <div className="fa-md fa-layers">
+              <FontAwesomeIcon
+                mask={dhTable}
+                icon={vsTriangleDown}
+                transform="right-5 down-5"
+              />
+              <FontAwesomeIcon
+                icon={vsTriangleDown}
+                transform="right-8 down-6"
+              />
+            </div>
+          }
           tooltip={disableTableActions ? 'No tables available' : 'Tables'}
         >
-          <div className="fa-md fa-layers">
-            <FontAwesomeIcon
-              mask={dhTable}
-              icon={vsTriangleDown}
-              transform="right-5 down-5"
-            />
-            <FontAwesomeIcon icon={vsTriangleDown} transform="right-8 down-6" />
-          </div>
           <DropdownMenu
             key="table-actions "
             actions={tableActions}
@@ -216,21 +219,25 @@ class ConsoleMenu extends PureComponent<ConsoleMenuProps, ConsoleMenuState> {
         </Button>
         <Button
           kind="ghost"
-          className="btn-link-icon"
           disabled={widgetActions.length === 0}
           onClick={() => {
             // no-op: click is handled in `DropdownMenu'
           }}
+          icon={
+            <div className="fa-md fa-layers">
+              <FontAwesomeIcon
+                mask={vsGraph}
+                icon={vsTriangleDown}
+                transform="right-5 down-5"
+              />
+              <FontAwesomeIcon
+                icon={vsTriangleDown}
+                transform="right-8 down-6"
+              />
+            </div>
+          }
           tooltip={disableWidgetActions ? 'No widgets available' : 'Widgets'}
         >
-          <div className="fa-md fa-layers">
-            <FontAwesomeIcon
-              mask={vsGraph}
-              icon={vsTriangleDown}
-              transform="right-5 down-5"
-            />
-            <FontAwesomeIcon icon={vsTriangleDown} transform="right-8 down-6" />
-          </div>
           <DropdownMenu
             key="table-actions"
             actions={widgetActions}
@@ -242,7 +249,6 @@ class ConsoleMenu extends PureComponent<ConsoleMenuProps, ConsoleMenuState> {
         </Button>
         <Button
           kind="ghost"
-          className="btn-overflow btn-link-icon"
           icon={vsKebabVertical}
           tooltip="More Actions..."
           onClick={() => {
@@ -254,7 +260,7 @@ class ConsoleMenu extends PureComponent<ConsoleMenuProps, ConsoleMenuState> {
             popperOptions={popperOptions}
           />
         </Button>
-      </div>
+      </>
     );
   }
 }
diff --git a/packages/console/src/ConsoleStatusBar.scss b/packages/console/src/ConsoleStatusBar.scss
index d4e65ccafa..cb266934e9 100644
--- a/packages/console/src/ConsoleStatusBar.scss
+++ b/packages/console/src/ConsoleStatusBar.scss
@@ -4,15 +4,15 @@ $console-pane-status-icon-connected-color: $gray-400;
 $console-pane-status-icon-disconnected-color: $red;
 
 .console-pane-status-bar {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  justify-content: flex-end;
   flex-grow: 0;
   width: 100%;
   font-size: small;
   text-align: right;
   color: $console-pane-status-color;
-
-  div {
-    display: inline-block;
-  }
 }
 
 .console-pane-status-details {
@@ -30,6 +30,7 @@ $console-pane-status-icon-disconnected-color: $red;
   height: 9px;
   position: relative;
   width: 9px;
+  top: -1px; // Looks better next to a capital letter
   &::before {
     border-radius: 50%;
     border-style: solid;
diff --git a/packages/console/src/ConsoleStatusBar.test.tsx b/packages/console/src/ConsoleStatusBar.test.tsx
index c34da8263e..a42ad8454c 100644
--- a/packages/console/src/ConsoleStatusBar.test.tsx
+++ b/packages/console/src/ConsoleStatusBar.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import dh from '@deephaven/jsapi-shim';
 import { ContextActions, DropdownAction } from '@deephaven/components';
 import { vsCheck } from '@deephaven/icons';
-import userEvent, { TargetElement } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 import ConsoleStatusBar from './ConsoleStatusBar';
 
 jest.useFakeTimers();
@@ -51,9 +51,7 @@ it('dropdown menu disappears on toggle', async () => {
       order: 10,
     },
   ]);
-  const button = document.querySelector(
-    '.btn-overflow.btn-link-icon'
-  ) as TargetElement;
+  const button = screen.getByLabelText('More Actions...');
   await user.click(button);
   let dropdown: HTMLElement | null = screen.getByText(title);
   expect(dropdown).toBeTruthy();
diff --git a/packages/console/src/HeapUsage.scss b/packages/console/src/HeapUsage.scss
index 97713a1f0c..585cf0edb6 100644
--- a/packages/console/src/HeapUsage.scss
+++ b/packages/console/src/HeapUsage.scss
@@ -4,7 +4,7 @@
   position: relative;
   color: $gray-300;
   background-color: $gray-900;
-  border: $black;
+  border: 1px solid $background;
   width: 4.25rem;
   vertical-align: middle;
   text-align: center;
diff --git a/packages/console/src/HeapUsage.tsx b/packages/console/src/HeapUsage.tsx
index 61dbaf593b..91892321dd 100644
--- a/packages/console/src/HeapUsage.tsx
+++ b/packages/console/src/HeapUsage.tsx
@@ -112,25 +112,23 @@ function HeapUsage({
   const usedPercentage = (totalHeapSize - freeMemory) / maximumHeapSize;
 
   return (
-    <>
-      <div className="max-memory">
-        <div
-          className="total-memory"
-          style={{
-            width: `calc(${totalPercentage * 100}% - ${totalPercentage * 2}px`,
-          }}
-        />
-        <div
-          className={classNames('used-memory', {
-            'heap-overflow':
-              (totalHeapSize - freeMemory) / maximumHeapSize > 0.95,
-          })}
-          style={{
-            width: `calc(${usedPercentage * 100}% - ${usedPercentage * 2}px`,
-          }}
-        />
-        <div className="memory-text">{maxHeapGB.toFixed(1)} GB</div>
-      </div>
+    <div className="max-memory">
+      <div
+        className="total-memory"
+        style={{
+          width: `calc(${totalPercentage * 100}% - ${totalPercentage * 2}px`,
+        }}
+      />
+      <div
+        className={classNames('used-memory', {
+          'heap-overflow':
+            (totalHeapSize - freeMemory) / maximumHeapSize > 0.95,
+        })}
+        style={{
+          width: `calc(${usedPercentage * 100}% - ${usedPercentage * 2}px`,
+        }}
+      />
+      <div className="memory-text">{maxHeapGB.toFixed(1)} GB</div>
 
       <Tooltip
         onEntered={(): void => setIsOpen(true)}
@@ -192,7 +190,7 @@ function HeapUsage({
           </div>
         </div>
       </Tooltip>
-    </>
+    </div>
   );
 }
 
diff --git a/packages/console/src/command-history/CommandHistory.scss b/packages/console/src/command-history/CommandHistory.scss
index 12580d451e..582af581c1 100644
--- a/packages/console/src/command-history/CommandHistory.scss
+++ b/packages/console/src/command-history/CommandHistory.scss
@@ -2,7 +2,6 @@
 
 $command-history-bg: $gray-900;
 $command-history-color: $text-muted;
-$command-history-search-bg: $gray-800;
 $command-history-search-toolbar-bg: $content-bg;
 
 .command-history {
@@ -40,8 +39,5 @@ $command-history-search-toolbar-bg: $content-bg;
     flex-grow: 1;
     margin-right: $spacer-1;
     margin-bottom: $spacer-1;
-    input {
-      background-color: $command-history-search-bg;
-    }
   }
 }
diff --git a/packages/console/src/command-history/CommandHistoryItem.scss b/packages/console/src/command-history/CommandHistoryItem.scss
index 156f551772..138251ac42 100644
--- a/packages/console/src/command-history/CommandHistoryItem.scss
+++ b/packages/console/src/command-history/CommandHistoryItem.scss
@@ -1,14 +1,13 @@
 @import '@deephaven/components/scss/custom.scss';
 
-$shade: $primary;
-
-$command-history-bg: $gray-700;
-$selection-color: var(--dh-color-item-list-selected-fg);
-$selection-bg: var(--dh-color-item-list-selected-bg);
-$selection-hover-bg: var(--dh-color-item-list-selected-hover-bg);
-$selection-nofocus-bg: var(--dh-color-item-list-selected-inactive-bg);
-$selection-border-color: var(--dh-color-item-list-selected-border);
-$selection-hover-color: var(--dh-color-item-list-selected-fg);
+$item-list-color: $text-muted;
+$item-list-selected-nofocus-bg: var(--dh-color-item-list-selected-inactive-bg);
+$item-list-selected-bg: var(--dh-color-item-list-selected-bg);
+$item-list-selected-hover-bg: var(--dh-color-item-list-selected-hover-bg);
+$item-list-selection-border-color: var(--dh-color-item-list-selected-border);
+$item-list-focused-bg: var(--dh-color-item-list-selected-bg);
+$item-list-hover-bg: var(--dh-color-item-list-hover-bg);
+$item-list-selected-color: var(--dh-color-item-list-selected-fg);
 
 .command-history {
   .command-history-item {
@@ -23,19 +22,18 @@ $selection-hover-color: var(--dh-color-item-list-selected-fg);
     padding: 0;
     width: 100%;
     background: transparent;
-    color: $text-muted;
+    color: $item-list-color;
     text-align: left;
     cursor: pointer;
     user-select: none;
     line-height: 27px; // CommandHistory.ITEM_HEIGHT - borders
-    transition: $btn-transition;
     border: 1px solid transparent; //we need a spacer border so stuff doesn't move on us when we apply a border-color
   }
 
   .item-list-item.is-focused {
     // We don't want the keyboard selection to appear, only items that are actually selected
     background-color: transparent;
-    color: $text-muted;
+    color: $item-list-color;
   }
 
   .item-list-item:focus {
@@ -44,39 +42,42 @@ $selection-hover-color: var(--dh-color-item-list-selected-fg);
 
   .item-list-item.active {
     outline: none;
-    background-color: $selection-nofocus-bg;
-    color: $selection-color;
+    background-color: $item-list-selected-nofocus-bg;
+    color: $item-list-color;
   }
 }
 
 //for selected items, apply border on left and right
 .command-history:focus-within .item-list-item.active {
-  background-color: $selection-bg;
-  color: $selection-color;
-  border-left-color: $selection-border-color;
-  border-right-color: $selection-border-color;
+  background-color: $item-list-selected-bg;
+  color: $item-list-selected-color;
+  border-left-color: $item-list-selection-border-color;
+  border-right-color: $item-list-selection-border-color;
+}
+
+.command-history .item-list-item:hover {
+  background-color: $item-list-hover-bg;
+  color: $item-list-selected-color;
 }
 
-.command-history .item-list-item:hover,
 .command-history:focus-within .item-list-item.active:hover {
-  background-color: $selection-hover-bg;
-  color: $selection-hover-color;
-  transition: none; //to make things feel more responsive don't trasinition the hover in
+  background-color: $item-list-selected-hover-bg;
+  color: $item-list-selected-color;
 }
 
 //apply border to top of the first item in the list if its selected, and the first selected after a non-selected item
 .command-history:focus-within .item-list-item:not(.active) + .active,
 .command-history:focus-within .item-list-item.active:first-of-type {
-  border-top: 1px solid $selection-border-color;
+  border-top: 1px solid $item-list-selection-border-color;
 }
 
 //there's no easy way to get the last select item in a grouping, so we apply the end border
 //to the TOP of the first non-selected item, ie. the previous selection group
 .command-history:focus-within .active + .item-list-item:not(.active) {
-  border-top: 1px solid $selection-border-color;
+  border-top: 1px solid $item-list-selection-border-color;
 }
 
 //since there is no item after the last item in teh selection, we apply the border to the bottom of the last selected element
 .command-history:focus-within .item-list-item.active:last-of-type {
-  border-bottom: 1px solid $selection-border-color;
+  border-bottom: 1px solid $item-list-selection-border-color;
 }
diff --git a/packages/console/src/csv/CsvInputBar.scss b/packages/console/src/csv/CsvInputBar.scss
index 3e2216eb50..3390be50b5 100644
--- a/packages/console/src/csv/CsvInputBar.scss
+++ b/packages/console/src/csv/CsvInputBar.scss
@@ -6,7 +6,7 @@
   grid-gap: 10px;
   align-items: center;
   padding: $spacer-2;
-  background-color: $primary-dark;
+  background-color: var(--dh-color-surface-bg);
 
   label {
     margin-bottom: 0;
@@ -15,7 +15,7 @@
 
 .csv-input-bar-container {
   display: flex;
-  background-color: $primary-dark;
+  background-color: var(--dh-color-surface-bg);
   overflow: hidden;
 
   > * {
diff --git a/packages/console/src/monaco/MonacoTheme.module.scss b/packages/console/src/monaco/MonacoTheme.module.scss
index ae50d50c6a..4db7190c87 100644
--- a/packages/console/src/monaco/MonacoTheme.module.scss
+++ b/packages/console/src/monaco/MonacoTheme.module.scss
@@ -22,6 +22,17 @@
   identifier-js: var(--dh-color-editor-identifier-js);
   comment: var(--dh-color-editor-comment);
 
+  // brackets
+  editor-bracket-foreground1: var(--dh-color-editor-bracket-fg1);
+  editor-bracket-foreground2: var(--dh-color-editor-bracket-fg2);
+  editor-bracket-foreground3: var(--dh-color-editor-bracket-fg3);
+  editor-bracket-foreground4: var(--dh-color-editor-bracket-fg4);
+  editor-bracket-foreground5: var(--dh-color-editor-bracket-fg5);
+  editor-bracket-foreground6: var(--dh-color-editor-bracket-fg6);
+  editor-unexpected-bracket-foreground: var(
+    --dh-color-editor-unexpected-bracket-fg
+  );
+
   //input
   input-option-active-border: var(--dh-color-editor-input-option-active-border);
   focus-border: var(--dh-color-editor-focus-border);
@@ -32,12 +43,20 @@
   //editor
   editor-line-number-foreground: var(--dh-color-editor-line-number-fg);
   editor-selection-background: var(--dh-color-editor-selection-bg);
-  editor-line-highlight-bg: var(--dh-color-editor-line-highlight-bg);
+  editor-inactive-selection-background: var(
+    --dh-color-editor-inactive-selection-bg
+  );
+  editor-selection-highlight-background: var(
+    --dh-color-editor-selection-highlight-bg
+  );
+  editor-line-highlight-background: var(--dh-color-editor-line-highlight-bg);
+  editor-word-highlight-background: var(--dh-color-editor-word-highlight-bg);
 
   //context menu
   context-menu-background: var(--dh-color-editor-context-menu-bg);
   context-menu-foreground: var(--dh-color-editor-context-menu-fg);
   menu-selection-background: var(--dh-color-editor-menu-selection-bg);
+  menu-selection-foreground: var(--dh-color-editor-menu-selection-fg);
 
   //log items
   log-date: var(--dh-color-editor-log-date);
diff --git a/packages/console/src/monaco/MonacoUtils.ts b/packages/console/src/monaco/MonacoUtils.ts
index 3fade7a5eb..7e0dd365e5 100644
--- a/packages/console/src/monaco/MonacoUtils.ts
+++ b/packages/console/src/monaco/MonacoUtils.ts
@@ -127,14 +127,22 @@ class MonacoUtils {
     ];
 
     const dhDarkColors = {
+      foreground: MonacoTheme.foreground,
       errorForeground: MonacoTheme['error-foreground'],
       'inputOption.activeBorder': MonacoTheme['input-option-active-border'],
       'editor.background': MonacoTheme.background,
       'editor.foreground': MonacoTheme.foreground,
-      'editor.lineHighlightBackground': MonacoTheme['editor-line-highlight-bg'],
+      'editor.lineHighlightBackground':
+        MonacoTheme['editor-line-highlight-background'],
       'editorLineNumber.foreground':
         MonacoTheme['editor-line-number-foreground'],
       'editor.selectionBackground': MonacoTheme['editor-selection-background'],
+      'editor.inactiveSelectionBackground':
+        MonacoTheme['editor-inactive-selection-background'],
+      'editor.selectionHighlightBackground':
+        MonacoTheme['editor-selection-highlight-background'],
+      'editor.wordHighlightBackground':
+        MonacoTheme['editor-word-highlight-background'],
       'editor.findMatchBackground': MonacoTheme['editor-find-match-background'],
       'editor.findMatchHighlightBackground':
         MonacoTheme['editor-find-match-highlight-background'],
@@ -145,8 +153,12 @@ class MonacoUtils {
         MonacoTheme['editor-suggest-widget-foreground'],
       'editorSuggestWidget.selectedBackground':
         MonacoTheme['editor-suggest-widget-selected-background'],
+      'list.activeSelectionBackground':
+        MonacoTheme['editor-suggest-widget-selected-background'],
       'editorSuggestWidget.selectedForeground':
         MonacoTheme['editor-suggest-widget-selected-foreground'],
+      'list.activeSelectionForeground':
+        MonacoTheme['editor-suggest-widget-selected-foreground'],
       'editorSuggestWidget.highlightForeground':
         MonacoTheme['editor-suggest-widget-highlightForeground'],
       'editorSuggestWidget.focusHighlightForeground':
@@ -155,6 +167,8 @@ class MonacoUtils {
       'dropdown.background': MonacoTheme['context-menu-background'],
       'dropdown.foreground': MonacoTheme['context-menu-foreground'],
       'menu.selectionBackground': MonacoTheme['menu-selection-background'],
+      'menu.selectionForeground': MonacoTheme['menu-selection-foreground'],
+      'keybindingLabel.foreground': MonacoTheme['menu-selection-foreground'],
       'list.focusBackground': MonacoTheme['menu-selection-background'],
       'editorWidget.background': MonacoTheme['editor-widget-background'],
       'inputOption.activeBackground':
@@ -169,6 +183,20 @@ class MonacoUtils {
       'textLink.activeForeground': MonacoTheme['text-link-active-foreground'],
       'editorLink.activeForeground':
         MonacoTheme['editor-link-active-foreground'],
+      'editorBracketHighlight.foreground1':
+        MonacoTheme['editor-bracket-foreground1'],
+      'editorBracketHighlight.foreground2':
+        MonacoTheme['editor-bracket-foreground2'],
+      'editorBracketHighlight.foreground3':
+        MonacoTheme['editor-bracket-foreground3'],
+      'editorBracketHighlight.foreground4':
+        MonacoTheme['editor-bracket-foreground4'],
+      'editorBracketHighlight.foreground5':
+        MonacoTheme['editor-bracket-foreground5'],
+      'editorBracketHighlight.foreground6':
+        MonacoTheme['editor-bracket-foreground6'],
+      'editorBracketHighlight.unexpectedBracket.foreground':
+        MonacoTheme['editor-unexpected-bracket-foreground'],
     };
 
     monaco.editor.defineTheme('dh-dark', {
diff --git a/packages/console/src/notebook/Editor.scss b/packages/console/src/notebook/Editor.scss
index d20148861b..be6b500713 100644
--- a/packages/console/src/notebook/Editor.scss
+++ b/packages/console/src/notebook/Editor.scss
@@ -1,5 +1,17 @@
 @import '@deephaven/components/scss/custom.scss';
 
-.monaco-editor .detected-link {
-  color: $link-color;
+.editor-container {
+  .monaco-editor {
+    // override default scroll container shadow to match our global shadows
+    --vscode-scrollbar-shadow: var(--dh-color-dropshadow);
+
+    // set font for menus
+    font-family: var(--font-family-sans-serif);
+    .shadow-root-host {
+      font-family: var(--font-family-sans-serif);
+    }
+  }
+  .monaco-editor .detected-link {
+    color: $link-color;
+  }
 }
diff --git a/packages/dashboard-core-plugins/src/controls/markdown/MarkdownStartPage.tsx b/packages/dashboard-core-plugins/src/controls/markdown/MarkdownStartPage.tsx
index 0dbf0de24a..30e4019331 100644
--- a/packages/dashboard-core-plugins/src/controls/markdown/MarkdownStartPage.tsx
+++ b/packages/dashboard-core-plugins/src/controls/markdown/MarkdownStartPage.tsx
@@ -110,7 +110,7 @@ class MarkdownStartPage extends PureComponent<
             <Modal
               isOpen={isDeleteModalShown}
               toggle={this.handleDeleteModalClose}
-              className="modal-dialog-centered markdown-delete-modal theme-bg-light"
+              className="modal-dialog-centered markdown-delete-modal"
             >
               <ModalHeader>
                 Are you sure you want to permanently delete this note?
diff --git a/packages/dashboard-core-plugins/src/linker/LinkerOverlayContent.scss b/packages/dashboard-core-plugins/src/linker/LinkerOverlayContent.scss
index eb61fd77f3..7327ad323a 100644
--- a/packages/dashboard-core-plugins/src/linker/LinkerOverlayContent.scss
+++ b/packages/dashboard-core-plugins/src/linker/LinkerOverlayContent.scss
@@ -21,27 +21,26 @@ $toast-outer-padding: $spacer-3;
     bottom: $toast-outer-padding;
     background: $modal-content-bg;
     width: $dialog-width;
-    color: $background;
     pointer-events: auto;
-    box-shadow: $tooltip-box-shadow;
+    box-shadow: $box-shadow;
     z-index: $zindex-popover;
 
     .btn-drag-handle {
       grid-area: drag-handle;
       cursor: grab;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       border: none;
       border-radius: 0;
       height: 100%;
-      background: $gray-300;
       color: $gray-600;
       min-width: unset;
+      user-select: none;
+
+      svg {
+        margin: 0 !important;
+      }
 
       &:hover {
-        background-color: $gray-400;
-        color: $gray-700;
+        border: none;
       }
     }
 
@@ -49,8 +48,7 @@ $toast-outer-padding: $spacer-3;
       cursor: grabbing;
       .btn-drag-handle {
         cursor: grabbing;
-        background-color: $gray-400;
-        color: $gray-700;
+        border: none;
       }
     }
 
diff --git a/packages/dashboard-core-plugins/src/linker/LinkerOverlayContent.tsx b/packages/dashboard-core-plugins/src/linker/LinkerOverlayContent.tsx
index 875a9c9330..7ecc550cff 100644
--- a/packages/dashboard-core-plugins/src/linker/LinkerOverlayContent.tsx
+++ b/packages/dashboard-core-plugins/src/linker/LinkerOverlayContent.tsx
@@ -200,6 +200,7 @@ export class LinkerOverlayContent extends Component<
   }
 
   handleMouseDown(event: React.MouseEvent): void {
+    event.preventDefault();
     const offset: Point = { x: 0, y: 0 };
     if (this.dialogRef.current) {
       const rect = this.dialogRef.current.getBoundingClientRect();
diff --git a/packages/dashboard-core-plugins/src/panels/ConsolePanel.tsx b/packages/dashboard-core-plugins/src/panels/ConsolePanel.tsx
index 15563d65b8..c8d9becfb5 100644
--- a/packages/dashboard-core-plugins/src/panels/ConsolePanel.tsx
+++ b/packages/dashboard-core-plugins/src/panels/ConsolePanel.tsx
@@ -398,31 +398,26 @@ export class ConsolePanel extends PureComponent<
             language={language}
             statusBarChildren={
               <>
-                <div>&nbsp;</div>
                 <div>{ConsoleConstants.LANGUAGE_MAP.get(language)}</div>
                 {workerName != null && (
                   <>
-                    <div>&nbsp;•&nbsp;</div>
+                    <div>•</div>
                     {workerName}
                   </>
                 )}
                 {processInfoId != null && (
                   <>
-                    <div>&nbsp;•&nbsp;</div>
+                    <div>•</div>
                     {processInfoId}
-                    <div>&nbsp;•</div>
+                    <div>•</div>
                   </>
                 )}
-                <div>&nbsp;</div>
-                <div>
-                  <HeapUsage
-                    connection={connection}
-                    defaultUpdateInterval={10 * 1000}
-                    hoverUpdateInterval={3 * 1000}
-                    monitorDuration={10 * 60 * 1000}
-                  />
-                </div>
-                <div>&nbsp;</div>
+                <HeapUsage
+                  connection={connection}
+                  defaultUpdateInterval={10 * 1000}
+                  hoverUpdateInterval={3 * 1000}
+                  monitorDuration={10 * 60 * 1000}
+                />
               </>
             }
             scope={sessionId}
diff --git a/packages/dashboard-core-plugins/src/panels/NotebookPanel.scss b/packages/dashboard-core-plugins/src/panels/NotebookPanel.scss
index c591768d20..889c9f2b0f 100644
--- a/packages/dashboard-core-plugins/src/panels/NotebookPanel.scss
+++ b/packages/dashboard-core-plugins/src/panels/NotebookPanel.scss
@@ -1,8 +1,5 @@
 @import '@deephaven/components/scss/custom.scss';
 
-$toolbar-font-size: 18px;
-$toolbar-width: 36px;
-$toolbar-height: 36px;
 $toolbar-bg: $content-bg;
 
 .notebook-title {
@@ -22,33 +19,18 @@ $toolbar-bg: $content-bg;
 
   .notebook-toolbar {
     display: flex;
-    flex-basis: $toolbar-height;
+    justify-content: center;
     flex-direction: row;
-    flex-grow: 0;
     background: $toolbar-bg;
     border-bottom: 2px solid $background;
-    padding: $spacer-1;
-
-    .btn {
-      min-width: $toolbar-width;
-      padding-left: 0;
-      padding-right: 0;
-      font-size: $toolbar-font-size;
-
-      &:hover {
-        transition: none;
-      }
-    }
+    padding: $spacer-1 $spacer-2;
+    gap: $spacer-1;
 
     .btn-play:hover,
     .btn-play-selected:hover {
       color: $green;
     }
 
-    .btn-overflow {
-      font-size: inherit;
-    }
-
     .icon-create-pq {
       transform: translate(0, -4px);
     }
diff --git a/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx b/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx
index a0f040dccd..3f5e306317 100644
--- a/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx
+++ b/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx
@@ -1349,7 +1349,7 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
                 />
                 <Button
                   kind="ghost"
-                  className="btn-overflow btn-link-icon"
+                  className="btn-overflow"
                   disabled={toolbarDisabled}
                   icon={vsKebabVertical}
                   tooltip="More Actions..."
diff --git a/packages/file-explorer/src/FileExplorerToolbar.scss b/packages/file-explorer/src/FileExplorerToolbar.scss
index 40be7c0ea4..bfd6791c69 100644
--- a/packages/file-explorer/src/FileExplorerToolbar.scss
+++ b/packages/file-explorer/src/FileExplorerToolbar.scss
@@ -3,16 +3,13 @@
 $toolbar-padding: $spacer-1;
 $toolbar-font-size: 17px;
 $toolbar-btn-width: $input-height;
-$toolbar-height: 42px;
 $toolbar-bg: $content-bg;
 $file-list-search-bg: $gray-800;
-$item-list-color: $foreground;
 
 .file-explorer-toolbar {
   background: $toolbar-bg;
   border-bottom: 2px solid $background;
   display: flex;
-  flex-basis: $toolbar-height;
   flex-direction: row;
   flex-grow: 0;
   flex-shrink: 1;
@@ -20,7 +17,7 @@ $item-list-color: $foreground;
   position: relative;
   align-items: center;
   padding: $toolbar-padding;
-  min-height: $toolbar-height;
+
   .file-explorer-toolbar-buttons {
     display: flex;
     padding-right: $toolbar-padding;
diff --git a/packages/file-explorer/src/NewItemModal.tsx b/packages/file-explorer/src/NewItemModal.tsx
index ac75f9b6fa..eb30acaf73 100644
--- a/packages/file-explorer/src/NewItemModal.tsx
+++ b/packages/file-explorer/src/NewItemModal.tsx
@@ -448,7 +448,7 @@ class NewItemModal extends PureComponent<NewItemModalProps, NewItemModalState> {
           isOpen={isOpen}
           toggle={onCancel}
           onOpened={this.handleModalOpened}
-          className="modal-dialog-centered new-file-modal theme-bg-dark"
+          className="modal-dialog-centered new-file-modal"
         >
           <ModalHeader toggle={onCancel}>{title}</ModalHeader>
           <ModalBody>
diff --git a/packages/golden-layout/scss/goldenlayout-dark-theme.scss b/packages/golden-layout/scss/goldenlayout-dark-theme.scss
index d2c2fe6601..65f0ae7a80 100644
--- a/packages/golden-layout/scss/goldenlayout-dark-theme.scss
+++ b/packages/golden-layout/scss/goldenlayout-dark-theme.scss
@@ -9,13 +9,13 @@ $tab-font-size: 12px;
 
 $lm-tab-color: $gray-400;
 $lm-tab-hover-color: $gray-300;
-$lm-tab-active-color: $white;
+$lm-tab-active-color: var(--dh-color-text);
 $lm-tab-icon-color: $gray-200;
 
 //make some subtle tab background colors relative to our defined color
-$lm-tab-active-background: $content-bg;
-$lm-tab-background: var(--dh-color-gray-75);
-$lm-header-background: var(--dh-color-gray-75);
+$lm-tab-active-background: var(--dh-color-golden-layout-tab-selected-bg);
+$lm-tab-background: var(--dh-color-golden-layout-tab-bg);
+$lm-header-background: var(--dh-color-golden-layout-tab-header-bg);
 
 $lm-splitter-hover-color: $gray-400;
 $lm-splitter-active-color: $gray-300;
@@ -102,7 +102,7 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
   .lm_inner {
     box-sizing: border-box;
     border: $ant-thickness solid transparent; //offset shadow using a transparent border
-    box-shadow: inset 0 0 1rem 1px hsla(var(--dh-color-true-black-hsl), 0.45); //true black for this shadow
+    box-shadow: inset 0 0 1rem 1px var(--dh-color-dropshadow);
     opacity: 1; //set opacity back to 1, default 0.2 and backroudn was solid.
     background: accent-opacity(
       10
@@ -228,7 +228,7 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
 
 .lm_window_blur {
   .lm_header .lm_tab.lm_active.lm_focusin {
-    box-shadow: none;
+    box-shadow: inset -1px 0 0 0 $background;
   }
 }
 
@@ -278,8 +278,8 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
 
 .lm_tabdropdown_list {
   z-index: $zindex-dropdown;
-  background: $lm-tab-background;
-  box-shadow: $box-shadow-900;
+  background: var(--dh-color-popover-bg);
+  box-shadow: $box-shadow;
   border-radius: $border-radius;
   max-width: 12rem;
   margin: 0;
@@ -315,18 +315,22 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
   }
 
   .lm_tab {
-    background: $lm-tab-background;
+    background: transparent;
     color: $lm-tab-hover-color;
     box-shadow: none;
 
     &.lm_keyboard_active {
       color: $lm-tab-hover-color;
-      background-color: $primary-dark;
+      background-color: var(--dh-color-highlight-selected);
+
+      &:hover {
+        background-color: var(--dh-color-highlight-selected-hover);
+      }
     }
 
     &:hover {
       color: $lm-tab-active-color;
-      background-color: $primary;
+      background-color: var(--dh-color-highlight-hover);
     }
   }
 }
@@ -337,7 +341,7 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
   height: 100% !important;
   width: 100% !important;
   .lm_items {
-    box-shadow: $box-shadow-900;
+    box-shadow: $box-shadow;
   }
 
   // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
diff --git a/packages/grid/src/GridColorUtils.ts b/packages/grid/src/GridColorUtils.ts
index 4a653611a7..88f61c8657 100644
--- a/packages/grid/src/GridColorUtils.ts
+++ b/packages/grid/src/GridColorUtils.ts
@@ -19,7 +19,12 @@ export function darkenForDepth(
   maxDepth = 6
 ): GridColor {
   const lab = convert.hex.lab.raw(color);
-  lab[0] = Math.max(lab[0] - (lab[0] / maxDepth) * depth, 0);
+
+  // determined via a trial an error approach to getting
+  // something that works for both light and dark
+  const modifier = lab[0] < 50 ? 17 : 10;
+
+  lab[0] = Math.max(lab[0] - (modifier / maxDepth) * depth, 0);
   return `#${convert.lab.hex(lab)}`;
 }
 
diff --git a/packages/grid/src/GridRenderer.ts b/packages/grid/src/GridRenderer.ts
index 0f66dd2bce..e98b86ad6b 100644
--- a/packages/grid/src/GridRenderer.ts
+++ b/packages/grid/src/GridRenderer.ts
@@ -597,7 +597,7 @@ export class GridRenderer {
     maxX = state.metrics.maxX
   ): void {
     const { theme, metrics, model } = state;
-    const { maxDepth, shadowBlur, shadowColor } = theme;
+    const { maxDepth, shadowBlur, shadowColor, shadowAlpha } = theme;
 
     const colorSets = this.getCachedBackgroundColors(
       rowBackgroundColors,
@@ -657,7 +657,7 @@ export class GridRenderer {
     if (topShadowRows.length > 0) {
       context.save();
 
-      const startColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
+      const startColor = this.getCachedColorWithAlpha(shadowColor, shadowAlpha);
       const endColor = this.getCachedColorWithAlpha(shadowColor, 0);
       const gradient = context.createLinearGradient(0, 0, 0, shadowBlur);
       gradient.addColorStop(0, startColor);
@@ -680,7 +680,7 @@ export class GridRenderer {
       context.save();
 
       const startColor = this.getCachedColorWithAlpha(shadowColor, 0);
-      const endColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
+      const endColor = this.getCachedColorWithAlpha(shadowColor, shadowAlpha);
       const gradient = context.createLinearGradient(0, 0, 0, shadowBlur);
       gradient.addColorStop(0, startColor);
       gradient.addColorStop(1, endColor);
diff --git a/packages/grid/src/GridTheme.ts b/packages/grid/src/GridTheme.ts
index b70348c4f7..09baa8e20d 100644
--- a/packages/grid/src/GridTheme.ts
+++ b/packages/grid/src/GridTheme.ts
@@ -91,6 +91,7 @@ export type GridTheme = {
   // Shadows to draw when representing a hierarchy, eg. when one row is a higher "depth" than the row above it
   shadowBlur: number;
   shadowColor: GridColor;
+  shadowAlpha: number;
   maxDepth: number; // max depth of the shadowing
 
   // Other tree table metrics
@@ -193,6 +194,7 @@ const defaultTheme: GridTheme = Object.freeze({
   scrollBarSelectionTickColor: '#4286f433',
   scrollBarActiveSelectionTickColor: '#4286f480',
   shadowBlur: 8,
+  shadowAlpha: 0.15,
   shadowColor: '#000000',
   textColor: '#ffffff',
   hyperlinkColor: '#4878ea',
diff --git a/packages/iris-grid/src/FilterInputField.scss b/packages/iris-grid/src/FilterInputField.scss
index b04d03f3af..f45c3a19d4 100644
--- a/packages/iris-grid/src/FilterInputField.scss
+++ b/packages/iris-grid/src/FilterInputField.scss
@@ -38,8 +38,8 @@
 
   .iris-grid-input-field {
     position: absolute;
-    color: $gray-200;
-    background: $gray-800; // same as filter-bar-expanded-bg
+    color: var(--dh-color-text);
+    background: var(--dh-color-grid-filter-bar-expanded-bg);
     border: 1px solid $input-border-color;
     width: 100%;
     height: 100%;
diff --git a/packages/iris-grid/src/IrisGrid.scss b/packages/iris-grid/src/IrisGrid.scss
index 6e820dcac4..d03356fe46 100644
--- a/packages/iris-grid/src/IrisGrid.scss
+++ b/packages/iris-grid/src/IrisGrid.scss
@@ -7,7 +7,7 @@ $iris-grid-font:
   sans-serif;
 $iris-grid-font-feature-settings: 'tnum';
 $table-sidebar-max-width: 320px;
-$table-sidebar-bg: $gray-700;
+
 $iris-grid-bar-bg: $primary-dark;
 $iris-grid-bar-bg-highlight: $primary;
 $iris-grid-bar-max-height: 250px;
@@ -17,10 +17,13 @@ $cell-box-shadow:
   0 0 0 2px var(--dh-color-visual-blue),
   0 0 0 5px hsla(var(--dh-color-visual-blue-hsl), 0.25);
 $cell-invalid-box-shadow:
-  0 0 0 2px var(--dh-color-negative),
+  0 0 0 2px var(--dh-color-visual-negative),
   0 0 0 5px hsla(var(--dh-color-negative-hsl), 0.25);
 
 .iris-grid {
+  --table-sidebar-bg: var(--dh-color-surface-bg);
+  --dh-color-hr: var(--dh-color-gray-500);
+
   width: 100%;
   height: 100%;
   position: relative;
@@ -42,8 +45,8 @@ $cell-invalid-box-shadow:
     flex: 0 0 $table-sidebar-max-width;
     width: $table-sidebar-max-width;
     max-width: $table-sidebar-max-width;
-    background: $table-sidebar-bg;
-    box-shadow: -4px 0 8px hsla(var(--dh-color-black-hsl), 0.45);
+    background: var(--table-sidebar-bg);
+    box-shadow: 0 0 6px var(--dh-color-dropshadow);
     z-index: 1;
 
     // We have it positioned absolutely while animating, so it slides "overtop" of the grid until it's in place, then resizes the grid
@@ -53,7 +56,7 @@ $cell-invalid-box-shadow:
     .pushing-view,
     .popping-view,
     .main-view {
-      background: $table-sidebar-bg;
+      background: var(--table-sidebar-bg);
     }
 
     &.slide-left-enter-done {
@@ -89,8 +92,8 @@ $cell-invalid-box-shadow:
       right: 0;
       height: $header-height;
       width: $header-height;
-      background-color: $header-bg;
-      border-bottom: 1px solid $header-separator-color;
+      background-color: var(--dh-color-grid-header-bg);
+      border-bottom: 1px solid var(--dh-color-grid-header-separator);
       transition:
         transform $transition-mid ease-out,
         opacity $transition-mid ease-out;
diff --git a/packages/iris-grid/src/IrisGridBottomBar.scss b/packages/iris-grid/src/IrisGridBottomBar.scss
index 96960a4998..e307d92c48 100644
--- a/packages/iris-grid/src/IrisGridBottomBar.scss
+++ b/packages/iris-grid/src/IrisGridBottomBar.scss
@@ -9,8 +9,7 @@ $ease-out-bounce-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   left: 0;
   right: 0;
   height: calc(#{$bottom-bar-height} * 2);
-  background-color: $toast-bg;
-  color: $toast-color;
+  background-color: var(--dh-color-surface-bg);
   display: flex;
   flex-direction: row;
   align-content: center;
@@ -54,7 +53,7 @@ $ease-out-bounce-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
       min-width: 10rem;
       .svg-inline--fa,
       .loading-spinner {
-        margin-right: 0.5rem;
+        margin: 0 $spacer-1 0 0;
       }
     }
 
diff --git a/packages/iris-grid/src/IrisGridCellOverflowModal.tsx b/packages/iris-grid/src/IrisGridCellOverflowModal.tsx
index 91e98e90d0..509aeb912d 100644
--- a/packages/iris-grid/src/IrisGridCellOverflowModal.tsx
+++ b/packages/iris-grid/src/IrisGridCellOverflowModal.tsx
@@ -131,7 +131,7 @@ export default function IrisGridCellOverflowModal({
         setIsOpened(false);
         setHeight(0);
       }}
-      className="theme-bg-dark cell-overflow-modal"
+      className="cell-overflow-modal"
       size="xl"
     >
       <ModalHeader toggle={onClose}>
diff --git a/packages/iris-grid/src/IrisGridCopyHandler.scss b/packages/iris-grid/src/IrisGridCopyHandler.scss
index 01c6905e68..8b0bd53cb9 100644
--- a/packages/iris-grid/src/IrisGridCopyHandler.scss
+++ b/packages/iris-grid/src/IrisGridCopyHandler.scss
@@ -8,8 +8,7 @@ $ease-out-bounce-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   left: 0;
   right: 0;
   height: 100px;
-  background-color: $toast-bg;
-  color: $toast-color;
+  background-color: var(--dh-color-surface-bg);
   display: flex;
   flex-direction: row;
   align-content: center;
diff --git a/packages/iris-grid/src/IrisGridRenderer.ts b/packages/iris-grid/src/IrisGridRenderer.ts
index 494b38a708..1e3fca23d9 100644
--- a/packages/iris-grid/src/IrisGridRenderer.ts
+++ b/packages/iris-grid/src/IrisGridRenderer.ts
@@ -332,7 +332,7 @@ export class IrisGridRenderer extends GridRenderer {
     );
 
     // add an overlay of the scrim color to darken things a bit
-    context.globalCompositeOperation = 'overlay';
+    context.globalCompositeOperation = 'source-over';
     context.filter = `blur(${scrimBlurSize}px) opacity(15%)`;
     context.fillRect(
       -scrimBlurSize,
diff --git a/packages/iris-grid/src/IrisGridTheme.module.scss b/packages/iris-grid/src/IrisGridTheme.module.scss
index 36bc4452df..4f89ffbe99 100644
--- a/packages/iris-grid/src/IrisGridTheme.module.scss
+++ b/packages/iris-grid/src/IrisGridTheme.module.scss
@@ -3,8 +3,6 @@
 
 $font-size: 12px;
 $row-height: 19px;
-$header-bg: $content-bg;
-$header-separator-color: $gray-900;
 $header-height: 30px;
 
 :export {
@@ -35,6 +33,7 @@ $header-height: 30px;
   selection-outline-color: var(--dh-color-grid-selection-outline);
   selection-outline-casing-color: var(--dh-color-grid-selection-outline-casing);
   row-hover-bg: var(--dh-color-grid-row-hover-bg);
+  row-shadow-alpha: var(--dh-color-grid-row-shadow-alpha);
   selected-row-hover-bg: var(--dh-color-grid-row-hover-bg-selected);
   scroll-bar-active-selection-tick-color: var(
     --dh-color-grid-scroll-bar-active-selection-tick
diff --git a/packages/iris-grid/src/IrisGridTheme.ts b/packages/iris-grid/src/IrisGridTheme.ts
index 500dbf6ea3..967ba86022 100644
--- a/packages/iris-grid/src/IrisGridTheme.ts
+++ b/packages/iris-grid/src/IrisGridTheme.ts
@@ -131,6 +131,8 @@ export function createDefaultIrisGridTheme(): Partial<IrisGridThemeType> {
     reverseHeaderBarHeight: 4,
     filterBarHorizontalPadding: 4,
 
+    shadowAlpha: parseFloat(IrisGridTheme['row-shadow-alpha']) || 0.15,
+
     // Amount of blur to apply to the bottom of the scrim while animating in
     scrimBlurSize: 25,
     minScrimTransitionTime: 150,
diff --git a/packages/iris-grid/src/PendingDataBottomBar.scss b/packages/iris-grid/src/PendingDataBottomBar.scss
index 522a3e4e1a..5108b0c648 100644
--- a/packages/iris-grid/src/PendingDataBottomBar.scss
+++ b/packages/iris-grid/src/PendingDataBottomBar.scss
@@ -1,14 +1,5 @@
 @import '@deephaven/components/scss/custom.scss';
 
 .pending-data-bottom-bar {
-  background-color: $content-bg;
-  .buttons-container {
-    .btn-outline-primary {
-      color: $gray-100;
-      border-color: $gray-100;
-      &:hover {
-        background-color: $danger-hover;
-      }
-    }
-  }
+  background-color: var(--dh-color-surface-bg);
 }
diff --git a/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap b/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap
index 7a2e0cc4d5..d14066fdff 100644
--- a/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap
+++ b/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap
@@ -81,6 +81,7 @@ exports[`createDefaultIrisGridTheme should derive the default Iris grid theme 1`
   "selectionColor": "IrisGridTheme['selection-color']",
   "selectionOutlineCasingColor": "IrisGridTheme['selection-outline-casing-color']",
   "selectionOutlineColor": "IrisGridTheme['selection-outline-color']",
+  "shadowAlpha": 0.15,
   "sortHeaderBarHeight": 2,
   "textColor": "IrisGridTheme['text-color']",
   "treeLineColor": "IrisGridTheme['tree-line-color']",
diff --git a/packages/iris-grid/src/mousehandlers/IrisGridContextMenuHandler.scss b/packages/iris-grid/src/mousehandlers/IrisGridContextMenuHandler.scss
index 72654263eb..db5e3cf4b9 100644
--- a/packages/iris-grid/src/mousehandlers/IrisGridContextMenuHandler.scss
+++ b/packages/iris-grid/src/mousehandlers/IrisGridContextMenuHandler.scss
@@ -4,7 +4,7 @@ $padding-x: 2rem;
 
 .iris-grid-filter-menu-item-value {
   user-select: none;
-  background: $content-bg;
+  background: var(--dh-color-surface-bg);
   border-radius: $border-radius $border-radius 0 0;
   padding: $input-btn-padding-y $padding-x;
   text-overflow: ellipsis;
diff --git a/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss b/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss
index d966a53f70..65c1c987c9 100644
--- a/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss
+++ b/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss
@@ -1,6 +1,6 @@
 @import '@deephaven/components/scss/custom.scss';
 
-$background: $gray-700;
+$background: var(--dh-surface-bg);
 
 .custom-column-builder-container {
   .section-title {
diff --git a/packages/iris-grid/src/sidebar/CustomColumnBuilder.tsx b/packages/iris-grid/src/sidebar/CustomColumnBuilder.tsx
index 491c3e21c0..ac32679873 100644
--- a/packages/iris-grid/src/sidebar/CustomColumnBuilder.tsx
+++ b/packages/iris-grid/src/sidebar/CustomColumnBuilder.tsx
@@ -365,6 +365,7 @@ class CustomColumnBuilder extends Component<
           !areNamesUnique
         }
         onClick={this.handleSaveClick}
+        icon={isSuccessShowing ? vsPass : undefined}
       >
         {isCustomColumnApplying && (
           <span>
@@ -373,11 +374,7 @@ class CustomColumnBuilder extends Component<
           </span>
         )}
         {!isSuccessShowing && !isCustomColumnApplying && saveText}
-        {isSuccessShowing && (
-          <>
-            <FontAwesomeIcon icon={vsPass} /> Success
-          </>
-        )}
+        {isSuccessShowing && 'Success'}
       </Button>
     );
   }
diff --git a/packages/iris-grid/src/sidebar/RollupRows.scss b/packages/iris-grid/src/sidebar/RollupRows.scss
index 6c67222732..b479909824 100644
--- a/packages/iris-grid/src/sidebar/RollupRows.scss
+++ b/packages/iris-grid/src/sidebar/RollupRows.scss
@@ -1,6 +1,5 @@
 @import '@deephaven/components/scss/custom.scss';
 
-$draggable-item-hover-bg: $secondary;
 $draggable-item-selected-bg: hsla(var(--dh-color-accent-hsl), 0.4);
 $draggable-item-selected-hover-bg: $primary;
 $draggable-item-border: $input-border-width solid transparent;
@@ -53,7 +52,7 @@ $row-selected-bg-color: hsla(var(--dh-color-accent-hsl), 0.4);
   .bottom-menu {
     margin-left: 0;
     padding-left: $spacer-2;
-    border-top: 1px solid $background;
+    border-top: 1px solid var(--dh-color-hr);
     padding-top: $spacer-2;
     .custom-checkbox {
       font-size: smaller;
@@ -81,6 +80,7 @@ $row-selected-bg-color: hsla(var(--dh-color-accent-hsl), 0.4);
     }
 
     .btn-delete-grouping {
+      height: 26px;
       margin-right: $spacer-2;
       padding: 0 $spacer-2;
     }
@@ -96,7 +96,7 @@ $row-selected-bg-color: hsla(var(--dh-color-accent-hsl), 0.4);
   .rollup-rows-available-columns {
     display: flex;
     flex-direction: column;
-    background-color: $gray-700;
+    background-color: var(--dh-color-surface);
     flex-grow: 1;
     .draggable-item-list {
       flex-grow: 1;
diff --git a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.scss b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.scss
index 71ff82c5c6..535411b1b0 100644
--- a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.scss
+++ b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.scss
@@ -12,7 +12,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background-color: $content-bg;
+    background-color: var(--dh-color-gray-300);
     padding: $spacer-1 $spacer-2;
     z-index: 2;
 
@@ -36,9 +36,12 @@
     overflow-y: auto;
     flex-grow: 1;
 
+    .btn {
+      height: 28px;
+    }
+
     hr {
       margin: $spacer-2 0;
-      background-color: $content-bg;
     }
   }
 
diff --git a/packages/jsapi-bootstrap/src/ApiBootstrap.tsx b/packages/jsapi-bootstrap/src/ApiBootstrap.tsx
index cd287e95b7..1ed246af13 100644
--- a/packages/jsapi-bootstrap/src/ApiBootstrap.tsx
+++ b/packages/jsapi-bootstrap/src/ApiBootstrap.tsx
@@ -66,7 +66,7 @@ export function ApiBootstrap({
   if (api == null) {
     return (
       failureElement ?? (
-        <Modal isOpen className="modal-dialog-centered theme-bg-light">
+        <Modal isOpen className="modal-dialog-centered">
           <ModalHeader closeButton={false}>
             Error: Unable to load API
           </ModalHeader>
diff --git a/tests/context-menu.spec.ts-snapshots/go-to-1-chromium-linux.png b/tests/context-menu.spec.ts-snapshots/go-to-1-chromium-linux.png
index a606be93f9..68aa565c63 100644
Binary files a/tests/context-menu.spec.ts-snapshots/go-to-1-chromium-linux.png and b/tests/context-menu.spec.ts-snapshots/go-to-1-chromium-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/go-to-1-firefox-linux.png b/tests/context-menu.spec.ts-snapshots/go-to-1-firefox-linux.png
index cd5b9b731b..0e77b5d320 100644
Binary files a/tests/context-menu.spec.ts-snapshots/go-to-1-firefox-linux.png and b/tests/context-menu.spec.ts-snapshots/go-to-1-firefox-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/go-to-1-webkit-linux.png b/tests/context-menu.spec.ts-snapshots/go-to-1-webkit-linux.png
index a03b0178a4..e0cb86844f 100644
Binary files a/tests/context-menu.spec.ts-snapshots/go-to-1-webkit-linux.png and b/tests/context-menu.spec.ts-snapshots/go-to-1-webkit-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/go-to-2-chromium-linux.png b/tests/context-menu.spec.ts-snapshots/go-to-2-chromium-linux.png
index dfe4769496..26f97185e9 100644
Binary files a/tests/context-menu.spec.ts-snapshots/go-to-2-chromium-linux.png and b/tests/context-menu.spec.ts-snapshots/go-to-2-chromium-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/go-to-2-firefox-linux.png b/tests/context-menu.spec.ts-snapshots/go-to-2-firefox-linux.png
index b73f7e07f5..0ec7bcf3a6 100644
Binary files a/tests/context-menu.spec.ts-snapshots/go-to-2-firefox-linux.png and b/tests/context-menu.spec.ts-snapshots/go-to-2-firefox-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/go-to-2-webkit-linux.png b/tests/context-menu.spec.ts-snapshots/go-to-2-webkit-linux.png
index 8171655b55..915792efbd 100644
Binary files a/tests/context-menu.spec.ts-snapshots/go-to-2-webkit-linux.png and b/tests/context-menu.spec.ts-snapshots/go-to-2-webkit-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/go-to-3-chromium-linux.png b/tests/context-menu.spec.ts-snapshots/go-to-3-chromium-linux.png
index f5924572c6..621833b864 100644
Binary files a/tests/context-menu.spec.ts-snapshots/go-to-3-chromium-linux.png and b/tests/context-menu.spec.ts-snapshots/go-to-3-chromium-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/go-to-3-firefox-linux.png b/tests/context-menu.spec.ts-snapshots/go-to-3-firefox-linux.png
index 6db8ae27fa..ba9ce95c7c 100644
Binary files a/tests/context-menu.spec.ts-snapshots/go-to-3-firefox-linux.png and b/tests/context-menu.spec.ts-snapshots/go-to-3-firefox-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/go-to-3-webkit-linux.png b/tests/context-menu.spec.ts-snapshots/go-to-3-webkit-linux.png
index b0a24d9942..17b1db9ad2 100644
Binary files a/tests/context-menu.spec.ts-snapshots/go-to-3-webkit-linux.png and b/tests/context-menu.spec.ts-snapshots/go-to-3-webkit-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-chromium-linux.png b/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-chromium-linux.png
index db3046f3fc..3162ed537f 100644
Binary files a/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-chromium-linux.png and b/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-chromium-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-firefox-linux.png b/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-firefox-linux.png
index 5f922a31ec..484ad610d3 100644
Binary files a/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-firefox-linux.png and b/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-firefox-linux.png differ
diff --git a/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-webkit-linux.png b/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-webkit-linux.png
index 52890e87c6..3d9efde3ba 100644
Binary files a/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-webkit-linux.png and b/tests/context-menu.spec.ts-snapshots/quick-filter-and-clear-1-webkit-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-chromium-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-chromium-linux.png
index ec9fb84c97..2f74a0a57c 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-chromium-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-chromium-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-firefox-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-firefox-linux.png
index 5f4eafb4cc..8d10c33d45 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-firefox-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-firefox-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-webkit-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-webkit-linux.png
index b9d6ba39fa..5a5a92385c 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-webkit-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-webkit-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-chromium-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-chromium-linux.png
index 12f5914ec7..f7a6197206 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-chromium-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-chromium-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-firefox-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-firefox-linux.png
index 70e37cc183..38edb8ad50 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-firefox-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-firefox-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-webkit-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-webkit-linux.png
index a40895cb30..84f5e9ee40 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-webkit-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-chromium-linux.png
index 0b609edc05..3a75e13f57 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-firefox-linux.png
index 9a030208ff..a20babdc54 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-webkit-linux.png
index c7465d4023..ed8acb47b2 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-0-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-chromium-linux.png
index bf5a0c90d9..cb5f99cca5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-firefox-linux.png
index 36533346ad..be35b55f4a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-webkit-linux.png
index 3ed72e4b46..decb45c79e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-1-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-chromium-linux.png
index 733e370138..52cbff1a10 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-firefox-linux.png
index e7c1d47f6b..49955cf719 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-webkit-linux.png
index a3c2c39fa7..b900362d1a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-2-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-chromium-linux.png
index 5c8f149355..fbcac4036b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-firefox-linux.png
index dd7d0737ee..0b37137cd5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-webkit-linux.png
index 58cf06a4c2..096349818c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-3-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-chromium-linux.png
index 739c0c6f95..495ce5e595 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-firefox-linux.png
index f7bf6e81ea..f2dfe0ed7b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-webkit-linux.png
index 49cb687d0c..9eb40fbe48 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-4-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-chromium-linux.png
index b94fc9662f..cf0d12a767 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-firefox-linux.png
index 4b3d57e4cd..a6da2fdfcf 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-webkit-linux.png
index 51bf3a7d5a..3355d21f8f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-0-5-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-chromium-linux.png
index ee9c18371a..8527c706ce 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-firefox-linux.png
index cda09bf854..26ccdc6d60 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-webkit-linux.png
index 50d1a71796..d4d6a22076 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-0-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-chromium-linux.png
index 0f35b4150e..832fa95ebd 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-firefox-linux.png
index 9b5cb8ceb4..d90a8c868f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-webkit-linux.png
index 046acb571e..a8a8356a2b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-1-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-chromium-linux.png
index befefab9bd..c049aaf0c4 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-firefox-linux.png
index 0df4718f08..d4754f2a57 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-webkit-linux.png
index ed1c1d92e1..9ae00d471e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-2-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-chromium-linux.png
index 8ac60f19b6..c3e2f80502 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-firefox-linux.png
index eedd750311..bcfcf7380f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-webkit-linux.png
index 3ece4a2bfc..2340cf6323 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-3-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-chromium-linux.png
index c6cada27b5..316ba09163 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-firefox-linux.png
index a9ef545078..cdab0924d8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-webkit-linux.png
index 1355184c95..2833f878c9 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-4-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-chromium-linux.png
index cff6a2047c..db3e0fb189 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-firefox-linux.png
index 740ffd19a6..45217feb41 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-webkit-linux.png
index c833995b03..715f924453 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-1-5-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-chromium-linux.png
index 4e8ddc2c6c..75465a5946 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-firefox-linux.png
index 92b0e1f28b..2bd8929802 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-webkit-linux.png
index a6f44d377f..6d04c4fcf6 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-0-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-chromium-linux.png
index 7016736154..85b3fc0d9e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-firefox-linux.png
index 77e9995ddd..0244d2fdc4 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-webkit-linux.png
index 00a8f376eb..83f3b7ed6b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-1-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-chromium-linux.png
index c47606d51b..be93adb173 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-firefox-linux.png
index 28d2879ded..9c6412e3ac 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-webkit-linux.png
index 6e7d370bb7..32acdef546 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-2-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-chromium-linux.png
index b467bedf63..e47e145570 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-firefox-linux.png
index f317443e27..6fc19fa45e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-webkit-linux.png
index bc44bfbabe..e7e5143175 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-3-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-chromium-linux.png
index 3bfdb91de3..bdea13c4ea 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-firefox-linux.png
index 4cfad1962e..7ca2df656b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-webkit-linux.png
index 8e050bf932..08b6c1ccdf 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-4-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-chromium-linux.png
index 93dc50de9d..336609392c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-firefox-linux.png
index 7b032c6497..270b0311b6 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-webkit-linux.png
index 6c94bd36b4..fdbf3043c5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-5-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-chromium-linux.png
index e784f39e28..c16697a75d 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-firefox-linux.png
index 58e3975e64..0ca6e1a094 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-webkit-linux.png
index 8e9721c9d8..d0983a25c3 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-2-6-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-chromium-linux.png
index c1ddef4579..4f6361d40e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-firefox-linux.png
index d9889bd166..c13641c116 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-webkit-linux.png
index 3b9474ed89..fbad028c9e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-0-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-chromium-linux.png
index 48d5a5cc86..635e177199 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-firefox-linux.png
index 61ac31c967..f44b93c77f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-webkit-linux.png
index 6989139417..d7f589c553 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-1-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-chromium-linux.png
index 00ca07d0c8..ccb533482a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-firefox-linux.png
index 8eca58614f..d030ce8db4 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-webkit-linux.png
index 9e6b0a7bef..7844c6d7cd 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-2-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-chromium-linux.png
index b824bb94df..e67214de7e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-firefox-linux.png
index 14979aba10..7812446851 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-webkit-linux.png
index 5e06480859..9a52b0e4cd 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-3-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-chromium-linux.png
index 6764f08580..14dac0663a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-firefox-linux.png
index 7d4d9aff6c..660436943a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-webkit-linux.png
index a61ceb7e9b..599cacfc03 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-focus-section-3-4-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-chromium-linux.png
index 1783f08c1e..0795e514cf 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-firefox-linux.png
index 052d2843b8..9d847f4eff 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-webkit-linux.png
index 9a24d4de80..c206566506 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-chromium-linux.png
index e40661e498..7000dd760b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-firefox-linux.png
index 45dcf40ba1..291353b938 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-webkit-linux.png
index 2b15462d38..792f0ede79 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-1-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-chromium-linux.png
index e1077a8ff4..134e2122f0 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-firefox-linux.png
index 206462cbcb..7c56ae8e4e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-webkit-linux.png
index 9caf3a776c..c5357601d8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-2-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-chromium-linux.png
index c0badfb7f1..dd4bd97f21 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-firefox-linux.png
index f82aef2e55..ae7947c769 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-webkit-linux.png
index 71ec87a040..bfe635e559 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-3-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-chromium-linux.png
index 6fc80c0aa5..423d208db4 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-firefox-linux.png
index a56086ab02..7f9e88f1a7 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-webkit-linux.png
index a1740a506a..3aea567b44 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-4-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-chromium-linux.png
index d2627bf18d..76117fb7ec 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-firefox-linux.png
index 317ec3ac5f..4d8bfb7439 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-webkit-linux.png
index 3131b259ec..f8abb4602b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-5-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-chromium-linux.png
index a9a2edd78e..b0fde2fcd4 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-firefox-linux.png
index 50cb5a2987..39404809d8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-webkit-linux.png
index 74df8c5708..5fd52ab54d 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-0-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-chromium-linux.png
index baf5ee294e..20fdc942dd 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-firefox-linux.png
index 77f45ccb91..7421834004 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-webkit-linux.png
index 1bf3fd37cb..23cfe3b482 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-1-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-chromium-linux.png
index 06443f788f..2698c0f2df 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-firefox-linux.png
index bf2a1ea0d7..aac1ed4c47 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-webkit-linux.png
index 873a300c82..33aad51840 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-2-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-chromium-linux.png
index 40fc6010d1..4837f03d2a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-firefox-linux.png
index 597e42dfe4..b3d9940e27 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-webkit-linux.png
index e8447e7c3d..de49e17134 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-3-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-chromium-linux.png
index 745b7f9b8a..a2efd45862 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-firefox-linux.png
index eb6d53a5d9..4db8d8e6f0 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-webkit-linux.png
index 8337cf485b..4a241d9406 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-4-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-chromium-linux.png
index 6ae822c9b0..4388f54e22 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-firefox-linux.png
index 05c30a5547..e1698034c9 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-webkit-linux.png
index 96239f22e6..9e70590612 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-1-5-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-chromium-linux.png
index 9106e9490b..741b764e83 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-firefox-linux.png
index a35f744347..83e866c8b6 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-webkit-linux.png
index 48aecc4290..ac6ac9c49d 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-0-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-chromium-linux.png
index 1fa26f0db9..2ef3ff23a9 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-firefox-linux.png
index ca3bdbac48..254ecda92d 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-webkit-linux.png
index aec52610c4..af909d1728 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-1-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-chromium-linux.png
index c47606d51b..be93adb173 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-firefox-linux.png
index 28d2879ded..9c6412e3ac 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-webkit-linux.png
index 6e7d370bb7..32acdef546 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-2-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-chromium-linux.png
index 7f9953b1a8..f4e61cc0a7 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-firefox-linux.png
index 756b4c0010..30753df0a4 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-webkit-linux.png
index 325538bd4a..6cc6bc4756 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-3-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-chromium-linux.png
index 8a0d74f321..1824acf889 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-firefox-linux.png
index 9820980afa..2e9090a538 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-webkit-linux.png
index 52a459657f..3b8444801e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-4-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-chromium-linux.png
index 19626a67ef..81fbd27ec8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-firefox-linux.png
index a9873506ed..03c43d30e1 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-webkit-linux.png
index 3ae2824872..5115fd9138 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-5-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-chromium-linux.png
index fe2f62b2e8..936a84e339 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-firefox-linux.png
index ab46a8e37e..c48e7cc274 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-webkit-linux.png
index 6ed1efb768..6f5b380011 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-2-6-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-chromium-linux.png
index 0d6323fe05..111d53e7bd 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-firefox-linux.png
index d169777d5f..9fa7c3c8d1 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-webkit-linux.png
index f743a35a2c..39f2c6d2ff 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-0-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-chromium-linux.png
index 27376e2972..ea0171acaf 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-firefox-linux.png
index 5255e61e9d..01247d0a06 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-webkit-linux.png
index 93741b76ef..712c68a3dd 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-1-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-chromium-linux.png
index f096b00fa7..434e065c3a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-firefox-linux.png
index 5a2d3ceacf..d340acd348 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-webkit-linux.png
index 3ef1a43ffa..f927ab37ab 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-2-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-chromium-linux.png
index da4787a3d5..771872da11 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-firefox-linux.png
index 09eea21d61..a0709c7662 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-webkit-linux.png
index 9796f85445..786522b189 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-3-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-chromium-linux.png
index 6764f08580..14dac0663a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-firefox-linux.png
index 7d4d9aff6c..660436943a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-webkit-linux.png
index a61ceb7e9b..599cacfc03 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-3-4-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-inline-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-inline-chromium-linux.png
index c47606d51b..be93adb173 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-inline-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-inline-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-inline-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-inline-firefox-linux.png
index 28d2879ded..9c6412e3ac 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-inline-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-inline-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-inline-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-inline-webkit-linux.png
index 6e7d370bb7..32acdef546 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-inline-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-inline-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-outline-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-outline-chromium-linux.png
index 7f26b8e7ef..35c52c758c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-outline-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-outline-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-outline-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-outline-firefox-linux.png
index 7f6b7cd9fa..8e3934055b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-outline-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-outline-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-outline-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-outline-webkit-linux.png
index a6d00607ba..a2e94830ef 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-outline-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-outline-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-regular-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-regular-chromium-linux.png
index 6950bdca01..5b84c4e49f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-regular-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-regular-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-regular-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-regular-firefox-linux.png
index 565b1ccab3..cde76b716e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-regular-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-regular-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-regular-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-regular-webkit-linux.png
index 05dec7bd38..fad96a1f8f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-regular-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-regular-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-socketed-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-socketed-chromium-linux.png
index 583d009018..375b313f3f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-socketed-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-socketed-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-socketed-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-socketed-firefox-linux.png
index 7d4d9aff6c..660436943a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-socketed-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-socketed-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/buttons-socketed-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-socketed-webkit-linux.png
index a61ceb7e9b..599cacfc03 100644
Binary files a/tests/styleguide.spec.ts-snapshots/buttons-socketed-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/buttons-socketed-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/chart-colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/chart-colors-chromium-linux.png
index 42c7cc5950..83f6a15ae5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/chart-colors-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/chart-colors-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/chart-colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/chart-colors-firefox-linux.png
index cc738b91ea..541fa63bfb 100644
Binary files a/tests/styleguide.spec.ts-snapshots/chart-colors-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/chart-colors-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/chart-colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/chart-colors-webkit-linux.png
index 711bbef38a..200c6f71f1 100644
Binary files a/tests/styleguide.spec.ts-snapshots/chart-colors-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/chart-colors-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png
index f278fd200d..f92d80b4d6 100644
Binary files a/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png
index c79e7f35a6..87c8f51dc5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png
index 7e2608bd4b..743dbb5c6a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/context-menus-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/context-menus-chromium-linux.png
index 72629eb4ae..c1952251d7 100644
Binary files a/tests/styleguide.spec.ts-snapshots/context-menus-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/context-menus-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/context-menus-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/context-menus-firefox-linux.png
index 16c7aeb677..529b390512 100644
Binary files a/tests/styleguide.spec.ts-snapshots/context-menus-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/context-menus-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/context-menus-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/context-menus-webkit-linux.png
index f1e64311ae..2a0d86974e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/context-menus-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/context-menus-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/dialog-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/dialog-chromium-linux.png
index 30d011eb1a..036ae50e90 100644
Binary files a/tests/styleguide.spec.ts-snapshots/dialog-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/dialog-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/dialog-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/dialog-firefox-linux.png
index 30b8494be4..c800fcc907 100644
Binary files a/tests/styleguide.spec.ts-snapshots/dialog-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/dialog-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/dialog-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/dialog-webkit-linux.png
index 70ce6b9d02..4a4807969a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/dialog-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/dialog-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/draggable-lists-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/draggable-lists-chromium-linux.png
index 7d5f94bfc5..eb70593245 100644
Binary files a/tests/styleguide.spec.ts-snapshots/draggable-lists-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/draggable-lists-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/draggable-lists-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/draggable-lists-firefox-linux.png
index 6385d5dc37..f451925e92 100644
Binary files a/tests/styleguide.spec.ts-snapshots/draggable-lists-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/draggable-lists-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/draggable-lists-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/draggable-lists-webkit-linux.png
index 02cc73461a..1ce360f800 100644
Binary files a/tests/styleguide.spec.ts-snapshots/draggable-lists-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/draggable-lists-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/dropdown-menus-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/dropdown-menus-chromium-linux.png
index 598e950efd..d2b02ab04a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/dropdown-menus-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/dropdown-menus-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/dropdown-menus-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/dropdown-menus-firefox-linux.png
index 82de5c7f7e..c5baa1190a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/dropdown-menus-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/dropdown-menus-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/dropdown-menus-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/dropdown-menus-webkit-linux.png
index ae18a900da..8f3c67baee 100644
Binary files a/tests/styleguide.spec.ts-snapshots/dropdown-menus-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/dropdown-menus-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/editor-colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/editor-colors-chromium-linux.png
index 52b0f86bb4..3dfc5095be 100644
Binary files a/tests/styleguide.spec.ts-snapshots/editor-colors-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/editor-colors-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/editor-colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/editor-colors-firefox-linux.png
index 003cac2f68..1b1dba668a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/editor-colors-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/editor-colors-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/editor-colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/editor-colors-webkit-linux.png
index a93f5dcdc2..5bfabe6da5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/editor-colors-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/editor-colors-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/grid-colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/grid-colors-chromium-linux.png
index cb10ea5fe3..682e32fe35 100644
Binary files a/tests/styleguide.spec.ts-snapshots/grid-colors-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/grid-colors-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/grid-colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/grid-colors-firefox-linux.png
index c19b3f6d87..191d64161f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/grid-colors-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/grid-colors-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/grid-colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/grid-colors-webkit-linux.png
index e6c7ebd74d..f84448fa18 100644
Binary files a/tests/styleguide.spec.ts-snapshots/grid-colors-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/grid-colors-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/grids-iris-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/grids-iris-chromium-linux.png
index 888252751a..78bca02749 100644
Binary files a/tests/styleguide.spec.ts-snapshots/grids-iris-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/grids-iris-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/grids-iris-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/grids-iris-firefox-linux.png
index 433f6505c3..dddaa27961 100644
Binary files a/tests/styleguide.spec.ts-snapshots/grids-iris-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/grids-iris-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/grids-iris-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/grids-iris-webkit-linux.png
index 0b285027ce..aa45fb75b8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/grids-iris-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/grids-iris-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/icons-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/icons-chromium-linux.png
index 9e43438864..edd3785def 100644
Binary files a/tests/styleguide.spec.ts-snapshots/icons-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/icons-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/icons-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/icons-firefox-linux.png
index 8c5e8ffb0d..9b04eff067 100644
Binary files a/tests/styleguide.spec.ts-snapshots/icons-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/icons-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/icons-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/icons-webkit-linux.png
index d24d74690b..b5722d22a0 100644
Binary files a/tests/styleguide.spec.ts-snapshots/icons-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/icons-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-chromium-linux.png
index 52eac2d510..bac87228fa 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-firefox-linux.png
index 813b8a3023..240727be85 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-chromium-linux.png
index d5c6ff8f56..ba61257cbd 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-firefox-linux.png
index b9091cd68a..997d356178 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-webkit-linux.png
index 55b0b0f1a3..e882735e86 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row0-text-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-chromium-linux.png
index c8145c1955..03c9a135e4 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-firefox-linux.png
index 066852a0ab..4ad7a64d53 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-webkit-linux.png
index 2319832da0..b9cc2706d3 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row1-text-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-chromium-linux.png
index ecfc07e781..9298095f9e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-firefox-linux.png
index e3ffbd4f4d..88a33b3fda 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-webkit-linux.png
index 4aaf8f3c0a..959f1a604b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row2-password-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-chromium-linux.png
index 0bc8526633..98429ba7c5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-firefox-linux.png
index fb6c362abf..1259b0d130 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-webkit-linux.png
index 973676e04e..4ef970fd1c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col0-row3-search-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-chromium-linux.png
index d9638c169e..6a771e722d 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-firefox-linux.png
index 476eb3d463..293cf85959 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-webkit-linux.png
index 13192ca843..82a88d61a7 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-chromium-linux.png
index 099bd363a0..03a5b0f809 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-firefox-linux.png
index 94ed20c8d0..02c9ea8625 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-webkit-linux.png
index 629dd6be6b..3de0fc1f30 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row1-checkbox-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-chromium-linux.png
index 21bcd0ca1d..2807e282c2 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-firefox-linux.png
index 5a0d5c54e3..5bd9084153 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-webkit-linux.png
index 245dbdf5cb..8f486d2db5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row2-checkbox-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-chromium-linux.png
index 6bbb4d3227..1a44078ad0 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-firefox-linux.png
index ab61255c05..2f995defd9 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-webkit-linux.png
index 27c5ae806d..b1f88c05b9 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row3-checkbox-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-chromium-linux.png
index 0817723fe6..f455ecf0e0 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-firefox-linux.png
index e547d6f79a..5170578e69 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-webkit-linux.png
index 22ac1ff869..f431b6a88b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row4-checkbox-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-chromium-linux.png
index 9aafea82c6..fc45275c4a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-firefox-linux.png
index ad00c0739a..c20bb9a944 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-webkit-linux.png
index 3400173fa1..5774582232 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row5-checkbox-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-chromium-linux.png
index ea7943b78f..d508023af1 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-firefox-linux.png
index 8d152eae66..4143469862 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-webkit-linux.png
index 97adb217aa..cab7a98f4e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row0-radio-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-chromium-linux.png
index 0e56b2b3ef..75ddee2995 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-firefox-linux.png
index 4e9367badc..a504168581 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-webkit-linux.png
index 82ceabd434..fd8f32b612 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row1-radio-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-chromium-linux.png
index e0a811116b..c656332c29 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-firefox-linux.png
index 47b5a5a356..b7068f4d0c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-webkit-linux.png
index 6df7558124..ccf7006f3e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row2-radio-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-chromium-linux.png
index 5dd65f8158..fa2aeaea3b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-firefox-linux.png
index f1a556cb56..085e5ef50b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-webkit-linux.png
index 5395e5b9f2..b5ad7a340a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row3-radio-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-chromium-linux.png
index 2bdfee04b9..f89195166f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-firefox-linux.png
index 00660a0e04..d41d0aaa5b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-webkit-linux.png
index 4abd598606..df65d33c80 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row4-button-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-chromium-linux.png
index 795ff0780f..b23263c002 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-firefox-linux.png
index 4d2e744f1b..c9b4c2dff5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-webkit-linux.png
index d18e89ec7a..098587ff03 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row5-button-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-chromium-linux.png
index b0f44156a1..62211581a8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-firefox-linux.png
index 3dd8b34d28..7dabfca167 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-webkit-linux.png
index b1d13d1b3c..05adf132f6 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row6-button-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-chromium-linux.png
index e0a811116b..c656332c29 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-firefox-linux.png
index 47b5a5a356..b7068f4d0c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-webkit-linux.png
index 6df7558124..ccf7006f3e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col2-row7-button-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-chromium-linux.png
index e82e365965..526fc3b0cd 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-firefox-linux.png
index 9e375ae85e..6be4e3db74 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-webkit-linux.png
index b9062b272d..e02044fce7 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-chromium-linux.png
index 4ae078111b..8c17ff7f3f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-firefox-linux.png
index 4e0c192516..6b96b7daff 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-webkit-linux.png
index 65e8373bc4..dd13c8ec49 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-chromium-linux.png
index 7f7d5443c9..81b600d334 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-firefox-linux.png
index 734fc399a0..c81e54d84c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-webkit-linux.png
index ac6ff1924f..cbdc50fa51 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-text-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-chromium-linux.png
index 3eccc9fe3b..6dd16591c3 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-firefox-linux.png
index 40f8e17fa7..57e542e8e1 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-webkit-linux.png
index a788a2c074..274e1055ac 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-button-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-chromium-linux.png
index 4ae078111b..8c17ff7f3f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-firefox-linux.png
index 4e0c192516..6b96b7daff 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-webkit-linux.png
index 65e8373bc4..dd13c8ec49 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-text-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-chromium-linux.png
index 4ae078111b..8c17ff7f3f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-firefox-linux.png
index 4e0c192516..6b96b7daff 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-webkit-linux.png
index 65e8373bc4..dd13c8ec49 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-button-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-chromium-linux.png
index 5e636d43a1..611b4bf846 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-firefox-linux.png
index c5ab178979..ca68e2c44b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-webkit-linux.png
index 83ff9f8a1e..9fe6615645 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-chromium-linux.png
index fa1b852ad7..4355abc85a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-firefox-linux.png
index faea9675a0..96c0eeff6c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-webkit-linux.png
index 1a078d8bca..3471a64013 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-chromium-linux.png
index b089e6360e..1560bd6409 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-firefox-linux.png
index 32c1ed7bc2..f3351d0656 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-webkit-linux.png
index cc7a7b2b31..348b0f880b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row1-select-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-chromium-linux.png
index 9aedea3fa8..176faba2de 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-firefox-linux.png
index 9a738d2d7b..6263ae379d 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-webkit-linux.png
index c4039def7c..678ae20c8e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row2-button-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-chromium-linux.png
index 348a166847..fc86c13461 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-firefox-linux.png
index 72ba2b4505..0815d68486 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-webkit-linux.png
index e0d3c15823..22b5fac9e9 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row0-text-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-chromium-linux.png
index aaa1554448..c5884b2504 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-firefox-linux.png
index 85218ef7cc..04a4710525 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-webkit-linux.png
index c109e2bd8c..710faf7a19 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row1-text-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-chromium-linux.png
index fb4fbea32b..806b9a15c3 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-firefox-linux.png
index c6aaec4c88..db43f7cb1c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-webkit-linux.png
index 4e82a520e7..fedbddf42f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row2-text-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-chromium-linux.png
index 3e2bc7f5f6..ef7ac76aa9 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-firefox-linux.png
index 7e538fe6b2..00e3f4482f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-webkit-linux.png
index 7f1806be28..6c24158bc8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col5-row3-button-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-webkit-linux.png
index 44e8ba5a6a..ec44b8f1ea 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/item-list-inputs-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/item-list-inputs-chromium-linux.png
index 9e7530bd15..2ac55037ea 100644
Binary files a/tests/styleguide.spec.ts-snapshots/item-list-inputs-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/item-list-inputs-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/item-list-inputs-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/item-list-inputs-firefox-linux.png
index b465ca8421..fb7a0c8289 100644
Binary files a/tests/styleguide.spec.ts-snapshots/item-list-inputs-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/item-list-inputs-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/item-list-inputs-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/item-list-inputs-webkit-linux.png
index dfd8c2bdd7..e669bb48a8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/item-list-inputs-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/item-list-inputs-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/modals-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/modals-chromium-linux.png
index 7fc2d41173..11e0f3cbf8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/modals-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/modals-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/modals-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/modals-firefox-linux.png
index 54bc51eb65..37397df55f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/modals-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/modals-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/modals-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/modals-webkit-linux.png
index 27d80546c6..fe797008ba 100644
Binary files a/tests/styleguide.spec.ts-snapshots/modals-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/modals-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/navigations-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/navigations-chromium-linux.png
index 2389d4c4e0..8cb49fb269 100644
Binary files a/tests/styleguide.spec.ts-snapshots/navigations-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/navigations-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/navigations-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/navigations-firefox-linux.png
index 866387b8b5..16a3f03901 100644
Binary files a/tests/styleguide.spec.ts-snapshots/navigations-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/navigations-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/navigations-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/navigations-webkit-linux.png
index 3ede878ea3..d88fb3b4be 100644
Binary files a/tests/styleguide.spec.ts-snapshots/navigations-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/navigations-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/progress-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/progress-chromium-linux.png
index 3589b899e2..7813075adf 100644
Binary files a/tests/styleguide.spec.ts-snapshots/progress-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/progress-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/progress-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/progress-firefox-linux.png
index 503dcd4f04..a797f0c347 100644
Binary files a/tests/styleguide.spec.ts-snapshots/progress-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/progress-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/progress-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/progress-webkit-linux.png
index 110dc1601c..252dea305b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/progress-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/progress-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png
index a39bea157f..0c75c408a9 100644
Binary files a/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png
index bcbf4d72bd..82edf486bc 100644
Binary files a/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png
index 10ab4b9965..8eeb19fc6f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/spectrum-collections-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/spectrum-collections-chromium-linux.png
index e5dbb17e17..2a7b008750 100644
Binary files a/tests/styleguide.spec.ts-snapshots/spectrum-collections-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/spectrum-collections-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/spectrum-collections-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/spectrum-collections-firefox-linux.png
index 5adf8fdf42..aef05c8cff 100644
Binary files a/tests/styleguide.spec.ts-snapshots/spectrum-collections-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/spectrum-collections-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/spectrum-collections-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/spectrum-collections-webkit-linux.png
index 1cb3104feb..459ce6d6bd 100644
Binary files a/tests/styleguide.spec.ts-snapshots/spectrum-collections-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/spectrum-collections-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/spectrum-forms-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/spectrum-forms-chromium-linux.png
index 934c002292..bf7b968069 100644
Binary files a/tests/styleguide.spec.ts-snapshots/spectrum-forms-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/spectrum-forms-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/spectrum-forms-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/spectrum-forms-firefox-linux.png
index b50de3b683..bf0929e064 100644
Binary files a/tests/styleguide.spec.ts-snapshots/spectrum-forms-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/spectrum-forms-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/spectrum-forms-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/spectrum-forms-webkit-linux.png
index ba986958cb..1c9cc2ab41 100644
Binary files a/tests/styleguide.spec.ts-snapshots/spectrum-forms-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/spectrum-forms-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/spectrum-overlays-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/spectrum-overlays-chromium-linux.png
index 0262e02a00..475ac210af 100644
Binary files a/tests/styleguide.spec.ts-snapshots/spectrum-overlays-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/spectrum-overlays-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/spectrum-overlays-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/spectrum-overlays-firefox-linux.png
index 3216e1f965..d73b025db7 100644
Binary files a/tests/styleguide.spec.ts-snapshots/spectrum-overlays-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/spectrum-overlays-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/spectrum-overlays-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/spectrum-overlays-webkit-linux.png
index 8456cc715f..56535d7dc0 100644
Binary files a/tests/styleguide.spec.ts-snapshots/spectrum-overlays-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/spectrum-overlays-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/theme-color-palette-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/theme-color-palette-chromium-linux.png
index 903034ed7f..d9174dcefe 100644
Binary files a/tests/styleguide.spec.ts-snapshots/theme-color-palette-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/theme-color-palette-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/theme-color-palette-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/theme-color-palette-firefox-linux.png
index ec61141fd9..44a046be01 100644
Binary files a/tests/styleguide.spec.ts-snapshots/theme-color-palette-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/theme-color-palette-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/theme-color-palette-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/theme-color-palette-webkit-linux.png
index 47b455f580..23eec8aced 100644
Binary files a/tests/styleguide.spec.ts-snapshots/theme-color-palette-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/theme-color-palette-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/time-slider-inputs-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/time-slider-inputs-chromium-linux.png
index 464328d216..8331bbffd8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/time-slider-inputs-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/time-slider-inputs-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/time-slider-inputs-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/time-slider-inputs-firefox-linux.png
index 923003237b..3fab9e8bbf 100644
Binary files a/tests/styleguide.spec.ts-snapshots/time-slider-inputs-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/time-slider-inputs-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/time-slider-inputs-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/time-slider-inputs-webkit-linux.png
index df397a5c9a..1308415c8b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/time-slider-inputs-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/time-slider-inputs-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/tooltips-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/tooltips-chromium-linux.png
index c7d3bbfe0d..59e70522f9 100644
Binary files a/tests/styleguide.spec.ts-snapshots/tooltips-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/tooltips-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/tooltips-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/tooltips-firefox-linux.png
index b125e1dd0d..5d12b4e815 100644
Binary files a/tests/styleguide.spec.ts-snapshots/tooltips-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/tooltips-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/tooltips-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/tooltips-webkit-linux.png
index 1f72038c72..dbc5c7cde7 100644
Binary files a/tests/styleguide.spec.ts-snapshots/tooltips-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/tooltips-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts b/tests/table-operations.spec.ts
index 433eb21ac9..61e01d699b 100644
--- a/tests/table-operations.spec.ts
+++ b/tests/table-operations.spec.ts
@@ -252,6 +252,9 @@ test('organize columns', async ({ page }) => {
     await page.getByPlaceholder('Search').click();
     await page.keyboard.type('dou');
 
+    // https://github.com/microsoft/playwright/issues/20203
+    await page.evaluate(() => document.fonts.ready);
+
     await expect(
       page.locator('.visibility-ordering-builder')
     ).toHaveScreenshot();
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-1-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-1-chromium-linux.png
index ffe550b0ee..1970db7d12 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-1-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-1-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-1-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-1-firefox-linux.png
index e084496223..9974ac5357 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-1-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-1-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-1-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-1-webkit-linux.png
index e19d4d3b5f..96d7c229c1 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-1-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-1-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-2-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-2-chromium-linux.png
index 65bff0a5cb..f65f63d048 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-2-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-2-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-2-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-2-firefox-linux.png
index 914ac1787b..fd0ad0125e 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-2-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-2-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-2-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-2-webkit-linux.png
index 3cf35a328f..595891c234 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-2-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-2-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-3-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-3-chromium-linux.png
index 4abec4d2a5..02a7f18451 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-3-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-3-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-3-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-3-firefox-linux.png
index 11c83b4b21..baa3d42e9d 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-3-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-3-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-3-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-3-webkit-linux.png
index c49e9c32c6..4ed18c77be 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-3-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-3-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-4-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-4-chromium-linux.png
index 352986a215..754e77e50f 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-4-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-4-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-4-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-4-firefox-linux.png
index 5e1b3079ab..d4fefee2ff 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-4-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-4-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/advanced-settings-4-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/advanced-settings-4-webkit-linux.png
index 1e00347f20..47b0d46378 100644
Binary files a/tests/table-operations.spec.ts-snapshots/advanced-settings-4-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/advanced-settings-4-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/organize-columns-1-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/organize-columns-1-chromium-linux.png
index 16d3037158..27c31b5834 100644
Binary files a/tests/table-operations.spec.ts-snapshots/organize-columns-1-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/organize-columns-1-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/organize-columns-1-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/organize-columns-1-firefox-linux.png
index f8a3c50f16..d278e0ef56 100644
Binary files a/tests/table-operations.spec.ts-snapshots/organize-columns-1-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/organize-columns-1-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/organize-columns-1-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/organize-columns-1-webkit-linux.png
index 5881320db5..2f2f349586 100644
Binary files a/tests/table-operations.spec.ts-snapshots/organize-columns-1-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/organize-columns-1-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-chromium-linux.png
index ef7b869a44..c2c8497f29 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-firefox-linux.png
index d480a2c5d7..4e4538a04a 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-webkit-linux.png
index 4642d765a5..51a9b88675 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-chromium-linux.png
index 8bdf83b996..f467ee781f 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-firefox-linux.png
index fb1855a951..77acbc37b8 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-webkit-linux.png
index 5a9b0c26dc..b17289b841 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-chromium-linux.png
index 1b55f98f53..760f32a372 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-firefox-linux.png
index 58b9498c9b..61f0df9b50 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-webkit-linux.png
index 493caa5179..5d2ad126c1 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-chromium-linux.png
index ba74ee0c0e..ea06398feb 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-firefox-linux.png
index 356f90b625..d2bf4c7373 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-webkit-linux.png
index ff3d7d7cf3..a98f6fafdb 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-chromium-linux.png
index 7a2e7019bc..c5358d4214 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-firefox-linux.png
index d86a1756d8..589dc14167 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-webkit-linux.png
index 954dd90018..79a0a7788a 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-chromium-linux.png
index 06396a043d..9de942c601 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-firefox-linux.png
index 9944b95874..aaaa87fbe4 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-webkit-linux.png
index 2384f809b8..74b5bb9737 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-chromium-linux.png
index 1251f7e1c0..0a30366dcc 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-firefox-linux.png
index 1b2e931291..8e7f94956d 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-webkit-linux.png
index e94b5764fd..17de68e1a3 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/search-1-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/search-1-chromium-linux.png
index 6166fdbeae..370086424d 100644
Binary files a/tests/table-operations.spec.ts-snapshots/search-1-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/search-1-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/search-1-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/search-1-firefox-linux.png
index 5c1744ba64..2ff2ef4c0e 100644
Binary files a/tests/table-operations.spec.ts-snapshots/search-1-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/search-1-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/search-1-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/search-1-webkit-linux.png
index 8db07eb047..c6141530c0 100644
Binary files a/tests/table-operations.spec.ts-snapshots/search-1-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/search-1-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/search-2-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/search-2-chromium-linux.png
index 00710f1dd2..61590141ac 100644
Binary files a/tests/table-operations.spec.ts-snapshots/search-2-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/search-2-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/search-2-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/search-2-firefox-linux.png
index c3d6942631..bd0405083a 100644
Binary files a/tests/table-operations.spec.ts-snapshots/search-2-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/search-2-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/search-2-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/search-2-webkit-linux.png
index db0acb64cf..4a20e09786 100644
Binary files a/tests/table-operations.spec.ts-snapshots/search-2-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/search-2-webkit-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-chromium-linux.png b/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-chromium-linux.png
index cc9a4f5cd4..59265ba033 100644
Binary files a/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-chromium-linux.png and b/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-chromium-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-firefox-linux.png b/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-firefox-linux.png
index a1e1be9f3c..5dda82bb31 100644
Binary files a/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-firefox-linux.png and b/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-firefox-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-webkit-linux.png b/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-webkit-linux.png
index 208f45af0a..1e9862c3af 100644
Binary files a/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-webkit-linux.png and b/tests/table.spec.ts-snapshots/can-make-a-non-contiguous-table-row-selection-1-webkit-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-chromium-linux.png b/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-chromium-linux.png
index ade4bac401..2d89fcda0c 100644
Binary files a/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-chromium-linux.png and b/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-chromium-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-firefox-linux.png b/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-firefox-linux.png
index ba31659f13..0cdf1faa15 100644
Binary files a/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-firefox-linux.png and b/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-firefox-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-webkit-linux.png b/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-webkit-linux.png
index 5867b3f797..0fc652705b 100644
Binary files a/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-webkit-linux.png and b/tests/table.spec.ts-snapshots/can-open-a-simple-table-1-webkit-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-chromium-linux.png b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-chromium-linux.png
index de88f42ad5..f03d048c5d 100644
Binary files a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-chromium-linux.png and b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-chromium-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-firefox-linux.png b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-firefox-linux.png
index 8006a776af..537b805ceb 100644
Binary files a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-firefox-linux.png and b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-firefox-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-webkit-linux.png b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-webkit-linux.png
index bca9a82208..51eb70ab18 100644
Binary files a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-webkit-linux.png and b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-1-webkit-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-chromium-linux.png b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-chromium-linux.png
index 2a6c889f9a..25ab811ef3 100644
Binary files a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-chromium-linux.png and b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-chromium-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-firefox-linux.png b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-firefox-linux.png
index a1c468f9a3..d55550a9f8 100644
Binary files a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-firefox-linux.png and b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-firefox-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-webkit-linux.png b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-webkit-linux.png
index eafb774e8d..9af4b51072 100644
Binary files a/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-webkit-linux.png and b/tests/table.spec.ts-snapshots/can-open-a-table-with-column-header-groups-and-hidden-columns-1-webkit-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-chromium-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-chromium-linux.png
index ce21c5ea77..1ea67ab7bd 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-chromium-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-chromium-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-firefox-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-firefox-linux.png
index 69ec70ef50..98abbbf23a 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-firefox-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-firefox-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-webkit-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-webkit-linux.png
index 1177d08a39..a01102e352 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-webkit-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-advanced-filters-1-webkit-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-chromium-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-chromium-linux.png
index 5a3c432d2b..c09b17b069 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-chromium-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-chromium-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-firefox-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-firefox-linux.png
index e24c177e67..369fcc3548 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-firefox-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-firefox-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-webkit-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-webkit-linux.png
index 95a83ac36a..fdab4795f4 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-webkit-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-webkit-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-chromium-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-chromium-linux.png
index 4a56a3774c..03760d8ea0 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-chromium-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-chromium-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-firefox-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-firefox-linux.png
index 4562e23437..d1a19f2560 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-firefox-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-firefox-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-webkit-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-webkit-linux.png
index 270787211e..def3a83af0 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-webkit-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-quick-filters-with-the-advanced-filters-in-above-test-applied-1-webkit-linux.png differ