(
-
(
+
-
- Gray-
- {swatch}
-
-
- --dh-gray-{dh}
-
-
+ {swatch === '8XX' ? 'N/A' : `Gray-${swatch}`}
+
));
- const colorSwatches = [
+ const baseColorPaletteSwatches = [
'red',
'orange',
'yellow',
@@ -40,51 +35,49 @@ function Colors(): React.ReactElement {
'purple',
'white',
'black',
+ ].map(swatch => (
+
+ {swatch}
+
+ ));
+
+ const colorSwatches = [
'content-bg',
- 'primary',
- 'primary-dark',
'background',
'foreground',
+ 'primary',
+ 'primary-dark',
+ 'primary-light',
+ 'secondary',
+ 'secondary-hover',
+ 'success',
+ 'info',
+ 'warning',
+ 'danger',
+ 'danger-hover',
].map(swatch => (
-
+
{swatch}
-
+
));
return (
Colors
-
{graySwatches}
+
+ {graySwatches}
+ {baseColorPaletteSwatches}
+
{colorSwatches}
- Gray Range is available for background/tab colors, and should cover
- the full range used in mockups. Always use the semantic color names
- in your .scss files when applicable for UI elements.
-
-
- For refrence key colors are $primary for interactable elements,
- content-bg as background. White is same as gray-200. Gray-100 is
- used when white needs an active color. content-bg is between 800 and
- 900.
+ This section is for legacy reference only. Use the css variable
+ based semantic colors in the following sections. You should not be
+ using colors defined in the theme color palette directly.
-
- {`
-// as semantic colours
-$primary: $interfaceblue;
-$secondary: $gray-600;
-$content-bg: $interfacegray;
-$foreground: $interfacewhite;
-$background: $interfaceblack;
-$success: $green;
-$info: $yellow;
-$warning: $orange;
-$danger: $red;
-`}
-
diff --git a/packages/code-studio/src/styleguide/GotoTopButton.tsx b/packages/code-studio/src/styleguide/GotoTopButton.tsx
index f51039c4f7..19cda8d234 100644
--- a/packages/code-studio/src/styleguide/GotoTopButton.tsx
+++ b/packages/code-studio/src/styleguide/GotoTopButton.tsx
@@ -20,11 +20,15 @@ export function GotoTopButton(): JSX.Element {
}, 500);
}, []);
- // Set data-scroll="true" on the html element when the user scrolls down below
- // 120px. CSS uses this to only show the button when the user has scrolled.
+ // Set data-scroll="true" on the html element when the user scrolls down to the
+ // first h2. CSS uses this to only show the button when the user has scrolled.
useEffect(() => {
+ const firstH2Top = document.querySelector('h2')?.offsetTop ?? 0;
+
function onScroll() {
- document.documentElement.dataset.scroll = String(window.scrollY > 120);
+ document.documentElement.dataset.scroll = String(
+ window.scrollY >= firstH2Top
+ );
}
document.addEventListener('scroll', onScroll, { passive: true });
return () => {
diff --git a/packages/code-studio/src/styleguide/Progress.tsx b/packages/code-studio/src/styleguide/Progress.tsx
index 04492bb8aa..61b8f6b535 100644
--- a/packages/code-studio/src/styleguide/Progress.tsx
+++ b/packages/code-studio/src/styleguide/Progress.tsx
@@ -36,7 +36,7 @@ function Progress(): React.ReactElement {
onClick={() => undefined}
>
-
+
Connecting
Cancel
diff --git a/packages/code-studio/src/styleguide/RandomAreaPlotAnimation.tsx b/packages/code-studio/src/styleguide/RandomAreaPlotAnimation.tsx
new file mode 100644
index 0000000000..9c74b62e1b
--- /dev/null
+++ b/packages/code-studio/src/styleguide/RandomAreaPlotAnimation.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { View } from '@adobe/react-spectrum';
+import { RandomAreaPlotAnimation as Animation } from '@deephaven/components';
+import { sampleSectionIdAndClasses } from './utils';
+
+export function RandomAreaPlotAnimation(): JSX.Element {
+ return (
+
+ );
+}
+
+export default RandomAreaPlotAnimation;
diff --git a/packages/code-studio/src/styleguide/StyleGuide.scss b/packages/code-studio/src/styleguide/StyleGuide.scss
index 98f7abbbda..6cba5e0b85 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.scss
+++ b/packages/code-studio/src/styleguide/StyleGuide.scss
@@ -1,7 +1,9 @@
+@use 'sass:map';
+@use 'sass:string';
@import '@deephaven/components/scss/custom.scss';
.ui-title {
- color: $gray-200;
+ color: var(--dh-color-text);
border-bottom: 1px solid $gray-200;
padding-bottom: 10px;
margin: 1.5rem 0;
@@ -25,13 +27,12 @@ pre {
}
}
-.swatch-content-bg {
- border: 1px solid $gray-600;
+@mixin swatch-with-label($label) {
margin-top: 2.5rem;
position: relative;
-
&::before {
- content: 'Semantic Colours';
+ content: '#{$label}';
+ color: var(--dh-color-text);
display: block;
position: absolute;
font-size: 10px;
@@ -39,32 +40,82 @@ pre {
}
}
-@each $theme-color, $value in $theme-colors {
- .swatch-#{$theme-color} {
- color: color-yiq($value);
- background-color: #{$value};
+@mixin swatch-color($color, $value, $class-prefix: 'swatch') {
+ // Expose value in :after content to make use of it in style guide
+ $exposed-value: #{$value};
+
+ // Strip surrounding 'var(' ... ')' if present
+ @if string.index($exposed-value, 'var(') == 1 {
+ $exposed-value: string.slice($exposed-value, 5, -2);
}
-}
-@each $color, $value in $colors {
- .swatch-#{$color} {
- color: color-yiq($value);
+ .#{$class-prefix}-#{$color} {
+ display: grid;
+ grid-template-columns: 120px 1fr;
+ text-align: left;
+ white-space: nowrap;
background-color: #{$value};
+ padding: 0 20px 0 36px;
+ &::after {
+ content: '#{$exposed-value}';
+ grid-column: 2;
+ }
}
}
-@each $color, $value in $grays {
- .gray-swatch-#{$color} {
- color: color-yiq($value);
- background-color: #{$value};
+@each $color, $value in $semantic-colors {
+ @include swatch-color($color, $value);
+}
+
+@each $color, $value in $theme-colors {
+ $var: '';
+
+ $semantic-value: map.get($bootstrap-dh-semantic-map, $value) or '';
+ @if $semantic-value != '' {
+ $var: var(--dh-color-#{$semantic-value}-bg);
+ } @else if $value == 'light' {
+ $var: var(--dh-color-gray-light);
+ } @else if $value == 'dark' {
+ $var: var(--dh-color-gray-dark);
}
+
+ @include swatch-color($color, $var);
}
-.gray-swatch-850 {
- color: color-yiq($gray-850);
- background-color: $gray-850;
+// Special case swatches with labels
+.gray-swatch-100 {
+ @include swatch-with-label('Grays');
+}
+.swatch-red {
+ @include swatch-with-label('Base Colors');
+}
+.swatch-content-bg {
+ border: 1px solid $gray-600;
+ @include swatch-with-label('Semantic Colors');
+}
+.swatch-primary {
+ @include swatch-with-label('Brand Colors');
+}
+.swatch-success {
+ @include swatch-with-label('Levels');
+}
+.swatch-light {
+ @include swatch-with-label('Brightness');
}
+@each $color, $value in $colors {
+ @include swatch-color($color, $value);
+}
+
+@each $color, $value in $grays {
+ @include swatch-color($color, $value, 'gray-swatch');
+}
+
+// The swatch that gets this style gets rendered as N/A in the Bootstrap grays
+// section of Styleguide. There is no Bootstrap Gray-XXX corresponding to
+// --dh-color-gray-100, but if there were it would be a value in the 800s.
+@include swatch-color('8XX', 'var(--dh-color-gray-100)', 'gray-swatch');
+
.style-guide-container {
background-color: $content-bg;
padding: 1rem;
@@ -123,7 +174,7 @@ h5.sub-title {
flex-direction: column;
justify-content: center;
align-items: center;
- background-color: $content-bg;
+ background-color: var(--dh-color-content-bg);
border-color: transparent;
&:focus {
border-color: $primary;
diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx
index bfb3b1c556..d2c26b53c0 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.tsx
+++ b/packages/code-studio/src/styleguide/StyleGuide.tsx
@@ -3,7 +3,6 @@ import React from 'react';
import { Flex } from '@adobe/react-spectrum';
import { ContextMenuRoot, ThemePicker, useTheme } from '@deephaven/components';
-import Alerts from './Alerts';
import Buttons from './Buttons';
import Charts from './Charts';
import Colors from './Colors';
@@ -29,6 +28,7 @@ import SamplesMenu, { SampleMenuCategory } from './SamplesMenu';
import GotoTopButton from './GotoTopButton';
import { HIDE_FROM_E2E_TESTS_CLASS } from './utils';
import { GoldenLayout } from './GoldenLayout';
+import { RandomAreaPlotAnimation } from './RandomAreaPlotAnimation';
const stickyProps = {
position: 'sticky',
@@ -98,7 +98,6 @@ function StyleGuide(): React.ReactElement {
-
@@ -114,6 +113,7 @@ function StyleGuide(): React.ReactElement {
+
diff --git a/packages/code-studio/src/styleguide/Swatch.tsx b/packages/code-studio/src/styleguide/Swatch.tsx
new file mode 100644
index 0000000000..3493e320a9
--- /dev/null
+++ b/packages/code-studio/src/styleguide/Swatch.tsx
@@ -0,0 +1,52 @@
+import React, { ReactNode, useMemo } from 'react';
+import { Tooltip } from '@deephaven/components';
+import { ColorUtils } from '@deephaven/utils';
+import { INVALID_COLOR_BORDER_STYLE } from './colorUtils';
+import { useContrastFgColorRef, useDhColorFromPseudoContent } from './hooks';
+
+export interface SwatchProps {
+ className: string;
+ children: ReactNode;
+}
+
+export function Swatch({ className, children }: SwatchProps): JSX.Element {
+ const ref = useContrastFgColorRef
();
+
+ // The `swatch-color` mixin parses and exposes the value of css var expressions
+ // via a :after { content } selector. The value will be surrounded in double
+ // quotes e.g.
+ // var(--dh-color-red-500) is exposed as "--dh-color-red-500"
+ // var(--dh-color-gray-900, #fcfcfa) is exposed as "--dh-color-gray-900, #fcfcfa"
+ const dhColor = useDhColorFromPseudoContent(ref, ':after');
+
+ const tooltip = useMemo(
+ () =>
+ dhColor != null
+ ? {
+ value: dhColor,
+ normalized: ColorUtils.normalizeCssColor(dhColor, true),
+ }
+ : null,
+ [dhColor]
+ );
+
+ const hasValue = tooltip != null && tooltip.value !== '';
+
+ return (
+
+ {hasValue && (
+
+ {tooltip.value}
+ {tooltip.normalized}
+
+ )}
+ {children}
+
{label}
@@ -49,34 +50,39 @@ export function ThemeColors(): JSX.Element {
// until all groups are placed.
style={{ gridRow: `span ${swatchData.length + 1}` }}
>
-
{group}
- {swatchData.map(({ name, value }) => (
-
0
- ? INVALID_COLOR_BORDER_STYLE
- : undefined,
- color: `var(--dh-color-${contrastColor(value)})`,
- }}
- >
-
- {name}
- {value}
-
- {ColorUtils.normalizeCssColor(value).replace(
- /^(#[a-f0-9]{6})ff$/,
- '$1'
- )}
-
-
-
{name.replace('--dh-color-', '')}
- {name.endsWith('-hue') ?
{value} : null}
-
- ))}
+
+ {group}
+
+ {swatchData.map(({ isLabel, name, value, note }) =>
+ isLabel === true ? (
+
+ {name}
+
+ ) : (
+
0
+ ? INVALID_COLOR_BORDER_STYLE
+ : undefined,
+ color: `var(--dh-color-${contrastColor(value)})`,
+ }}
+ >
+
+ {name}
+ {value}
+ {ColorUtils.normalizeCssColor(value, true)}
+
+
{name.replace('--dh-color-', '')}
+ {name.endsWith('-hue') || note != null ? (
+
{note ?? value}
+ ) : null}
+
+ )
+ )}
))}
diff --git a/packages/code-studio/src/styleguide/colorUtils.ts b/packages/code-studio/src/styleguide/colorUtils.ts
index e0b2e89b35..6acf93f548 100644
--- a/packages/code-studio/src/styleguide/colorUtils.ts
+++ b/packages/code-studio/src/styleguide/colorUtils.ts
@@ -1,7 +1,6 @@
import { ColorUtils } from '@deephaven/utils';
-export const INVALID_COLOR_BORDER_STYLE =
- '2px solid var(--dh-color-notice-default-bg)';
+export const INVALID_COLOR_BORDER_STYLE = '2px solid var(--dh-color-notice-bg)';
// Group names are extracted from var names via a regex capture group. Most of
// them work pretty well, but some need to be remapped to a more appropriate
@@ -10,10 +9,31 @@ const REASSIGN_VARIABLE_GROUPS: Record = {
'--dh-color-black': 'gray',
'--dh-color-white': 'gray',
// Semantic
+ '--dh-color-border': 'General',
+ '--dh-color-bg': 'General',
+ '--dh-color-fg': 'General',
+ '--dh-color-content-bg': 'General',
+ '--dh-color-dropshadow': 'General',
+ '--dh-color-keyboard-selected-bg': 'Misc',
+ '--dh-color-hover-border': 'Misc',
'--dh-color-visual-positive': 'Visual Status',
'--dh-color-visual-negative': 'Visual Status',
'--dh-color-visual-notice': 'Visual Status',
'--dh-color-visual-info': 'Visual Status',
+ '--dh-color-gray-bg': 'Default Background',
+ '--dh-color-blue-bg': 'Default Background',
+ '--dh-color-red-bg': 'Default Background',
+ '--dh-color-orange-bg': 'Default Background',
+ '--dh-color-yellow-bg': 'Default Background',
+ '--dh-color-chartreuse-bg': 'Default Background',
+ '--dh-color-celery-bg': 'Default Background',
+ '--dh-color-green-bg': 'Default Background',
+ '--dh-color-seafoam-bg': 'Default Background',
+ '--dh-color-cyan-bg': 'Default Background',
+ '--dh-color-indigo-bg': 'Default Background',
+ '--dh-color-purple-bg': 'Default Background',
+ '--dh-color-fuchsia-bg': 'Default Background',
+ '--dh-color-magenta-bg': 'Default Background',
// Editor
'--dh-color-editor-bg': 'editor',
'--dh-color-editor-fg': 'editor',
@@ -29,6 +49,15 @@ const REASSIGN_VARIABLE_GROUPS: Record = {
'--dh-color-grid-string-null': 'Data Types',
} as const;
+const SWATCH_LABEL = {
+ '--dh-color-black': '',
+ '--dh-color-action-active-bg': 'Action.active',
+ '--dh-color-action-down-bg': 'Action:active',
+ '--dh-color-action-hover-bg': 'Action:hover',
+ '--dh-color-action-active-hover-bg': 'Action.active:hover',
+ '--dh-color-action-disabled-bg': 'Action:disabled',
+};
+
// Mappings of variable groups to rename
const RENAME_VARIABLE_GROUPS = {
palette: {
@@ -62,17 +91,17 @@ const RENAME_VARIABLE_GROUPS = {
line: 'Deprecated',
},
grid: { data: 'Data Bars', context: 'Context Menu' },
- semantic: {
- positive: 'status',
- negative: 'status',
- notice: 'status',
- info: 'status',
- well: 'wells',
- },
+ semantic: {},
component: {},
} satisfies Record>;
-/** Return black or white contrast color */
+/**
+ * Return black or white contrast color.
+ *
+ * Note that this should be sufficient for styleguide swatch examples, but it
+ * may not completely align with how Spectrum determines contrast colors, hence
+ * leaving this here instead of promoting to `ColorUtils`.
+ */
export function contrastColor(color: string): 'black' | 'white' {
const rgba = ColorUtils.parseRgba(ColorUtils.asRgbOrRgbaString(color) ?? '');
if (rgba == null || rgba.a < 0.5) {
@@ -130,12 +159,26 @@ export function buildColorGroups(
styleText: string,
captureGroupI: number,
reassignVarGroups: Record = REASSIGN_VARIABLE_GROUPS
-): Record {
+): Record<
+ string,
+ { isLabel?: boolean; name: string; value: string; note?: string }[]
+> {
const groupRemap: Record = RENAME_VARIABLE_GROUPS[groupKey];
const swatchData = extractColorVars(styleText);
const groupData = swatchData.reduce(
(acc, { name, value }) => {
+ // Skip -hsl variables since they aren't actually colors yet
+ if (/^--dh-color-(.*?)-hsl$/.test(name)) {
+ return acc;
+ }
+
+ // Skip gray light/mid/dark as they will be marked via notes on the gray
+ // numbered palette
+ if (/^--dh-color-gray-(light|mid|dark)$/.test(name)) {
+ return acc;
+ }
+
const match = /^--dh-color-([^-]+)(?:-([^-]+))?/.exec(name);
let group =
reassignVarGroups[name] ??
@@ -149,14 +192,13 @@ export function buildColorGroups(
acc[group] = [];
}
- // Skip -hsl variables since they aren't actually colors yet
- if (/^--dh-color-(.*?)-hsl$/.test(name)) {
- return acc;
- }
-
// Add a spacer for black / white
- if (name === '--dh-color-black') {
- acc[group].push({ name: '', value: '' });
+ if (name in SWATCH_LABEL) {
+ acc[group].push({
+ isLabel: true,
+ name: SWATCH_LABEL[name as keyof typeof SWATCH_LABEL],
+ value: '',
+ });
}
// Skip gray light/mid/dark as we are planning to remove them
@@ -164,11 +206,21 @@ export function buildColorGroups(
return acc;
}
- acc[group].push({ name, value });
+ // It might be nice to make these dynamic, but for now just hardcode
+ const note = {
+ '--dh-color-gray-900': 'light',
+ '--dh-color-gray-600': 'mid',
+ '--dh-color-gray-300': 'dark',
+ }[name];
+
+ acc[group].push({ name, value, note });
return acc;
},
- {} as Record
+ {} as Record<
+ string,
+ { isLabel?: boolean; name: string; value: string; note?: string }[]
+ >
);
return groupData;
diff --git a/packages/code-studio/src/styleguide/hooks.ts b/packages/code-studio/src/styleguide/hooks.ts
new file mode 100644
index 0000000000..c32d12c96a
--- /dev/null
+++ b/packages/code-studio/src/styleguide/hooks.ts
@@ -0,0 +1,59 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { contrastColor } from './colorUtils';
+
+/**
+ * Ref that will set the foreground color of an element to contrast with its
+ * background color.
+ */
+export function useContrastFgColorRef<
+ T extends HTMLElement,
+>(): React.RefObject {
+ const ref = useRef(null);
+
+ useLayoutEffect(() => {
+ if (ref.current == null) {
+ return;
+ }
+
+ const computedStyle = getComputedStyle(ref.current);
+
+ const { backgroundColor } = computedStyle;
+
+ ref.current.style.color = contrastColor(backgroundColor);
+ }, []);
+
+ return ref;
+}
+
+/**
+ * Extract a --dh-color-xxxx variable from the pseudo content of an element.
+ * @param elementRef Ref to the element to extract the color from.
+ * @param pseudoElement The pseudo element to extract the color from.
+ */
+export function useDhColorFromPseudoContent(
+ elementRef: React.RefObject,
+ pseudoElement: ':before' | ':after'
+): string | undefined {
+ const [color, setColor] = useState();
+
+ useEffect(() => {
+ if (elementRef.current == null) {
+ return;
+ }
+
+ const computedStyle = 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];
+ if (dhColorVarName == null) {
+ return;
+ }
+
+ setColor(dhColorVarName);
+ }, [elementRef, pseudoElement]);
+
+ return color;
+}
diff --git a/packages/code-studio/vite.config.ts b/packages/code-studio/vite.config.ts
index fdae3080cf..3789e0212a 100644
--- a/packages/code-studio/vite.config.ts
+++ b/packages/code-studio/vite.config.ts
@@ -61,7 +61,7 @@ export default defineConfig(({ mode }) => {
proxy[route] = {
target: `http://localhost:${env.VITE_JS_PLUGINS_DEV_PORT}`,
changeOrigin: true,
- rewrite: path => path.replace(/^\/js-plugins/, ''),
+ rewrite: (pathOrig: string) => pathOrig.replace(/^\/js-plugins/, ''),
};
}
diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss
index f037890d5f..de18d729f3 100644
--- a/packages/components/scss/BaseStyleSheet.scss
+++ b/packages/components/scss/BaseStyleSheet.scss
@@ -2,11 +2,16 @@
// Can be imported directly by Vite since it resolves bootstrap to node_modules/bootstrap
@import './custom.scss';
@import './util.scss';
-@import 'bootstrap/scss/bootstrap';
+@import './bootstrap_imports.scss';
:root {
--dh-svg-inline-icon-size: 16px;
- --scrollbar-color: 255, 255, 255;
+
+ color: var(--dh-color-text);
+
+ .spectrum-theme-provider {
+ color: var(--dh-color-text);
+ }
}
//Various non-variable css overides
@@ -16,6 +21,14 @@ html {
min-height: 100%;
}
+// override
+.text-black-50 {
+ color: background-opacity(50) !important;
+}
+.text-white-50 {
+ color: foreground-opacity(50) !important;
+}
+
// deephaven-icons are designed on a 16px grid
// and look best at that size. Default icon size back to 16px
// vertical alignment changed to best match icon set against 14px text
@@ -26,19 +39,18 @@ html {
body {
min-height: 100%;
- background-color: var(--dh-color-background, $background);
+ background-color: $background;
color: $foreground;
margin: 0;
padding: 0;
overscroll-behavior: none;
-ms-scroll-chaining: none;
- scrollbar-color: rgba($white, 0.1) rgba($black, 0.1); //applies to firefox only
+ scrollbar-color: foreground-opacity(10) background-opacity(10); //applies to firefox only
}
#root {
- background-color: var(--dh-color-background, $background);
-
.app {
+ background-color: $background;
height: 100vh;
width: 100vw;
}
@@ -91,7 +103,7 @@ a.custom-link,
content: '';
box-sizing: content-box;
position: absolute;
- background: rgba($primary, $focus-bg-transparency);
+ background: accent-opacity(10);
top: 0;
left: 0;
width: 100%;
@@ -135,18 +147,18 @@ span.btn-disabled-wrapper {
border-radius: $border-radius;
&:focus {
- background: rgba($primary, $focus-bg-transparency);
+ background: accent-opacity(10);
border: $input-border-width solid $primary;
box-shadow: $input-btn-focus-box-shadow;
}
&:hover {
- background: rgba($primary, $hover-bg-transparency);
+ background: accent-opacity(15);
}
&:active {
content: '';
- background: rgba($primary, $active-bg-transparency);
+ background: accent-opacity(30);
}
}
}
@@ -157,15 +169,13 @@ span.btn-disabled-wrapper {
border-color: $danger;
&:focus {
- box-shadow: 0 0 0 $btn-focus-width
- rgba(mix(color-yiq($background), $danger, 15%), 0.5);
+ box-shadow: 0 0 0 $btn-focus-width var(--dh-color-focus);
}
&:not(:disabled):not(.disabled):active {
- background: darken($danger, 10%);
- border-color: darken($danger, 10%);
- box-shadow: 0 0 0 $btn-focus-width
- rgba(mix(color-yiq($background), $danger, 15%), 0.5);
+ background: var(--dh-color-negative-down-bg);
+ border-color: var(--dh-color-negative-down-bg);
+ box-shadow: 0 0 0 $btn-focus-width var(--dh-color-focus);
}
}
@@ -180,8 +190,7 @@ span.btn-disabled-wrapper {
.btn-spinner {
padding: $btn-padding-y 1rem;
- .fa-layers,
- .loading-spinner {
+ .fa-layers {
margin-right: 0.5rem;
}
}
@@ -226,7 +235,7 @@ span.btn-disabled-wrapper {
text-decoration: none;
box-shadow: none;
&::after {
- background: rgba($primary, $focus-bg-transparency);
+ background: accent-opacity(10);
border: $input-border-width solid $primary;
box-shadow: $input-btn-focus-box-shadow;
}
@@ -234,14 +243,14 @@ span.btn-disabled-wrapper {
&:hover {
&::after {
- background: rgba($primary, $hover-bg-transparency);
+ background: accent-opacity(15);
}
}
&:active {
&::after {
content: '';
- background: rgba($primary, $active-bg-transparency);
+ background: accent-opacity(30);
}
}
}
@@ -296,51 +305,49 @@ span.btn-disabled-wrapper {
padding-left: $spacer-1;
padding-right: $spacer-1;
border-radius: $border-radius;
- background: $gray-600;
- border: 1px solid $input-border-color;
- color: $gray-300;
+ background: var(--dh-color-action-bg);
+ border: 1px solid var(--dh-color-action-border);
+ color: var(--dh-color-action-fg);
&.active {
- border-color: $primary;
- background: $primary;
- color: $gray-100;
+ border-color: var(--dh-color-action-active-border);
+ background: var(--dh-color-action-active-bg);
+ color: var(--dh-color-action-active-fg);
- &:focus {
+ &:focus-visible {
border: 1px solid $input-focus-border-color;
}
&:not(:disabled):not(.disabled):hover {
- background: $primary;
+ color: var(--dh-color-action-active-hover-fg);
+ background: var(--dh-color-action-active-hover-bg);
+ border-color: var(--dh-color-action-active-hover-border);
}
}
&.disabled,
&:disabled {
- border: 1px solid $black;
- color: $gray-300;
+ background-color: var(--dh-color-action-disabled-bg);
+ border: 1px solid var(--dh-color-action-disabled-border);
+ color: var(--dh-color-action-disabled-fg);
cursor: not-allowed;
}
- &:focus {
+ &:focus-visible {
border: 1px solid $input-focus-border-color;
}
&:not(:disabled):not(.disabled):hover {
- background-color: $gray-500;
- color: $gray-200;
+ background-color: var(--dh-color-action-hover-bg);
+ border: 1px solid var(--dh-color-action-hover-border);
+ color: var(--dh-color-action-hover-fg);
}
&:not(:disabled):not(.disabled):active {
- background: $gray-700;
+ background: var(--dh-color-action-down-bg);
}
}
-.btn-secondary:hover {
- // steal primary hover state to look more hovered, less disabled
- background-color: $primary-hover;
- border-color: $primary-hover;
-}
-
.btn-secondary.disabled,
.btn-secondary:disabled {
// look more disabled
@@ -408,18 +415,18 @@ form label small {
box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
}
-.form-control.btn:focus {
+.form-control.btn:focus-visible {
box-shadow: $input-btn-focus-box-shadow;
}
.form-control:disabled {
border-color: $black;
- color: darken($gray-400, 5%);
+ color: $gray-500;
cursor: not-allowed;
}
.form-control:disabled::placeholder {
- color: darken($gray-400, 5%);
+ color: $gray-500;
}
.form-control[type='password'] {
@@ -617,7 +624,7 @@ input[type='number']::-webkit-inner-spin-button {
border-color: $gray-300;
&:focus,
&.focus {
- box-shadow: 0 0 0 0.2rem rgba(91, 90, 92, 20%);
+ box-shadow: 0 0 0 0.2rem background-opacity(20);
}
}
}
@@ -641,26 +648,26 @@ input[type='number']::-webkit-inner-spin-button {
::selection {
//blink/webkit
color: $foreground;
- background: rgba($text-select-color, 0.99);
+ background: var(--dh-color-text-highlight);
opacity: 1;
}
::-moz-selection {
//moz
color: $foreground;
- background: rgba($text-select-color, 0.99);
+ background: var(--dh-color-text-highlight);
opacity: 1;
}
.masked-input::selection {
//blink/webkit
- background: rgba($primary, 0.7);
+ background: var(--dh-color-text-highlight);
opacity: 1;
}
.masked-input::-moz-selection {
//moz
- background: rgba($primary, 0.7);
+ background: var(--dh-color-text-highlight);
opacity: 1;
}
@@ -672,7 +679,7 @@ input[type='number']::-webkit-inner-spin-button {
// style the same as monaco scrollbar
::-webkit-scrollbar-thumb {
- background: rgba(var(--scrollbar-color), 0.18);
+ background: hsla(var(--dh-color-scrollbar-hsl), 0.18);
border-radius: 0;
}
@@ -682,30 +689,31 @@ input[type='number']::-webkit-inner-spin-button {
}
::-webkit-scrollbar-corner {
- background: rgba(0, 0, 0, 10%);
+ background: background-opacity(10);
}
::-webkit-scrollbar-track:horizontal {
- border-top: 1px solid rgba(var(--scrollbar-color), 0.15);
+ border-top: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
}
::-webkit-scrollbar-track:vertical {
- border-left: 1px solid rgba(var(--scrollbar-color), 0.15);
+ border-left: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
}
::-webkit-scrollbar-thumb:hover {
- background: rgba(var(--scrollbar-color), 0.25);
+ background: hsla(var(--dh-color-scrollbar-hsl), 0.25);
}
::-webkit-scrollbar-thumb:active {
- background: rgba(var(--scrollbar-color), 0.35);
+ background: hsla(var(--dh-color-scrollbar-hsl), 0.35);
}
// used in inverted color sections, like light modals
.theme-bg-light {
- --scrollbar-color: 0, 0, 0;
+ --dh-color-scrollbar-hsl: #{var(--dh-color-bg-hsl)};
- scrollbar-color: rgba($black, 0.5) rgba($black, 0.3); // firefox
+ scrollbar-color: hsla(var(--dh-color-scrollbar-hsl), 0.5)
+ hsla(var(--dh-color-scrollbar-hsl), 0.3); // firefox
}
/********** Monaco Overides *********/
@@ -804,7 +812,7 @@ input[type='number']::-webkit-inner-spin-button {
//make the dotted duplicate focus line on firefox go away
&:-moz-focusring {
- color: rgba(0, 0, 0, 0%);
+ color: transparent;
text-shadow: 0 0 0 $foreground !important;
}
@@ -842,7 +850,7 @@ input[type='number']::-webkit-inner-spin-button {
solid-gradient($gray-700);
&:-moz-focusring {
- color: rgba(0, 0, 0, 0%);
+ color: transparent;
text-shadow: 0 0 0 $foreground !important;
}
}
@@ -852,7 +860,7 @@ input[type='number']::-webkit-inner-spin-button {
solid-gradient($gray-200);
&:-moz-focusring {
- color: rgba(0, 0, 0, 0%);
+ color: transparent;
text-shadow: 0 0 0 $background !important;
}
}
diff --git a/packages/components/scss/bootstrap_imports.scss b/packages/components/scss/bootstrap_imports.scss
new file mode 100644
index 0000000000..1a4e073e7c
--- /dev/null
+++ b/packages/components/scss/bootstrap_imports.scss
@@ -0,0 +1,49 @@
+/*!
+ * Bootstrap v4.6.2 (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Copyright 2011-2022 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+/*
+ * Deephaven manually imports only the necessary bootstrap files.
+ * See `bootstrap/scss/bootstrap.scss` in `node_modules` for the original list of imports.
+ */
+
+@import 'bootstrap/scss/functions';
+
+// patch the functions
+@import './bootstrap_override_functions.scss';
+
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
+// patch the mixins
+@import './bootstrap_override_mixins_background_variant.scss';
+@import './bootstrap_override_mixins_buttons.scss';
+@import './bootstrap_override_mixins_forms.scss';
+@import './bootstrap_override_mixins_text_emphasis.scss';
+
+// $theme-colors is used by button mixins. We don't want to use the `dark` or `light`
+// variants since they don't align with the semantics we use for theming.
+$theme-colors: map-remove($theme-colors, 'dark', 'light');
+
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/code';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/input-group';
+@import 'bootstrap/scss/custom-forms';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/progress';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/utilities';
diff --git a/packages/components/scss/bootstrap_override_functions.scss b/packages/components/scss/bootstrap_override_functions.scss
new file mode 100644
index 0000000000..97ee483ab1
--- /dev/null
+++ b/packages/components/scss/bootstrap_override_functions.scss
@@ -0,0 +1,31 @@
+// Bootstrap overrides for `bootstrap/scss/_functions.scss`
+
+// Color contrast
+// DH Customization: Add support for dh-color variables
+@function color-yiq(
+ $color,
+ $dark: var(--dh-color-contrast-dark),
+ $light: var(--dh-color-contrast-light)
+) {
+ // if $color is a hex color, use the default color-yiq function
+ @if type-of($color) == 'color' {
+ $r: red($color);
+ $g: green($color);
+ $b: blue($color);
+
+ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001;
+
+ @if $yiq >= $yiq-contrasted-threshold {
+ @return $dark;
+ } @else {
+ @return $light;
+ }
+ }
+
+ $contrast-color: var(
+ --dh-color-#{$color}-contrast,
+ var(--dh-color-contrast-light)
+ );
+
+ @return $contrast-color;
+}
diff --git a/packages/components/scss/bootstrap_override_mixins_background_variant.scss b/packages/components/scss/bootstrap_override_mixins_background_variant.scss
new file mode 100644
index 0000000000..73b14f5f86
--- /dev/null
+++ b/packages/components/scss/bootstrap_override_mixins_background_variant.scss
@@ -0,0 +1,16 @@
+// Bootstrap mixin overrides for `bootstrap/scss/mixins/_background-variant.scss`
+@use 'sass:map';
+
+@mixin bg-variant($parent, $bootstrap-value, $ignore-warning: false) {
+ $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
+
+ #{$parent} {
+ background-color: var(--dh-color-#{$semantic-value}-bg) !important;
+ }
+ a#{$parent},
+ button#{$parent} {
+ @include hover-focus {
+ background-color: var(--dh-color-#{$semantic-value}-down-bg) !important;
+ }
+ }
+}
diff --git a/packages/components/scss/bootstrap_override_mixins_buttons.scss b/packages/components/scss/bootstrap_override_mixins_buttons.scss
new file mode 100644
index 0000000000..59f51127a6
--- /dev/null
+++ b/packages/components/scss/bootstrap_override_mixins_buttons.scss
@@ -0,0 +1,123 @@
+// Bootstrap mixin overrides for `bootstrap/scss/mixins/_buttons.scss`
+@use 'sass:map';
+
+// This mixin overrides the one in `bootstrap/scss/mixins/_buttons.scss`
+// $bootstrap-value comes from $theme-colors map (see `bootstrap/scss/_buttons.scss`)
+@mixin button-variant($bootstrap-value, $_) {
+ $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
+
+ // DH Customization: Convert semantic value to css variables
+ $background: var(--dh-color-#{$semantic-value}-bg);
+ $border: var(--dh-color-#{$semantic-value}-bg);
+ $boxshadow-color: hsla(var(--dh-color-#{$semantic-value}-hsl), 0.5);
+ $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
+ $hover-border: var(--dh-color-#{$semantic-value}-hover-bg);
+ $active-background: var(--dh-color-#{$semantic-value}-down-bg);
+ $active-border: var(--dh-color-#{$semantic-value}-down-bg);
+ $color: var(--dh-color-#{$semantic-value}-contrast);
+
+ color: $color;
+ font-weight: var(--spectrum-global-font-weight-bold);
+ @include gradient-bg($background);
+
+ border-color: $border;
+ @include box-shadow($btn-box-shadow);
+
+ @include hover {
+ color: $color;
+ @include gradient-bg($hover-background);
+
+ border-color: $hover-border;
+ }
+
+ &:focus {
+ box-shadow: none;
+ }
+
+ &:focus-visible,
+ &.focus {
+ color: $color;
+ @include gradient-bg($hover-background);
+
+ border-color: $hover-border;
+ box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
+ }
+
+ // Disabled comes first so active can properly restyle
+ &.disabled,
+ &:disabled {
+ color: $color;
+ background-color: $background;
+ border-color: $border;
+ // Remove CSS gradients if they're enabled
+ @if $enable-gradients {
+ background-image: none;
+ }
+ }
+
+ &:not(:disabled):not(.disabled):active,
+ &:not(:disabled):not(.disabled).active,
+ .show > &.dropdown-toggle {
+ color: $color;
+ background-color: $active-background;
+ @if $enable-gradients {
+ background-image: none; // Remove the gradient for the pressed/active state
+ }
+
+ border-color: $active-border;
+
+ &:focus-visible {
+ box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
+ }
+ }
+}
+
+@mixin button-outline-variant($bootstrap-value) {
+ $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
+
+ $color: var(--dh-color-#{$semantic-value}-bg);
+ $boxshadow-color: hsla(var(--dh-color-#{$semantic-value}-hsl), 0.5);
+ $hover-color: color-yiq($semantic-value);
+ $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
+ $active-background: var(--dh-color-#{$semantic-value}-down-bg);
+
+ color: $color;
+ border-color: $color;
+
+ @include hover {
+ color: $hover-color;
+ background-color: $hover-background;
+ border-color: $hover-background;
+ }
+
+ &:focus,
+ &.focus {
+ box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
+ }
+
+ &.disabled,
+ &:disabled {
+ color: $color;
+ background-color: transparent;
+ }
+
+ &:not(:disabled):not(.disabled):active,
+ &:not(:disabled):not(.disabled).active,
+ .show > &.dropdown-toggle {
+ color: color-yiq($semantic-value);
+ background-color: $active-background;
+ border-color: $active-background;
+
+ &:focus {
+ @if $enable-shadows and $btn-active-box-shadow != none {
+ @include box-shadow(
+ $btn-active-box-shadow,
+ 0 0 0 $btn-focus-width $boxshadow-color
+ );
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
+ }
+ }
+ }
+}
diff --git a/packages/components/scss/bootstrap_override_mixins_forms.scss b/packages/components/scss/bootstrap_override_mixins_forms.scss
new file mode 100644
index 0000000000..c9ba89f65a
--- /dev/null
+++ b/packages/components/scss/bootstrap_override_mixins_forms.scss
@@ -0,0 +1,231 @@
+/* stylelint-disable scss/comment-no-empty */
+// Bootstrap mixin overrides for `bootstrap/scss/mixins/_forms.scss`
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `$input-focus-border-color` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus($ignore-warning: false) {
+ &:focus {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ @if $enable-shadows {
+ @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+ @include deprecate(
+ 'The `form-control-focus()` mixin',
+ 'v4.4.0',
+ 'v5',
+ $ignore-warning
+ );
+}
+
+// This mixin overrides the one in `bootstrap/scss/mixins/_forms.scss`
+// It's primary purpose is to convert the input color value into a dh css
+// variable expression. There are a few additional tweaks annotated with
+// `DH Customization:`
+@mixin form-validation-state($state, $semantic-value, $icon) {
+ // DH Customization: Convert semantic value to css variable
+ $color: var(--dh-color-visual-#{$semantic-value});
+
+ .#{$state}-feedback {
+ display: none;
+ width: 100%;
+ margin-top: $form-feedback-margin-top;
+ @include font-size($form-feedback-font-size);
+
+ color: $color;
+ }
+
+ .#{$state}-tooltip {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 5;
+ display: none;
+ max-width: 100%; // Contain to parent when possible
+ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+ margin-top: 0.1rem;
+ @include font-size($form-feedback-tooltip-font-size);
+
+ line-height: $form-feedback-tooltip-line-height;
+ color: color-yiq($semantic-value);
+ background-color: $color;
+ @include border-radius($form-feedback-tooltip-border-radius);
+
+ // See https://github.com/twbs/bootstrap/pull/31557
+ // Align tooltip to form elements
+ .form-row > .col > &,
+ .form-row > [class*='col-'] > & {
+ left: $form-grid-gutter-width * 0.5;
+ }
+ }
+
+ @include form-validation-state-selector($state) {
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+
+ .form-control {
+ @include form-validation-state-selector($state) {
+ border-color: $color;
+
+ @if $enable-validation-icons {
+ padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
+ background-image: escape-svg($icon);
+ background-repeat: no-repeat;
+ background-position: right $input-height-inner-quarter center;
+ background-size: $input-height-inner-half $input-height-inner-half;
+ }
+
+ &:focus {
+ border-color: $color;
+ }
+
+ // DH Customization: Moved box-shadow from :focus to :focus-visible and
+ // changed to $input-focus-box-shadow
+ &:focus-visible {
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+ }
+
+ // stylelint-disable-next-line selector-no-qualifying-type
+ select.form-control {
+ @include form-validation-state-selector($state) {
+ @if $enable-validation-icons {
+ padding-right: $input-padding-x *
+ 4 !important; // stylelint-disable-line declaration-no-important
+
+ background-position: right $input-padding-x * 2 center;
+ }
+ }
+ }
+
+ // stylelint-disable-next-line selector-no-qualifying-type
+ textarea.form-control {
+ @include form-validation-state-selector($state) {
+ @if $enable-validation-icons {
+ padding-right: $input-height-inner;
+ background-position: top
+ $input-height-inner-quarter
+ right
+ $input-height-inner-quarter;
+ }
+ }
+ }
+
+ .custom-select {
+ @include form-validation-state-selector($state) {
+ border-color: $color;
+
+ @if $enable-validation-icons {
+ padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
+ background:
+ $custom-select-background,
+ $custom-select-bg
+ escape-svg($icon)
+ $custom-select-feedback-icon-position /
+ $custom-select-feedback-icon-size
+ no-repeat;
+ }
+
+ &:focus {
+ border-color: $color;
+ }
+
+ // DH Customization: Moved box-shadow from :focus to :focus-visible and
+ // changed to $input-focus-box-shadow
+ &:focus-visible {
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+ }
+
+ .form-check-input {
+ @include form-validation-state-selector($state) {
+ ~ .form-check-label {
+ color: $color;
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .custom-control-input {
+ @include form-validation-state-selector($state) {
+ ~ .custom-control-label {
+ color: $color;
+
+ &::before {
+ border-color: $color;
+ }
+ }
+
+ &:checked {
+ // DH Customization: Changed from lighten($color, 10%) to $color
+ ~ .custom-control-label::before {
+ border-color: $color;
+ @include gradient-bg($color);
+ }
+ }
+
+ // DH Customization: Moved box-shadow from :focus to :focus-visible and
+ // changed to $input-focus-box-shadow.
+ &:focus-visible {
+ ~ .custom-control-label::before {
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+
+ &:focus {
+ &:not(:checked) ~ .custom-control-label::before {
+ border-color: $color;
+ }
+ }
+ }
+ }
+
+ // custom file
+ .custom-file-input {
+ @include form-validation-state-selector($state) {
+ ~ .custom-file-label {
+ border-color: $color;
+ }
+
+ &:focus {
+ ~ .custom-file-label {
+ border-color: $color;
+ // DH Customization: Removed box-shadow
+ // box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+ }
+
+ // DH Customization: Added rule
+ &:focus-visible {
+ ~ .custom-file-label {
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+ }
+ }
+}
diff --git a/packages/components/scss/bootstrap_override_mixins_text_emphasis.scss b/packages/components/scss/bootstrap_override_mixins_text_emphasis.scss
new file mode 100644
index 0000000000..eaf7d9d843
--- /dev/null
+++ b/packages/components/scss/bootstrap_override_mixins_text_emphasis.scss
@@ -0,0 +1,21 @@
+// Bootstrap mixin overrides for `bootstrap/scss/mixins/_text-emphasis.scss`
+
+@mixin text-emphasis-variant($parent, $semantic-value, $ignore-warning: false) {
+ #{$parent} {
+ // if $semantic-value = primary then use accent-700
+ @if $semantic-value == 'accent' {
+ color: var(--spectrum-#{$semantic-value}-color-700) !important;
+ } @else {
+ color: var(--spectrum-#{$semantic-value}-visual-color) !important;
+ }
+ }
+ @if $emphasized-link-hover-darken-percentage != 0 {
+ a#{$parent} {
+ @include hover-focus {
+ color: var(
+ --spectrum-#{$semantic-value}-background-color-default
+ ) !important;
+ }
+ }
+ }
+}
diff --git a/packages/components/scss/bootstrap_overrides.scss b/packages/components/scss/bootstrap_overrides.scss
index bd05294794..165395ee44 100644
--- a/packages/components/scss/bootstrap_overrides.scss
+++ b/packages/components/scss/bootstrap_overrides.scss
@@ -1,50 +1,88 @@
// Styling overrides for bootstrap
+@use 'sass:map';
// Override / set color variables
-$red: #f95d84;
-$orange: #f37e3f;
-$yellow: #fcd65b;
-$green: #9edc6f;
-$blue: #76d9e4;
-$purple: #aa9af4;
+$red: var(--dh-color-visual-red);
+$orange: var(--dh-color-visual-orange);
+$yellow: var(--dh-color-visual-yellow);
+$green: var(--dh-color-visual-green);
+$blue: var(--dh-color-visual-blue);
+$purple: var(--dh-color-visual-purple);
+
+//Define our Gray scale
+$gray-100: var(--dh-color-gray-900, #fcfcfa);
+$gray-200: var(--dh-color-gray-800);
+$gray-300: var(--dh-color-gray-700);
+$gray-400: var(--dh-color-gray-600);
+$gray-500: var(--dh-color-gray-500);
+// intentional duplicate, scale doesn't line up otherwise
+// as we have gray-850 and spectrum doesn't and it is needed
+$gray-600: var(--dh-color-gray-500);
+$gray-700: var(--dh-color-gray-400);
+$gray-800: var(--dh-color-gray-300);
+$gray-850: var(--dh-color-gray-200);
+$gray-900: var(--dh-color-gray-75);
+$black: var(--dh-color-black, #1a171a);
+$white: var(--dh-color-white, #f0f0ee);
//Define some UI colors
-$interfacegray: #2d2a2e;
-$interfaceblue: #4878ea;
-$interfacewhite: #f0f0ee; //same as gray-200
-$interfaceblack: #1a171a;
+$interfacegray: var(--dh-color-content-bg, #2d2a2e);
+$interfaceblue: var(--dh-color-accent-bg);
+$interfacewhite: $white;
+$interfaceblack: $black;
+$content-bg: var(--dh-color-content-bg, #2d2a2e);
+$background: var(--dh-color-bg);
+$foreground: var(--dh-color-fg);
-//Define our Gray scale
-$white: $interfacewhite;
-$gray-100: #fcfcfa;
-$gray-200: $interfacewhite;
-$gray-300: #c0bfbf;
-$gray-400: #929192;
-$gray-500: #5b5a5c;
-$gray-600: #555356;
-$gray-700: #403e41;
-$gray-800: #373438;
-$gray-850: #322f33;
-$gray-900: #211f22;
-$black: $interfaceblack;
-$content-bg: $interfacegray;
-$background: $interfaceblack;
-$foreground: $interfacewhite;
-
-//Load colors into map
-$colors: ();
-$colors: map-merge(
- (
- 'red': $red,
- 'orange': $orange,
- 'yellow': $yellow,
- 'green': $green,
- 'blue': $blue,
- 'purple': $purple,
- 'white': $white,
- 'black': $black,
- ),
- $colors
+// Extend default Bootstrap $grays map
+$grays-custom: (
+ '850': $gray-850,
+);
+$grays: () !default;
+$grays: map-merge($grays, $grays-custom);
+
+// Extend default Bootstrap $colors map
+$colors-custom: (
+ 'black': $black,
+);
+$colors: () !default;
+$colors: map-merge($colors, $colors-custom);
+
+// Override default Bootstrap $theme-colors map by mapping each key to itself.
+// These will then be re-mapped inside of `button-outline-variant` and
+// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`
+$theme-colors-self-map: ();
+@each $key
+ in (
+ 'primary',
+ 'secondary',
+ 'success',
+ 'info',
+ 'warning',
+ 'danger',
+ 'light',
+ 'dark'
+ )
+{
+ $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);
+}
+$theme-colors: () !default;
+$theme-colors: map-merge($theme-colors, $theme-colors-self-map);
+
+// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to
+// DH semantic colors
+$bootstrap-dh-semantic-map: (
+ 'primary': 'accent',
+ 'secondary': 'neutral',
+ 'success': 'positive',
+ 'info': 'info',
+ 'warning': 'notice',
+ 'danger': 'negative',
+ // We shouldn't be using these, but mapping so they work with our custom
+ // `color-yiq` mixin. If we find a way to remove $light + $dark that are
+ // defined in Bootstrap _variables.scss, we should remove these
+ 'light': 'neutral',
+ 'dark': 'neutral',
);
//Set default colors
@@ -52,42 +90,36 @@ $body-bg: $black;
$body-color: $interfacewhite;
// Set brand colors
-$primary: $interfaceblue;
-$primary-hover: darken($primary, 8%);
-$primary-dark: mix($primary, $content-bg, 25%);
-$primary-light: scale-color($primary, $lightness: -25%);
-$secondary: $gray-500;
-$secondary-hover: darken($secondary, 8%);
+$primary: var(--dh-color-accent-bg);
+$primary-hover: var(--dh-color-accent-hover-bg);
+$primary-dark: var(--dh-color-accent-down-bg);
+$primary-light: var(--dh-color-accent-1100);
+$secondary: var(--dh-color-neutral-bg);
+$secondary-hover: var(--dh-color-neutral-hover-bg);
$success: $green;
$info: $yellow;
$warning: $orange;
-$danger: $red;
-$danger-hover: darken($danger, 8%);
-$light: $gray-100;
-$mid: $gray-400; //Added a mid color, useful for input styling
-$dark: $gray-800;
-$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);
+$danger: var(--dh-color-negative-bg);
+$danger-hover: var(--dh-color-negative-hover-bg);
+// We really don't want to use $light or $dark variables, but Bootstrap defines
+// them in _variables.scss. Explicitly setting them to ensure we are in control
+// of their values. If we can find a way to remove them, we should
+$light: var(--dh-color-gray-light);
+$dark: var(--dh-color-gray-dark);
+// Bootstrap doesn't define $mid, and we want to move away from this particular
+// semantic. Should be deleted by #1635
+$mid: var(--dh-color-gray-mid);
-$theme-colors: () !default;
-$theme-colors: map-merge(
- (
- 'primary': $primary,
- 'primary-hover': $primary-hover,
- 'primary-light': $primary-light,
- 'primary-dark': $primary-dark,
- 'secondary': $secondary,
- 'success': $success,
- 'info': $info,
- 'warning': $warning,
- 'danger': $danger,
- 'light': $light,
- 'dark': $dark,
- 'mid': $mid,
- 'content-bg': $interfacegray,
- 'background': $interfaceblack,
- 'foreground': $interfacewhite,
- ),
- $theme-colors
+$semantic-colors: (
+ 'primary-hover': $primary-hover,
+ 'primary-light': $primary-light,
+ 'primary-dark': $primary-dark,
+ 'mid': $mid,
+ 'content-bg': $interfacegray,
+ 'background': $interfaceblack,
+ 'foreground': $interfacewhite,
+ 'secondary-hover': $secondary-hover,
+ 'danger-hover': $danger-hover,
);
$component-active-bg: $primary;
@@ -114,21 +146,15 @@ $headings-font-weight: 400;
$text-muted: $gray-400;
//Style Selection highlight color
-//so browsers add alpha to your color by default, ignoring opacity 1
-//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied
-$text-select-color: $primary-hover;
-$text-select-color-editor: lighten(
- $gray-700,
- 15%
-); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.
+$text-select-color: var(--dh-color-text-highlight);
//Grid variables, same value as default just making easily accessible
$grid-gutter-width: 30px;
//Visual Overrides
$border-radius: 4px;
-$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows
-$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI
+$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
//Override Btn
$btn-border-radius: 4rem;
@@ -141,26 +167,31 @@ $btn-transition:
$btn-border-width: 2px;
//Override Inputs
-$input-bg: $gray-600;
-$input-disabled-bg: $gray-800;
-$input-color: $foreground;
-$input-border-color: $gray-400;
-$input-placeholder-color: $gray-400;
-$input-focus-border-color: rgba($primary, 85%);
+$input-bg: var(--dh-color-input-bg);
+$input-disabled-bg: var(--dh-color-input-disabled-bg);
+$input-color: var(--dh-color-input-fg);
+$input-border-color: var(--dh-color-input-border);
+$input-placeholder-color: var(--dh-color-input-placeholder);
+$input-focus-border-color: var(--dh-color-input-focus-border);
$input-btn-focus-width: 0.2rem;
-$input-btn-focus-color: rgba($component-active-bg, 35%);
+$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;
//checkbox
$custom-control-indicator-bg: $gray-600;
+$custom-control-indicator-active-bg: var(--dh-color-accent-1100);
$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 Select
-$custom-select-indicator-color: $gray-400;
+// 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
+// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651
+// 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-size: 16px 16px;
//dhSort icon encoded
$custom-select-indicator: str-replace(
@@ -169,7 +200,7 @@ $custom-select-indicator: str-replace(
'%23'
);
$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;
-$custom-select-disabled-color: darken($gray-400, 5%);
+$custom-select-disabled-color: $gray-500;
$custom-select-disabled-bg: $gray-800;
//modal
@@ -178,15 +209,15 @@ $modal-content-border-width: 0;
$modal-md: 550px;
// Toast notification
-$toast-bg: $primary-dark;
-$toast-color: $foreground;
-$toast-error-bg: mix($danger, $content-bg, 15%);
-$toast-error-color: $foreground;
+$toast-bg: var(--dh-color-accent-100);
+$toast-color: var(--dh-color-text);
+$toast-error-bg: var(--dh-color-negative-bg);
+$toast-error-color: var(--dh-color-text);
//tooltips
-$tooltip-bg: $gray-700;
-$tooltip-color: $foreground;
-$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);
+$tooltip-bg: var(--dh-color-tooltip-bg);
+$tooltip-color: var(--dh-color-tooltip-fg);
+$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);
//drowdowns
$dropdown-bg: $gray-600;
@@ -199,7 +230,7 @@ $dropdown-divider-bg: $gray-700;
$contextmenu-bg: $gray-600;
$contextmenu-color: $foreground;
$contextmenu-disabled-color: $text-muted;
-$contextmenu-keyboard-selected-bg: rgba($primary, 50%);
+$contextmenu-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);
$contextmenu-selected-bg: $primary;
$contextmenu-selected-color: $foreground;
@@ -223,9 +254,21 @@ $transition-long: 0.3s;
$transition-slow: 0.6s;
//form-validation icon, uses vsWarning icon encoded here as svg
-$form-feedback-icon-invalid-color: theme-color('danger');
+$form-feedback-icon-invalid-color: $danger;
$form-feedback-icon-invalid: str-replace(
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E "),
'#',
'%23'
);
+
+// This section of variables is not consumed directly by DH, but they need to be
+// defined for sass to compile _variables
+$table-dark-bg: $gray-800;
+$table-dark-accent-bg: var(--dh-color-highlight-hover);
+$table-dark-hover-bg: var(--dh-color-highlight-active);
+$table-dark-border-color: $gray-700;
+$popover-bg: var(--dh-color-tooltip-bg);
+$popover-border-color: var(--dh-color-overlay-modal-bg);
+$popover-header-bg: #000;
+$popover-arrow-outer-color: var(--dh-color-dropshadow);
+$custom-range-thumb-active-bg: var(--dh-color-accent-1100);
diff --git a/packages/components/scss/new_variables.scss b/packages/components/scss/new_variables.scss
index 7fdfb4eec0..65ce796a65 100644
--- a/packages/components/scss/new_variables.scss
+++ b/packages/components/scss/new_variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
//Set of spacer variables from the spacer map
$spacer-0: map-get($spacers, 0); //0
$spacer-1: map-get($spacers, 1);
@@ -49,6 +51,22 @@ $ant-thickness: 1px;
}
}
+@function hsla-opacity($semantic-name, $i: 100) {
+ @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));
+}
+
+@function accent-opacity($i: 100) {
+ @return hsla-opacity('accent', $i);
+}
+
+@function background-opacity($i: 100) {
+ @return hsla-opacity('bg', $i);
+}
+
+@function foreground-opacity($i: 100) {
+ @return hsla-opacity('fg', $i);
+}
+
$focus-bg-transparency: 0.12;
$hover-bg-transparency: 0.14;
$active-bg-transparency: 0.28;
diff --git a/packages/components/scss/util.scss b/packages/components/scss/util.scss
index 07c18cc380..5f4b0a4f50 100644
--- a/packages/components/scss/util.scss
+++ b/packages/components/scss/util.scss
@@ -1,7 +1,7 @@
// Setup a mask-image for an inline svg
@mixin icon-image-mask($mask-image, $size: 16px) {
background-size: $size;
- background-color: var(--dh-color-foreground);
+ background-color: var(--dh-color-fg);
mask-image: $mask-image;
mask-position: center center;
mask-repeat: no-repeat;
@@ -52,4 +52,4 @@
// where we need a solid background image layer.
@function solid-gradient($color) {
@return linear-gradient(0deg, $color, $color);
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/AutoCompleteInput.scss b/packages/components/src/AutoCompleteInput.scss
index 5f3e11b842..4e5f092be2 100644
--- a/packages/components/src/AutoCompleteInput.scss
+++ b/packages/components/src/AutoCompleteInput.scss
@@ -1,7 +1,7 @@
@import '../scss/custom.scss';
$aci-option-btn-color: $foreground;
-$aci-option-keyboard-selected-bg: rgba($primary, 0.5);
+$aci-option-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);
$aci-option-hover-bg: $dropdown-link-hover-bg;
$aci-option-hover-color: $dropdown-link-hover-color;
diff --git a/packages/components/src/ComboBox.scss b/packages/components/src/ComboBox.scss
index d74b16a262..ef966db24f 100644
--- a/packages/components/src/ComboBox.scss
+++ b/packages/components/src/ComboBox.scss
@@ -2,7 +2,7 @@
@import '../scss/util.scss';
$cb-option-btn-color: $dropdown-link-color;
-$cb-option-keyboard-selected-bg: rgba($primary, 0.5);
+$cb-option-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);
$cb-option-hover-bg: $dropdown-link-hover-bg;
$cb-option-hover-color: $dropdown-link-hover-color;
diff --git a/packages/components/src/CustomTimeSelect.scss b/packages/components/src/CustomTimeSelect.scss
index d37f51bd2c..d786cc0887 100644
--- a/packages/components/src/CustomTimeSelect.scss
+++ b/packages/components/src/CustomTimeSelect.scss
@@ -2,7 +2,7 @@
@import '../scss/util.scss';
$cs-option-btn-color: $dropdown-link-color;
-$cs-option-keyboard-selected-bg: rgba($primary, 0.5);
+$cs-option-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);
$cs-option-hover-bg: $dropdown-link-hover-bg;
$cs-option-hover-color: $dropdown-link-hover-color;
diff --git a/packages/components/src/DraggableItemList.scss b/packages/components/src/DraggableItemList.scss
index 4997b1fd91..2922f8f5c5 100644
--- a/packages/components/src/DraggableItemList.scss
+++ b/packages/components/src/DraggableItemList.scss
@@ -1,10 +1,10 @@
@import '../scss/custom.scss';
$draggable-item-hover-bg: $secondary;
-$draggable-item-selected-bg: rgba($primary, 0.4);
+$draggable-item-selected-bg: hsla(var(--dh-color-accent-hsl), 0.4);
$draggable-item-selected-hover-bg: $primary;
$draggable-item-dragging-bg: $primary;
-$draggable-item-selected-dragged-bg: rgba($primary, 0.35);
+$draggable-item-selected-dragged-bg: hsla(var(--dh-color-accent-hsl), 0.35);
$draggable-item-border: $input-border-width solid transparent;
$draggable-item-focus-border: $input-border-width solid
$input-focus-border-color;
@@ -64,7 +64,7 @@ $draggable-item-grip-color: $mid;
.number-badge {
padding: 0 $spacer-2;
border-radius: 1rem;
- background-color: rgba($white, 0.25);
+ background-color: hsla(var(--dh-color-white-hsl), 0.25);
margin-right: $spacer-1;
}
}
diff --git a/packages/components/src/HierarchicalCheckboxMenu.scss b/packages/components/src/HierarchicalCheckboxMenu.scss
index 7cc5ce62b1..f5903bc016 100644
--- a/packages/components/src/HierarchicalCheckboxMenu.scss
+++ b/packages/components/src/HierarchicalCheckboxMenu.scss
@@ -1,19 +1,26 @@
@import '../scss/custom.scss';
+@import '../scss/util.scss';
.hcm-btn {
display: flex;
flex-direction: row;
+ align-items: center;
+ gap: $custom-select-padding-x;
justify-content: space-between;
border-radius: $border-radius;
border: $input-border-width solid $input-border-color;
background-color: $input-bg;
padding: $custom-select-padding-y $custom-select-padding-x;
- .hcm-icon {
- margin-top: $spacer-1;
- color: $input-border-color;
+ .cs-caret {
+ @include caret-icon;
+
+ margin-right: 4px;
}
}
+.hcm-btn:hover:not(:disabled) .cs-caret {
+ background-color: var(--dh-color-selector-hover-fg);
+}
.hcm-btn:focus {
border-color: $input-focus-border-color;
diff --git a/packages/components/src/HierarchicalCheckboxMenu.tsx b/packages/components/src/HierarchicalCheckboxMenu.tsx
index 63b4bbdefa..3c99524ac0 100644
--- a/packages/components/src/HierarchicalCheckboxMenu.tsx
+++ b/packages/components/src/HierarchicalCheckboxMenu.tsx
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { dhSort, IconDefinition } from '@deephaven/icons';
+import { IconDefinition } from '@deephaven/icons';
import classNames from 'classnames';
import Checkbox from './Checkbox';
import Popper from './popper/Popper';
@@ -253,7 +253,7 @@ class HierarchicalCheckboxMenu extends Component<
{icon && }
{menuText}
-
+
{
+ const { activeThemes } = useTheme();
+
+ const [themeColors, setThemeColors] = useState(null);
+
+ // Resolving css variables has to run in `useEffect` or `useLayoutEffect` so
+ // that we know React has updated the DOM with any styles set by the
+ // ThemeProvider.
+ useEffect(() => {
+ setThemeColors(getRandomAreaPlotAnimationThemeColors());
+ }, [activeThemes]);
+
const canvas = useRef(null);
const container = useRef(null);
const [shade, setShade] = useState(false);
@@ -56,6 +85,12 @@ const RandomAreaPlotAnimation = React.memo(() => {
// Returns the background fill create offscreen as pattern
function createPatternFill(): CanvasPattern | null | undefined {
+ if (themeColors == null) {
+ return null;
+ }
+
+ const { foregroundFill, foregroundStroke } = themeColors;
+
// create the off-screen canvas
const canvasPattern = document.createElement('canvas');
canvasPattern.width = PATTERN.SIZE;
@@ -64,15 +99,11 @@ const RandomAreaPlotAnimation = React.memo(() => {
// draw pattern to off-screen context
if (contextPattern != null) {
- contextPattern.fillStyle = FOREGROUND;
+ contextPattern.fillStyle = foregroundStroke;
contextPattern.fillRect(0, 0, PATTERN.DOT_SIZE, PATTERN.DOT_SIZE);
// add an overlay fill
- contextPattern.fillStyle =
- FOREGROUND +
- Math.round(255 * PATTERN.FILL_OPACITY)
- .toString(16)
- .padStart(2, '0'); // adds opacity in hex to color
+ contextPattern.fillStyle = foregroundFill;
contextPattern.fillRect(0, 0, PATTERN.SIZE, PATTERN.SIZE);
}
return contextPattern?.createPattern(canvasPattern, 'repeat');
@@ -158,16 +189,22 @@ const RandomAreaPlotAnimation = React.memo(() => {
* @param timestamp passed in callback from requestAnimationFrame
*/
function drawCanvas(timestamp?: DOMHighResTimeStamp): void {
+ if (themeColors == null) {
+ return;
+ }
+
lastTimestamp = lastTimestamp ?? timestamp;
+ const { background, foregroundStroke, gridColor } = themeColors;
+
assertNotNull(ctx);
// clear the canvas
- ctx.fillStyle = BACKGROUND;
+ ctx.fillStyle = background;
ctx.fillRect(0, 0, width, height);
drawGridLines(ctx);
ctx.lineWidth = 1;
- ctx.strokeStyle = GRID_COLOR;
+ ctx.strokeStyle = gridColor;
ctx.stroke();
// for speeds less then 60 px per second, subpixel motion is required to look smooth
@@ -177,7 +214,7 @@ const RandomAreaPlotAnimation = React.memo(() => {
drawAreaLine(data, ctx);
ctx.lineWidth = 2;
- ctx.strokeStyle = FOREGROUND;
+ ctx.strokeStyle = foregroundStroke;
ctx.stroke();
ctx.translate(-subPixelMotion, 0); // we don't pattern to shift however
@@ -303,12 +340,14 @@ const RandomAreaPlotAnimation = React.memo(() => {
resetIdleTimeout.cancel();
debouncedHandleResize.cancel();
};
- }, []);
+ }, [themeColors]);
return (
-
-
-
+ themeColors && (
+
+
+
+ )
);
});
diff --git a/packages/components/src/SearchInput.scss b/packages/components/src/SearchInput.scss
index 24fd080577..b635c3399b 100644
--- a/packages/components/src/SearchInput.scss
+++ b/packages/components/src/SearchInput.scss
@@ -46,17 +46,17 @@
.search-change-button {
background: none;
border: none;
- padding: 1px 2px;
+ padding: 1px 2px;
}
.search-change-text {
- background-color: rgba($white, 0.2);
+ background-color: hsla(var(--dh-color-white-hsl), 0.2);
border-radius: 10px;
padding: 1px 5px;
}
.search-match {
- background-color: rgba($white, 0.2);
+ background-color: hsla(var(--dh-color-white-hsl), 0.2);
border-radius: 10px;
padding: 1px 5px;
margin: 0 5px;
diff --git a/packages/components/src/SelectValueList.scss b/packages/components/src/SelectValueList.scss
index 9184c6ae2a..b5ab49ef67 100644
--- a/packages/components/src/SelectValueList.scss
+++ b/packages/components/src/SelectValueList.scss
@@ -8,7 +8,7 @@
padding: $input-padding-y 0 $input-padding-y;
&.is-invalid {
- border-color: rgba($danger, 0.85);
+ border-color: hsla(var(--dh-color-negative-hsl), 0.85);
}
}
diff --git a/packages/components/src/SocketedButton.scss b/packages/components/src/SocketedButton.scss
index 837a32d272..78ead78a08 100644
--- a/packages/components/src/SocketedButton.scss
+++ b/packages/components/src/SocketedButton.scss
@@ -1,6 +1,8 @@
@import '../scss/custom.scss';
-$socket-button-bg: $input-bg;
+$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-size: 18px;
$socket-linked-color: $primary;
@@ -12,7 +14,7 @@ $socket-bg: $content-bg;
display: inline-block;
border: $input-border-width solid $input-border-color;
padding: $btn-padding-y $btn-padding-x;
- color: $foreground;
+ color: var(--dh-color-neutral-contrast);
background: $socket-button-bg;
line-height: $btn-line-height;
font-family: $btn-font-family;
@@ -63,10 +65,10 @@ $socket-bg: $content-bg;
&:disabled,
&:disabled:hover {
cursor: not-allowed;
- border-color: $black;
- background-color: $input-disabled-bg;
+ border-color: $socket-button-disabled-border-color;
+ background-color: $socket-button-disabled-bg;
&::after {
- border-color: $black;
+ border-color: $socket-button-disabled-border-color;
}
}
}
@@ -93,22 +95,22 @@ $socket-bg: $content-bg;
&:disabled,
&:disabled:hover {
- border-color: $black;
- background-color: $input-disabled-bg;
+ border-color: $socket-button-disabled-border-color;
+ background-color: $socket-button-disabled-bg;
&::after {
background-color: $primary-dark;
- border-color: $black;
+ border-color: $socket-button-disabled-border-color;
}
}
}
.btn-socketed.is-invalid,
.btn-socketed.btn-socketed-linked.is-invalid {
- border-color: rgba($danger, 0.85);
+ border-color: hsla(var(--dh-color-negative-hsl), 0.85);
&::after {
- border-color: $danger;
- background-color: $danger;
+ border-color: var(--dh-color-negative-bg);
+ background-color: var(--dh-color-negative-bg);
}
.btn-socketed-icon.linked {
@@ -126,16 +128,17 @@ $socket-bg: $content-bg;
}
&:focus {
- box-shadow: 0 0 0 $input-btn-focus-width rgba($danger, 0.35);
+ box-shadow: 0 0 0 $input-btn-focus-width
+ hsla(var(--dh-color-negative-hsl), 0.35);
}
&:disabled,
&:disabled:hover {
- border-color: $black;
- background-color: $input-disabled-bg;
+ border-color: $socket-button-disabled-border-color;
+ background-color: $socket-button-disabled-bg;
&::after {
- background-color: $input-disabled-bg;
- border-color: $black;
+ background-color: $socket-button-disabled-bg;
+ border-color: $socket-button-disabled-border-color;
}
}
}
diff --git a/packages/components/src/ValidateLabelInput.scss b/packages/components/src/ValidateLabelInput.scss
index d4a31697a3..82184851db 100644
--- a/packages/components/src/ValidateLabelInput.scss
+++ b/packages/components/src/ValidateLabelInput.scss
@@ -1,6 +1,6 @@
@import '../scss/custom.scss';
-$modified: lighten($yellow, 10%);
+$modified: var(--dh-color-modified);
.validate-label {
padding-right: $spacer-2;
diff --git a/packages/components/src/context-actions/ContextActions.scss b/packages/components/src/context-actions/ContextActions.scss
index 7069034713..6c8ec56840 100644
--- a/packages/components/src/context-actions/ContextActions.scss
+++ b/packages/components/src/context-actions/ContextActions.scss
@@ -143,7 +143,7 @@ $hr-bg-color: $gray-700;
color: $contextmenu-selected-color;
.shortcut {
- color: lighten($contextmenu-selected-bg, 20%);
+ color: $gray-300;
}
}
diff --git a/packages/components/src/navigation/MenuItem.scss b/packages/components/src/navigation/MenuItem.scss
index 7667c637da..3c795b279c 100644
--- a/packages/components/src/navigation/MenuItem.scss
+++ b/packages/components/src/navigation/MenuItem.scss
@@ -1,11 +1,9 @@
@import '../../scss/custom.scss';
-$navigation-menu-item-color: $gray-300;
-
.btn-navigation-menu-item {
display: flex;
list-style: none;
- color: $navigation-menu-item-color;
+ color: var(--dh-color-menu-item-fg);
border-radius: 0;
text-align: left;
margin: 0;
@@ -32,7 +30,7 @@ $navigation-menu-item-color: $gray-300;
}
&:focus {
- background: rgba($primary, $focus-bg-transparency);
+ background: var(--dh-color-item-list-selected-bg);
border: $input-border-width solid $primary;
box-shadow: $input-btn-focus-box-shadow;
text-decoration: none;
@@ -44,7 +42,7 @@ $navigation-menu-item-color: $gray-300;
text-decoration: none;
.shortcut {
- color: lighten($contextmenu-selected-bg, 25%);
+ color: $gray-300;
}
.btn-switch.active {
diff --git a/packages/components/src/navigation/Stack.scss b/packages/components/src/navigation/Stack.scss
index 0919e9b2ac..7ba219c47e 100644
--- a/packages/components/src/navigation/Stack.scss
+++ b/packages/components/src/navigation/Stack.scss
@@ -17,7 +17,7 @@
.pushing-view,
.popping-view {
- box-shadow: -4px 0 8px rgba($black, 0.45);
+ box-shadow: -4px 0 8px hsla(var(--dh-color-black-hsl), 0.45);
}
.popping-view {
diff --git a/packages/components/src/popper/Popper.scss b/packages/components/src/popper/Popper.scss
index d263fd6287..cca022aff6 100644
--- a/packages/components/src/popper/Popper.scss
+++ b/packages/components/src/popper/Popper.scss
@@ -1,7 +1,7 @@
@import '../../scss/custom.scss';
$arrow-width: 5px;
-$popper-shadow: 0 0.1rem 1.5rem 0.25rem rgba($black, 0.45);
+$popper-shadow: 0 0.1rem 1.5rem 0.25rem hsla(var(--dh-color-black-hsl), 0.45);
$animation-scale: 0.92;
$animation-offset: 10px;
@@ -11,8 +11,8 @@ $animation-offset: 10px;
}
.popper {
- background: $tooltip-bg;
- color: $tooltip-color;
+ background: var(--dh-color-tooltip-bg);
+ color: var(--dh-color-tooltip-fg);
border-radius: $border-radius;
transition:
visibility $transition,
@@ -36,7 +36,7 @@ $animation-offset: 10px;
border-style: solid;
position: absolute;
margin: $arrow-width;
- border-color: $tooltip-bg;
+ border-color: var(--dh-color-tooltip-bg);
}
}
diff --git a/packages/components/src/theme/SpectrumThemeProvider.tsx b/packages/components/src/theme/SpectrumThemeProvider.tsx
index 6b190e1c32..1e433cd6e4 100644
--- a/packages/components/src/theme/SpectrumThemeProvider.tsx
+++ b/packages/components/src/theme/SpectrumThemeProvider.tsx
@@ -30,7 +30,12 @@ export function SpectrumThemeProvider({
const [id] = useState(isPortal ? shortid() : null);
return (
-
+
{children}
);
diff --git a/packages/components/src/theme/ThemeModel.ts b/packages/components/src/theme/ThemeModel.ts
index fae53dde04..0d024d57b6 100644
--- a/packages/components/src/theme/ThemeModel.ts
+++ b/packages/components/src/theme/ThemeModel.ts
@@ -4,10 +4,33 @@ export type CssVariableStyleContent = `:root{${string}`;
export type ThemeCssVariableName = `--dh-${string}`;
export type ThemePreloadColorVariable =
+ | '--dh-color-accent-contrast'
+ | '--dh-color-accent-bg'
+ | '--dh-color-accent-hover-bg'
+ | '--dh-color-accent-down-bg'
+ | '--dh-color-accent-key-focus-bg'
+ | '--dh-color-negative-bg'
| '--dh-color-loading-spinner-primary'
| '--dh-color-loading-spinner-secondary'
- | '--dh-color-background'
- | '--dh-color-foreground';
+ | '--dh-color-bg'
+ | '--dh-color-fg'
+ | '--dh-color-input-bg'
+ | '--dh-color-input-fg'
+ | '--dh-color-input-disabled-bg'
+ | '--dh-color-input-border'
+ | '--dh-color-input-placeholder'
+ | '--dh-color-input-focus-border'
+ // Preloading login specific variables should only be needed in DHE. Including
+ // them for now until we have a way for DHE to configure them. To be addressed
+ // by #1679
+ | '--dh-color-login-form-bg'
+ | '--dh-color-login-status-message'
+ | '--dh-color-login-logo-bg'
+ | '--dh-color-login-footer-fg'
+ | '--dh-color-random-area-plot-animation-fg-fill'
+ | '--dh-color-random-area-plot-animation-fg-stroke'
+ | '--dh-color-random-area-plot-animation-bg'
+ | '--dh-color-random-area-plot-animation-grid';
export type ThemeIconsRequiringManualColorChanges =
| '--dh-svg-icon-select-indicator'
@@ -18,15 +41,64 @@ export type ThemeIconsRequiringManualColorChanges =
export const DEFAULT_DARK_THEME_KEY = 'default-dark' satisfies BaseThemeKey;
export const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;
+// Hex versions of some of the default dark theme color palette needed for
+// preload defaults.
+const DEFAULT_DARK_THEME_PALETTE = {
+ blue: {
+ 500: '#2f5bc0',
+ 400: '#254ba4',
+ 600: '#3b6bda', // accent color
+ },
+ red: {
+ 600: '#c73f61',
+ },
+ gray: {
+ 50: '#1a171a',
+ 75: '#211f22',
+ 300: '#373438',
+ 400: '#403e41',
+ 500: '#5b5a5c',
+ 600: '#929192',
+ 700: '#c0bfbf',
+ 800: '#f0f0ee',
+ 900: '#fcfcfa',
+ },
+} as const;
+
// Css properties that are used in preload data with default values.
export const DEFAULT_PRELOAD_DATA_VARIABLES: Record<
ThemePreloadColorVariable,
string
> = {
- '--dh-color-loading-spinner-primary': '#3b6bda', // dark theme --dh-color-blue-600
- '--dh-color-loading-spinner-secondary': '#f0f0ee80', // dark theme --dh-color-gray-800 + 50% opacity
- '--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50
- '--dh-color-foreground': '#f0f0ee', // dark theme --dh-color-gray-800
+ '--dh-color-accent-contrast': DEFAULT_DARK_THEME_PALETTE.gray[900],
+ '--dh-color-accent-bg': DEFAULT_DARK_THEME_PALETTE.blue[600],
+ '--dh-color-accent-hover-bg': DEFAULT_DARK_THEME_PALETTE.blue[500],
+ '--dh-color-accent-down-bg': DEFAULT_DARK_THEME_PALETTE.blue[400],
+ '--dh-color-accent-key-focus-bg': DEFAULT_DARK_THEME_PALETTE.blue[500],
+ '--dh-color-negative-bg': DEFAULT_DARK_THEME_PALETTE.red[600],
+ '--dh-color-loading-spinner-primary': DEFAULT_DARK_THEME_PALETTE.blue[600],
+ '--dh-color-loading-spinner-secondary': `${DEFAULT_DARK_THEME_PALETTE.gray[800]}80`, // 50% opacity
+ '--dh-color-bg': DEFAULT_DARK_THEME_PALETTE.gray[50],
+ '--dh-color-fg': DEFAULT_DARK_THEME_PALETTE.gray[800],
+ '--dh-color-input-bg': DEFAULT_DARK_THEME_PALETTE.gray[500],
+ '--dh-color-input-fg': DEFAULT_DARK_THEME_PALETTE.gray[800],
+ '--dh-color-input-disabled-bg': DEFAULT_DARK_THEME_PALETTE.gray[300],
+ '--dh-color-input-border': DEFAULT_DARK_THEME_PALETTE.gray[600],
+ '--dh-color-input-placeholder': DEFAULT_DARK_THEME_PALETTE.gray[600],
+ '--dh-color-input-focus-border': `${DEFAULT_DARK_THEME_PALETTE.blue[600]}d9`, // 85% opacity
+ // Preloading login specific variables should only be needed in DHE. Including
+ // them for now until we have a way for DHE to configure them. To be addressed
+ // by #1679
+ '--dh-color-login-form-bg': DEFAULT_DARK_THEME_PALETTE.gray[400],
+ '--dh-color-login-status-message': DEFAULT_DARK_THEME_PALETTE.gray[600],
+ '--dh-color-login-logo-bg': DEFAULT_DARK_THEME_PALETTE.gray[900],
+ '--dh-color-login-footer-fg': DEFAULT_DARK_THEME_PALETTE.gray[700],
+ '--dh-color-random-area-plot-animation-fg-fill': `${DEFAULT_DARK_THEME_PALETTE.blue[600]}14`, // .08 opacity
+ '--dh-color-random-area-plot-animation-fg-stroke': `${DEFAULT_DARK_THEME_PALETTE.blue[600]}33`, // .2 opacity
+ '--dh-color-random-area-plot-animation-bg':
+ DEFAULT_DARK_THEME_PALETTE.gray[75],
+ '--dh-color-random-area-plot-animation-grid':
+ DEFAULT_DARK_THEME_PALETTE.gray[300],
};
/**
diff --git a/packages/components/src/theme/ThemeUtils.test.ts b/packages/components/src/theme/ThemeUtils.test.ts
index 86f31e1935..b281511f03 100644
--- a/packages/components/src/theme/ThemeUtils.test.ts
+++ b/packages/components/src/theme/ThemeUtils.test.ts
@@ -69,13 +69,13 @@ describe('calculatePreloadStyleContent', () => {
'--dh-color-loading-spinner-primary',
'pink'
);
- document.body.style.setProperty('--dh-color-background', 'orange');
+ document.body.style.setProperty('--dh-color-bg', 'orange');
expect(calculatePreloadStyleContent()).toEqual(
expectedContent({
...DEFAULT_PRELOAD_DATA_VARIABLES,
'--dh-color-loading-spinner-primary': 'pink',
- '--dh-color-background': 'orange',
+ '--dh-color-bg': 'orange',
})
);
});
@@ -481,44 +481,52 @@ describe.each([undefined, document.createElement('div')])(
expect(actual).toEqual(given);
});
- it('should replace css variables with resolved values', () => {
- const given = {
- aaa: 'var(--aaa)',
- bbb: 'var(--bbb1) var(--bbb2)',
- };
-
- const expected = {
- aaa: 'normalized:resolved:--dh-tmp-0',
- bbb: 'normalized:resolved:--dh-tmp-1 normalized:resolved:--dh-tmp-2',
- };
-
- const actual = resolveCssVariablesInRecord(given, targetElement);
-
- expect(expectedTargetEl.appendChild).toHaveBeenCalledWith(tmpPropEl);
- expect(tmpPropEl.remove).toHaveBeenCalled();
- expect(actual).toEqual(expected);
-
- let i = 0;
-
- Object.keys(given).forEach(key => {
- const varExpressions = given[key].split(' ');
- varExpressions.forEach(value => {
- const tmpPropKey = `--${TMP_CSS_PROP_PREFIX}-${i}`;
- i += 1;
-
- expect(tmpPropEl.style.setProperty).toHaveBeenCalledWith(
- tmpPropKey,
- value
- );
- expect(computedStyle.getPropertyValue).toHaveBeenCalledWith(
- tmpPropKey
- );
- expect(ColorUtils.normalizeCssColor).toHaveBeenCalledWith(
- `resolved:${tmpPropKey}`
- );
+ it.each([undefined, true, false])(
+ 'should replace css variables with resolved values: isAlphaOptional',
+ isAlphaOptional => {
+ const given = {
+ aaa: 'var(--aaa)',
+ bbb: 'var(--bbb1) var(--bbb2)',
+ };
+
+ const expected = {
+ aaa: 'normalized:resolved:--dh-tmp-0',
+ bbb: 'normalized:resolved:--dh-tmp-1 normalized:resolved:--dh-tmp-2',
+ };
+
+ const actual = resolveCssVariablesInRecord(
+ given,
+ targetElement,
+ isAlphaOptional
+ );
+
+ expect(expectedTargetEl.appendChild).toHaveBeenCalledWith(tmpPropEl);
+ expect(tmpPropEl.remove).toHaveBeenCalled();
+ expect(actual).toEqual(expected);
+
+ let i = 0;
+
+ Object.keys(given).forEach(key => {
+ const varExpressions = given[key].split(' ');
+ varExpressions.forEach(value => {
+ const tmpPropKey = `--${TMP_CSS_PROP_PREFIX}-${i}`;
+ i += 1;
+
+ expect(tmpPropEl.style.setProperty).toHaveBeenCalledWith(
+ tmpPropKey,
+ value
+ );
+ expect(computedStyle.getPropertyValue).toHaveBeenCalledWith(
+ tmpPropKey
+ );
+ expect(ColorUtils.normalizeCssColor).toHaveBeenCalledWith(
+ `resolved:${tmpPropKey}`,
+ isAlphaOptional ?? false
+ );
+ });
});
- });
- });
+ }
+ );
}
);
diff --git a/packages/components/src/theme/ThemeUtils.ts b/packages/components/src/theme/ThemeUtils.ts
index 86ac76da2f..eac8c3be0c 100644
--- a/packages/components/src/theme/ThemeUtils.ts
+++ b/packages/components/src/theme/ThemeUtils.ts
@@ -251,8 +251,8 @@ export function replaceSVGFillColor(
/**
* Make a copy of the given object replacing any css variable expressions
* contained in its prop values with values resolved from the given HTML element.
- * Variables that resolve to color strings will also be normalized to rgb or
- * rgba color strings.
+ * Variables that resolve to color strings will also be normalized to 8 digit
+ * hex values (or optionally 6 digit hex if `isAlphaOptional` is true).
*
* Note that the browser will force a reflow when calling `getComputedStyle` if
* css properties have changed. In order to avoid a reflow for every property
@@ -265,10 +265,13 @@ export function replaceSVGFillColor(
* @param record An object whose values may contain css var expressions
* @param targetElement The element to resolve css variables against. Defaults
* to document.body
+ * @param isAlphaOptional If true, the alpha value will be dropped from resolved
+ * 8 character hex colors if it is 'ff'. Defaults to false.
*/
export function resolveCssVariablesInRecord>(
record: T,
- targetElement: HTMLElement = document.body
+ targetElement: HTMLElement = document.body,
+ isAlphaOptional = false
): T {
const perfStart = performance.now();
@@ -295,7 +298,7 @@ export function resolveCssVariablesInRecord>(
const resolved = computedStyle.getPropertyValue(tmpPropKey);
- return ColorUtils.normalizeCssColor(resolved);
+ return ColorUtils.normalizeCssColor(resolved, isAlphaOptional);
};
// Resolve the temporary css variables
diff --git a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
index a4c3b2b601..4a8fbf0ea8 100644
--- a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
+++ b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
./theme-dark-components.css?raw
{
await page.goto('/ide/styleguide');
- const sampleSections = await page.locator('.sample-section');
+ const sampleSections = await page.locator(
+ '.sample-section:not(.sample-section-e2e-ignore)'
+ );
await expect(sampleSections).toHaveCount(sampleSectionIds.length);
});
@@ -100,10 +101,18 @@ buttonSectionIds.forEach((id, i) => {
for (let j = 0; j < buttonCount; j += 1) {
const button = buttons.nth(j);
- const isDisabled = await button.evaluate(el =>
- el.hasAttribute('disabled')
+ const { hasTextContent, isDisabled } = await button.evaluate(
+ (el: HTMLButtonElement) => ({
+ hasTextContent: el.textContent !== '',
+ isDisabled: el.hasAttribute('disabled'),
+ })
);
+ const isIconOnlyButton =
+ id === 'sample-section-buttons-inline' &&
+ !isDisabled &&
+ !hasTextContent;
+
// Focus
await button.focus();
await expect(sampleSection).toHaveScreenshot(
@@ -116,6 +125,11 @@ buttonSectionIds.forEach((id, i) => {
// Hover
await button.hover();
+
+ if (isIconOnlyButton) {
+ await expect(page.locator('.tooltip-content')).toHaveCount(1);
+ }
+
await expect(sampleSection).toHaveScreenshot(
`buttons-hover-section-${i}-${j}${isDisabled ? '-disabled' : ''}.png`
);
diff --git a/tests/styleguide.spec.ts-snapshots/alerts-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/alerts-chromium-linux.png
deleted file mode 100644
index 6accfed6b3..0000000000
Binary files a/tests/styleguide.spec.ts-snapshots/alerts-chromium-linux.png and /dev/null differ
diff --git a/tests/styleguide.spec.ts-snapshots/alerts-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/alerts-firefox-linux.png
deleted file mode 100644
index cf96eca83a..0000000000
Binary files a/tests/styleguide.spec.ts-snapshots/alerts-firefox-linux.png and /dev/null differ
diff --git a/tests/styleguide.spec.ts-snapshots/alerts-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/alerts-webkit-linux.png
deleted file mode 100644
index c687f927b1..0000000000
Binary files a/tests/styleguide.spec.ts-snapshots/alerts-webkit-linux.png and /dev/null 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 4e4c685fde..0b609edc05 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 fa8f4bb528..9a030208ff 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 94479a40e1..c7465d4023 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 cd0e560d9f..bf5a0c90d9 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 6a43fa83c9..36533346ad 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 e116ae5109..3ed72e4b46 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 2c7a7d4dbc..733e370138 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 d61a4a09ac..e7c1d47f6b 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 b759fcdcc7..a3c2c39fa7 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 1385203b4f..5c8f149355 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 59a9632f7c..dd7d0737ee 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 6d755673d3..58cf06a4c2 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 9979fa3834..739c0c6f95 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 66a526aae2..f7bf6e81ea 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 84247c1314..49cb687d0c 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
new file mode 100644
index 0000000000..b94fc9662f
Binary files /dev/null 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
new file mode 100644
index 0000000000..4b3d57e4cd
Binary files /dev/null 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
new file mode 100644
index 0000000000..51bf3a7d5a
Binary files /dev/null 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 741849cca5..80b7f839dd 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 e449192182..4594fc40dd 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 305dab3dbf..dc64e5e7ea 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 6d65bb8e54..b456f34671 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 3a00592936..6090a3ef28 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 5f6b34ec53..53e9ce17ca 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 1dd72462fc..443ae814ee 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 8489cc7fe5..62fb332229 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 c033de887e..39a83de527 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 0a6dbb799e..3f4eda3401 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 04c692b164..fd7335110d 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 58a372eb79..a820246db3 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 248674dfa5..4ea25c7bec 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 94333b5b8d..bef5f403bb 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 f13e49d3b0..5b1ed58670 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
new file mode 100644
index 0000000000..43fa493117
Binary files /dev/null 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
new file mode 100644
index 0000000000..393625bb9a
Binary files /dev/null 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
new file mode 100644
index 0000000000..70b621c684
Binary files /dev/null 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 ce46cea979..4e8ddc2c6c 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 2378f8d77b..92b0e1f28b 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 82765331b9..a6f44d377f 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 43c54e3d1c..7016736154 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 3d00e4224e..77e9995ddd 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 65b7a3a17a..00a8f376eb 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 f5767d2e1f..c47606d51b 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 86b68b82d7..28d2879ded 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 41af073de6..6e7d370bb7 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 14c5090ae8..b467bedf63 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 5d1deac2a8..f317443e27 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 6937746a36..bc44bfbabe 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 c371f62fd1..3bfdb91de3 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 91ae44bfd4..4cfad1962e 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 d15f7f24cb..8e050bf932 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 2c6f22cbe8..93dc50de9d 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 a39eba32e8..7b032c6497 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 c6e85b2fb7..6c94bd36b4 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 d6fe363729..e784f39e28 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 d4c2b1692c..58e3975e64 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 501a8efdee..8e9721c9d8 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-hover-section-0-0-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-hover-section-0-0-chromium-linux.png
index f98bcca186..1783f08c1e 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 587bbfad5e..052d2843b8 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 5a6840117a..9a24d4de80 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 9bdbcbf37f..e40661e498 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 09e6a91c3d..45dcf40ba1 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 4d0dd1be8c..2b15462d38 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 0511a9e32c..e1077a8ff4 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 0775097d93..206462cbcb 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 1cedcff247..9caf3a776c 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 6efd037b60..c0badfb7f1 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 d4696905c9..f82aef2e55 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 44f9254f02..71ec87a040 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 bc6e35ec57..6fc80c0aa5 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 704a01dee9..a56086ab02 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 8b56d56888..a1740a506a 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
new file mode 100644
index 0000000000..d2627bf18d
Binary files /dev/null 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
new file mode 100644
index 0000000000..317ec3ac5f
Binary files /dev/null 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
new file mode 100644
index 0000000000..3131b259ec
Binary files /dev/null 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 02e27dd90e..66fd914601 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 a8379570e8..3a5719241e 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 3db2982f15..69f3eaeccd 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 810eed4c55..687e713dee 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 bacbaed8de..3a4cd87890 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 85dd265aa0..802dcdac04 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 0aba72e565..2966ad095f 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 484a8cc7dd..c05db17583 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 2662c2cfc8..db53ee8efa 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 ab2f569eab..ec700266ad 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 d88a7441d9..7435706152 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 55252e1332..939d8df0c6 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 b4de0cb3ff..a02038e0e9 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 c47e752aa3..3c291dbf76 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 e7121d3b16..10ee96ea9e 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
new file mode 100644
index 0000000000..5cfdd62a7b
Binary files /dev/null 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
new file mode 100644
index 0000000000..4b85525b70
Binary files /dev/null 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
new file mode 100644
index 0000000000..f065afd4d0
Binary files /dev/null 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 882396cbe1..9106e9490b 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 d5e109a3f0..a35f744347 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 07224d634d..48aecc4290 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 f6cc5a7fa9..1fa26f0db9 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 2a56e89aab..ca3bdbac48 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 02471345ba..aec52610c4 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 f5767d2e1f..c47606d51b 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 86b68b82d7..28d2879ded 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 41af073de6..6e7d370bb7 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 a04962099d..7f9953b1a8 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 d90050b2db..756b4c0010 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 61679e39e9..325538bd4a 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 7dd95d46ba..8a0d74f321 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 da7a4cf2a9..9820980afa 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 6373e14ca9..52a459657f 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 99315d21ad..19626a67ef 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 1124fe66c8..a9873506ed 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 00612cc2e5..3ae2824872 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 5447f22738..fe2f62b2e8 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 b44d727eb5..ab46a8e37e 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 60774d70d7..6ed1efb768 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-inline-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/buttons-inline-chromium-linux.png
index f5767d2e1f..c47606d51b 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 86b68b82d7..28d2879ded 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 41af073de6..6e7d370bb7 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 6fd9cabae6..9a0f3517ec 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 8788791062..37d59ac2d6 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 18071bfdfb..0859b6af6e 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 2ace981254..6950bdca01 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 4b6b0aa785..565b1ccab3 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 f9cb5b49fb..05dec7bd38 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/chart-colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/chart-colors-chromium-linux.png
index 6fd4284b91..42c7cc5950 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 30193a3f00..cc738b91ea 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 9b966f1f53..711bbef38a 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/colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/colors-chromium-linux.png
index 29597bf6ad..d3d1172468 100644
Binary files a/tests/styleguide.spec.ts-snapshots/colors-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/colors-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/colors-firefox-linux.png
index f04c8d7547..d1afa5fb77 100644
Binary files a/tests/styleguide.spec.ts-snapshots/colors-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/colors-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/colors-webkit-linux.png
index 0a9ed4b488..43a0ed2a80 100644
Binary files a/tests/styleguide.spec.ts-snapshots/colors-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/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 2fd384784f..f278fd200d 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 13fa4decf1..c79e7f35a6 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 03bec103bd..7e2608bd4b 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 295e6b40ad..72629eb4ae 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 38b024d797..16c7aeb677 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 fcb35f895c..f1e64311ae 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 d1380c4c03..30d011eb1a 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 076504abd8..30b8494be4 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 0441a927f6..70ce6b9d02 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/dropdown-menus-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/dropdown-menus-chromium-linux.png
index f11c17cda5..598e950efd 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 bf5ecb0a60..82de5c7f7e 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 bf2fe82e84..ae18a900da 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/icons-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/icons-chromium-linux.png
index 0c1637d281..9e43438864 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 f2a7dae444..8c5e8ffb0d 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 448acdf957..d24d74690b 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 e8545b4b8b..34ca803b66 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 f519fefb0b..f89a42f53e 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-col1-row0-checkbox-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col1-row0-checkbox-chromium-linux.png
index db2566d43a..fd77321752 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 0e5074be99..12cab91c99 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 d55cca14b4..af3376ba28 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 f9050e1414..d92a393beb 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 ff8940ab17..db3ec3d220 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 ebb20beebf..e200dd1b17 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 07b23262b1..ceddfa3e94 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 53b3bd87f9..d45248596c 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 1b05308325..ae9996bf09 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 b4467276ed..285c55651e 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 3ddccfcead..1f03b29543 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 dbceb947c4..1b6743df3d 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 182445c48a..062e5323da 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 dec2626763..5cd3ce5cb0 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 157f45698d..18ecab4776 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 4c4d6a8ad9..cda09c46bf 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 c331820632..bcd3125f13 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 f7da3240d3..713bd91b55 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 c67617a30b..29a5e3d3e8 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 22e610badf..4709c77b84 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 3976336802..263084eef7 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 db50f01e62..b2aa3fc527 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 a7ebd4812b..87a4f167d7 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 1d083977a9..258d418327 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 78f2e6e6da..518f7481e4 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 f62244c5fe..2a4f33dc6d 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 c15ed256f8..5b89772151 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 cc90012bb8..e4664b9064 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 a775fb97a4..9765748039 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 bd2eab5ea7..007a9bae1e 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 08a25f7325..02c7257dba 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 18185628d6..432614707e 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 fd28c2547c..982ead4693 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 6118b9320c..ab8b225f22 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 f2b4572c27..102e794211 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 fc8e775c5a..1aae806ab4 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 9762a6d468..4433c49446 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 03f32286b0..a990b45530 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 a39b0587e4..9f91d86d12 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 78f2e6e6da..518f7481e4 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 f62244c5fe..2a4f33dc6d 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 c15ed256f8..5b89772151 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-col4-row0-text-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col4-row0-text-chromium-linux.png
index 328f77418e..9c3a729d68 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 0008a380df..9662af0c1d 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 636213224b..6e6fff690d 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 6e2f0af11e..96c2f7e462 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 318ca2c919..f5c2a126e3 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 1dc0972f03..cfe46799b5 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 178a53c5ac..30b5f1e77e 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 400f7d486c..15114e5ac2 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 483b364828..95ba51de4c 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-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-webkit-linux.png
index 92a5ca581f..6342d22084 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/modals-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/modals-chromium-linux.png
index 5159b6fe58..931426ec32 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 ad7551bf4b..19b25ed706 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 0c63848a58..dbd26424b5 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/progress-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/progress-chromium-linux.png
index a12207579a..3589b899e2 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 165e21dc34..503dcd4f04 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 9e09f94ab6..110dc1601c 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 c2415b2ce2..2fa5e1e26a 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 2add519b2c..f2869ca38f 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 52fa477eb6..498369c9ab 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/theme-color-palette-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/theme-color-palette-chromium-linux.png
index fa25d5fca0..903034ed7f 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 4640db3e45..ec61141fd9 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 18dff0c24e..47b455f580 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/tooltips-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/tooltips-chromium-linux.png
index 6122e09594..c7d3bbfe0d 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 f367bcb624..b125e1dd0d 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 12983364ea..1f72038c72 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-snapshots/search-1-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/search-1-chromium-linux.png
index c820b1b6a9..25ac699b46 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 bb93fff5a4..342d916e32 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 2bbf4921e6..9944ea44d1 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 6286e48d92..4af61a3bdc 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 9d872eec31..e445b9a3e8 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 1dbb8a46f6..b39a0efafa 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