diff --git a/cypress/snapshots/app.spec.ts/auxspectrum.snap.png b/cypress/snapshots/app.spec.ts/auxspectrum.snap.png
index 9e2f0774f..f2bbdadb5 100644
Binary files a/cypress/snapshots/app.spec.ts/auxspectrum.snap.png and b/cypress/snapshots/app.spec.ts/auxspectrum.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/edit_domain.snap.png b/cypress/snapshots/app.spec.ts/edit_domain.snap.png
index 4f837cc8a..62c69081d 100644
Binary files a/cypress/snapshots/app.spec.ts/edit_domain.snap.png and b/cypress/snapshots/app.spec.ts/edit_domain.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/heatmap_2D.snap.png b/cypress/snapshots/app.spec.ts/heatmap_2D.snap.png
index 1558f9e8f..1b6f21984 100644
Binary files a/cypress/snapshots/app.spec.ts/heatmap_2D.snap.png and b/cypress/snapshots/app.spec.ts/heatmap_2D.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/heatmap_2D_complex.snap.png b/cypress/snapshots/app.spec.ts/heatmap_2D_complex.snap.png
index b1ab9bfd4..2d659bd88 100644
Binary files a/cypress/snapshots/app.spec.ts/heatmap_2D_complex.snap.png and b/cypress/snapshots/app.spec.ts/heatmap_2D_complex.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/heatmap_2D_inverted_cmap.snap.png b/cypress/snapshots/app.spec.ts/heatmap_2D_inverted_cmap.snap.png
index 9031e0da7..9e6adf80c 100644
Binary files a/cypress/snapshots/app.spec.ts/heatmap_2D_inverted_cmap.snap.png and b/cypress/snapshots/app.spec.ts/heatmap_2D_inverted_cmap.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/heatmap_4d_default.snap.png b/cypress/snapshots/app.spec.ts/heatmap_4d_default.snap.png
index 91c8f1012..cffa15370 100644
Binary files a/cypress/snapshots/app.spec.ts/heatmap_4d_default.snap.png and b/cypress/snapshots/app.spec.ts/heatmap_4d_default.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/heatmap_4d_remapped.snap.png b/cypress/snapshots/app.spec.ts/heatmap_4d_remapped.snap.png
index 2bc2992ff..0f8ba4668 100644
Binary files a/cypress/snapshots/app.spec.ts/heatmap_4d_remapped.snap.png and b/cypress/snapshots/app.spec.ts/heatmap_4d_remapped.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/heatmap_4d_sliced.snap.png b/cypress/snapshots/app.spec.ts/heatmap_4d_sliced.snap.png
index bb254c1da..7b79db0fa 100644
Binary files a/cypress/snapshots/app.spec.ts/heatmap_4d_sliced.snap.png and b/cypress/snapshots/app.spec.ts/heatmap_4d_sliced.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/heatmap_4d_zeros.snap.png b/cypress/snapshots/app.spec.ts/heatmap_4d_zeros.snap.png
index 7f9d02294..e5539a905 100644
Binary files a/cypress/snapshots/app.spec.ts/heatmap_4d_zeros.snap.png and b/cypress/snapshots/app.spec.ts/heatmap_4d_zeros.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/line_1D.snap.png b/cypress/snapshots/app.spec.ts/line_1D.snap.png
index 05a2ffc8d..78f4c1ef5 100644
Binary files a/cypress/snapshots/app.spec.ts/line_1D.snap.png and b/cypress/snapshots/app.spec.ts/line_1D.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/line_complex_1D.snap.png b/cypress/snapshots/app.spec.ts/line_complex_1D.snap.png
index ca29cfe1c..25266ccf4 100644
Binary files a/cypress/snapshots/app.spec.ts/line_complex_1D.snap.png and b/cypress/snapshots/app.spec.ts/line_complex_1D.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/logspectrum.snap.png b/cypress/snapshots/app.spec.ts/logspectrum.snap.png
index 4e59c027d..fcf1dd711 100644
Binary files a/cypress/snapshots/app.spec.ts/logspectrum.snap.png and b/cypress/snapshots/app.spec.ts/logspectrum.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/nximage.snap.png b/cypress/snapshots/app.spec.ts/nximage.snap.png
index bac749ca1..f9101a99c 100644
Binary files a/cypress/snapshots/app.spec.ts/nximage.snap.png and b/cypress/snapshots/app.spec.ts/nximage.snap.png differ
diff --git a/cypress/snapshots/app.spec.ts/nxspectrum.snap.png b/cypress/snapshots/app.spec.ts/nxspectrum.snap.png
index b925fecbd..de9e3ff48 100644
Binary files a/cypress/snapshots/app.spec.ts/nxspectrum.snap.png and b/cypress/snapshots/app.spec.ts/nxspectrum.snap.png differ
diff --git a/src/h5web/App.module.css b/src/h5web/App.module.css
index 0358e47e2..3c84d350b 100644
--- a/src/h5web/App.module.css
+++ b/src/h5web/App.module.css
@@ -1,5 +1,5 @@
.root {
- background-color: var(--white);
+ background-color: white;
}
.explorer {
diff --git a/src/h5web/toolbar/ComplexToolbar.tsx b/src/h5web/toolbar/ComplexToolbar.tsx
index ce38359ba..0b9205ccd 100644
--- a/src/h5web/toolbar/ComplexToolbar.tsx
+++ b/src/h5web/toolbar/ComplexToolbar.tsx
@@ -55,6 +55,18 @@ function ComplexToolbar() {
+ setVisType(value)}
+ options={Object.values(ComplexVisType)}
+ optionComponent={({ option }) => (
+ // eslint-disable-next-line react/jsx-no-useless-fragment
+ <>{`${VIS_TYPE_SYMBOLS[option]} ${option}`}>
+ )}
+ />
+
+
+
@@ -74,18 +86,6 @@ function ComplexToolbar() {
- setVisType(value)}
- options={Object.values(ComplexVisType)}
- optionComponent={({ option }) => (
- // eslint-disable-next-line react/jsx-no-useless-fragment
- <>{`${VIS_TYPE_SYMBOLS[option]} ${option}`}>
- )}
- />
-
-
-
);
diff --git a/src/h5web/toolbar/Toolbar.module.css b/src/h5web/toolbar/Toolbar.module.css
index f62b37eaf..61bbb54dd 100644
--- a/src/h5web/toolbar/Toolbar.module.css
+++ b/src/h5web/toolbar/Toolbar.module.css
@@ -2,7 +2,9 @@
flex: 1 1 0%;
display: flex;
min-width: 0;
+ height: 2.5rem;
padding: 0 0.5rem;
+ background-color: var(--h5w-toolbar--bgColor, aliceblue);
font-size: 0.875rem;
}
@@ -32,7 +34,7 @@
.sep {
margin: 0.375rem 0.25rem;
- border-left: 1px solid rgba(0, 0, 0, 0.2);
+ border-left: 1px solid var(--h5w-toolbar-separator--color, rgba(0, 0, 0, 0.2));
}
.btn {
@@ -64,8 +66,8 @@
}
.btn[data-raised] > .btnLike {
- background-color: var(--btn-bg-raised);
- box-shadow: var(--btn-shadow-raised) var(--btn-shadow-color);
+ box-shadow: 0 0 1px inset var(--h5w-btnRaised--shadowColor, gray),
+ -1px -1px 2px inset var(--h5w-btnRaised--shadowColor, gray);
}
.icon {
@@ -74,7 +76,7 @@
}
.btn[data-small] .icon {
- opacity: 0.8;
+ font-size: 1.375em;
}
.icon:not(:last-child) {
@@ -91,37 +93,33 @@
}
.btn:hover > .btnLike {
- background-color: var(--secondary-lighter);
- box-shadow: var(--btn-shadow-idle) var(--btn-shadow-color);
-}
-
-.btn:active > .btnLike {
- box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-color);
+ background-color: var(--h5w-btn-hover--bgColor, whitesmoke);
+ box-shadow: -1px -1px 2px inset var(--h5w-btn-hover--shadowColor, var(--h5w-btnRaised--shadowColor, gray));
}
.btn[data-raised]:hover > .btnLike {
- box-shadow: var(--btn-shadow-raised) var(--btn-shadow-color),
- var(--btn-shadow-idle) var(--btn-shadow-color);
+ box-shadow: 0 0 1px inset var(--h5w-btnRaised-hover--shadowColor, dimgray),
+ -1px -1px 2px inset var(--h5w-btnRaised-hover--shadowColor, dimgray);
}
-.btn[aria-pressed='true'] > .btnLike,
-.btn[aria-checked='true'] > .btnLike {
- background-color: var(--secondary-light);
- box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-dark-color);
+.btn:active > .btnLike,
+.btn[data-raised]:active > .btnLike,
+.btn[aria-pressed='true'] > .btnLike, /* toggle buttons, domain slider "edit" button */
+.btn[aria-checked='true'] > .btnLike, /* toggle group buttons */
+.btn[aria-haspopup][aria-expanded='true'] > .btnLike /* selectors and overflow menu buttons */ {
+ background-color: var(--h5w-btnPressed--bgColor, white);
+ box-shadow: 1px 1px 2px inset
+ var(--h5w-btnPressed--shadowColor, var(--h5w-btnRaised--shadowColor, gray));
}
.btn[aria-pressed='true']:hover > .btnLike,
-.btn[aria-checked='true']:hover > .btnLike {
- box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-darker-color);
-}
-
-.btn[aria-expanded='true'] > .btnLike {
- background-color: var(--secondary-lighter);
- box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-color);
-}
-
-.btn[aria-expanded='true']:hover > .btnLike {
- box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-dark-color);
+.btn[aria-checked='true']:hover > .btnLike,
+.btn[aria-haspopup][aria-expanded='true']:hover > .btnLike {
+ box-shadow: 1px 1px 2px inset
+ var(
+ --h5w-btnPressed-hover--shadowColor,
+ var(--h5w-btnRaised-hover--shadowColor, dimgray)
+ );
}
.popup {
@@ -132,7 +130,10 @@
}
.popupInner {
- background-color: var(--secondary-light-bg-90);
+ background-color: var(
+ --h5w-domainSlider-tooltip--bgColor,
+ rgba(255, 255, 255, 0.9)
+ );
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
rgba(0, 0, 0, 0.1) 0px 4px 11px;
}
diff --git a/src/h5web/toolbar/controls/DomainSlider/BoundEditor.module.css b/src/h5web/toolbar/controls/DomainSlider/BoundEditor.module.css
index a186aaa6b..ad8f553e9 100644
--- a/src/h5web/toolbar/controls/DomainSlider/BoundEditor.module.css
+++ b/src/h5web/toolbar/controls/DomainSlider/BoundEditor.module.css
@@ -10,7 +10,7 @@
margin: 0 1rem 0 0;
text-transform: uppercase;
font-size: inherit;
- color: var(--near-black);
+ color: var(--h5w-domainSlider-tooltip--colorAlt, #333);
}
.value {
@@ -21,9 +21,9 @@
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid transparent;
border-radius: 0.125rem;
- box-shadow: 0 0 2px var(--dark-slate-gray);
+ box-shadow: 0 0 2px var(--h5w-domainSlider-boundInput--shadowColor, dimgray);
text-align: right;
- color: var(--near-black);
+ color: var(--h5w-domainSlider-tooltip--colorAlt, #333);
font-weight: inherit;
line-height: inherit;
transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
@@ -31,29 +31,31 @@
}
.value:hover {
- box-shadow: 1px 1px 2px 1px var(--dark-gray);
+ box-shadow: 1px 1px 2px 1px
+ var(--h5w-domainSlider-boundInput--shadowColor, dimgray);
}
-.value:focus {
- box-shadow: 1px 1px 2px 1px var(--secondary-dark);
+.value:focus,
+.boundEditor[data-editing='true'] .value:hover {
+ box-shadow: 1px 1px 2px 1px
+ var(--h5w-domainSlider-boundInput-focus--shadowColor, royalblue);
outline: none;
}
.boundEditor[data-error] .label,
.boundEditor[data-error] .value {
- color: var(--warn);
+ color: var(--h5w-error--color, brown);
}
.boundEditor[data-editing='true'] .value {
- background-color: var(--white);
- border-color: var(--secondary-dark);
+ background-color: var(--h5w-domainSlider-boundInput-editing--bgColor, white);
+ border-color: var(
+ --h5w-domainSlider-boundInput-editing--borderColor,
+ royalblue
+ );
outline: none;
}
-.boundEditor[data-editing='true'] .value:hover {
- box-shadow: 1px 1px 2px 1px var(--secondary-dark);
-}
-
.actionBtn {
composes: actionBtn from './DomainTooltip.module.css';
}
diff --git a/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css
index 3dde89a71..40116dc72 100644
--- a/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css
+++ b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css
@@ -30,7 +30,7 @@
.dataRange > span {
margin-left: 0.5rem;
font-weight: 700;
- color: var(--near-black);
+ color: var(--h5w-domainSlider-tooltip--colorAlt, #333);
}
.autoscale {
@@ -53,12 +53,12 @@
}
.actionBtn:hover {
- background-color: var(--secondary-light);
- box-shadow: var(--btn-shadow-idle) var(--btn-shadow-color);
+ background-color: var(--h5w-btn-hover--bgColor, whitesmoke);
+ box-shadow: -1px -1px 2px inset var(--h5w-btnRaised--shadowColor, gray);
}
.actionBtn:active {
- box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-color);
+ box-shadow: 1px 1px 2px inset var(--h5w-btnRaised--shadowColor, gray);
}
.error {
@@ -66,7 +66,7 @@
align-items: flex-start;
min-height: 2rem;
margin-top: -0.25rem;
- color: var(--warn);
+ color: var(--h5w-error--color, brown);
}
.errorMessage {
diff --git a/src/h5web/toolbar/controls/DomainSlider/Thumb.module.css b/src/h5web/toolbar/controls/DomainSlider/Thumb.module.css
index c06509139..6caf9d497 100644
--- a/src/h5web/toolbar/controls/DomainSlider/Thumb.module.css
+++ b/src/h5web/toolbar/controls/DomainSlider/Thumb.module.css
@@ -12,33 +12,33 @@
position: relative;
padding: 0;
border-radius: 50%;
- box-shadow: var(--btn-shadow-idle) var(--btn-shadow-dark-color);
+ box-shadow: -1px -1px 2px inset var(--h5w-btnRaised-hover--shadowColor, dimgray);
transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
}
.thumb[data-auto='false'] > .thumbBtnLike {
width: var(--thumb-size);
height: var(--thumb-size);
- background-color: var(--secondary);
+ background-color: var(--h5w-domainSlider-thumb--bgColor, lightgray);
}
.thumb[data-auto='true'] > .thumbBtnLike {
width: var(--thumb-size-auto);
height: var(--thumb-size-auto);
- background-color: var(--secondary-light);
+ background-color: var(--h5w-domainSlider-thumb-auto--bgColor, whitesmoke);
}
.thumb[data-auto='false']:hover > .thumbBtnLike {
opacity: 0.8;
- box-shadow: var(--btn-shadow-idle-hover) var(--btn-shadow-dark-color);
+ box-shadow: -2px -2px 2px inset var(--h5w-btnRaised-hover--shadowColor, dimgray);
}
.thumb[data-auto='true']:hover > .thumbBtnLike {
- box-shadow: var(--btn-shadow-idle-hover) var(--btn-shadow-dark-color);
+ box-shadow: -2px -2px 2px inset var(--h5w-btnRaised-hover--shadowColor, dimgray);
}
.thumb[data-error] {
- color: var(--warn);
+ color: var(--h5w-error--color, brown);
font-size: 1.125em;
}
diff --git a/src/h5web/toolbar/controls/DomainSlider/Track.module.css b/src/h5web/toolbar/controls/DomainSlider/Track.module.css
index b7a8bb7f8..248a71688 100644
--- a/src/h5web/toolbar/controls/DomainSlider/Track.module.css
+++ b/src/h5web/toolbar/controls/DomainSlider/Track.module.css
@@ -4,8 +4,8 @@
align-self: center;
height: 0.5rem;
margin: 0 calc(var(--thumb-size) / 2); /* make track end in middle of thumbs */
- background-color: var(--secondary-dark-15);
- box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-color);
+ background-color: var(--h5w-domainSlider-track--bgColor, lightgray);
+ box-shadow: 1px 1px 2px inset var(--h5w-domainSlider-track--shadowColor, gray);
border-radius: 0.25rem;
overflow: hidden; /* crop data track to root track's border radius */
}
@@ -14,7 +14,7 @@
position: absolute;
top: 0;
bottom: 0;
- background-color: var(--secondary-dark);
- box-shadow: 0 -2px 3px inset var(--secondary-darker);
+ background-color: var(--h5w-domainSlider-dataTrack--bgColor, royalblue);
+ box-shadow: 0 -2px 3px inset var(--h5w-domainSlider-dataTrack--shadowColor, midnightblue);
border-radius: 2px;
}
diff --git a/src/h5web/toolbar/controls/ScaleSelector/ScaleOption.tsx b/src/h5web/toolbar/controls/ScaleSelector/ScaleOption.tsx
index ff210a8e6..7e5f18342 100644
--- a/src/h5web/toolbar/controls/ScaleSelector/ScaleOption.tsx
+++ b/src/h5web/toolbar/controls/ScaleSelector/ScaleOption.tsx
@@ -2,7 +2,7 @@ import type { IconType } from 'react-icons/lib';
import { MdSort, MdFilterList } from 'react-icons/md';
import { ScaleType } from '../../../vis-packs/core/models';
import MdGraphicEqRotated from './MdGraphicEqRotated';
-import styles from './ScaleSelector.module.css';
+import styles from '../../Toolbar.module.css';
const ICONS: Record = {
[ScaleType.Linear]: MdSort,
diff --git a/src/h5web/toolbar/controls/ScaleSelector/ScaleSelector.module.css b/src/h5web/toolbar/controls/ScaleSelector/ScaleSelector.module.css
deleted file mode 100644
index a30000fbd..000000000
--- a/src/h5web/toolbar/controls/ScaleSelector/ScaleSelector.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.root {
- display: flex;
-}
-
-.icon {
- composes: icon from '../../Toolbar.module.css';
-}
-
-.label {
- display: flex;
- color: var(--secondary-dark);
- align-items: center;
- margin-left: 0.5em;
-}
diff --git a/src/h5web/toolbar/controls/ScaleSelector/ScaleSelector.tsx b/src/h5web/toolbar/controls/ScaleSelector/ScaleSelector.tsx
index d6fc95399..e2a868496 100644
--- a/src/h5web/toolbar/controls/ScaleSelector/ScaleSelector.tsx
+++ b/src/h5web/toolbar/controls/ScaleSelector/ScaleSelector.tsx
@@ -1,27 +1,24 @@
import { ScaleType } from '../../../vis-packs/core/models';
import Selector from '../Selector/Selector';
-import styles from './ScaleSelector.module.css';
import ScaleOption from './ScaleOption';
interface Props {
- value: ScaleType;
label?: string;
+ value: ScaleType;
onScaleChange: (scale: ScaleType) => void;
}
function ScaleSelector(props: Props) {
- const { value, label, onScaleChange } = props;
+ const { label, value, onScaleChange } = props;
return (
-
- {label && {label}}
-
-
+
);
}
diff --git a/src/h5web/toolbar/controls/Selector/Selector.module.css b/src/h5web/toolbar/controls/Selector/Selector.module.css
index 471399683..5832a6d35 100644
--- a/src/h5web/toolbar/controls/Selector/Selector.module.css
+++ b/src/h5web/toolbar/controls/Selector/Selector.module.css
@@ -1,3 +1,13 @@
+.root {
+ display: flex;
+ align-items: center;
+}
+
+.label {
+ color: var(--h5w-selector-label--color, royalblue);
+ margin-left: 0.25rem;
+}
+
.wrapper {
position: relative;
z-index: 1;
@@ -13,15 +23,15 @@
padding: 0 0.375rem 0 0.5625rem;
}
-.icon {
+.arrowIcon {
align-self: center;
margin-top: 1px;
margin-left: 1px;
- color: var(--dark-gray);
+ color: var(--h5w-selector-arrowIcon--color, dimgray);
font-size: 1.25em;
}
-.btn[aria-expanded='true'] .icon {
+.btn[aria-expanded='true'] .arrowIcon {
transform: rotate(180deg);
}
@@ -31,7 +41,7 @@
left: 0;
min-width: 100%;
padding-top: 0.25rem;
- background-color: var(--white);
+ background-color: var(--h5w-selector-menu--bgColor, white);
overflow: hidden scroll;
scrollbar-width: thin;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
@@ -52,7 +62,7 @@
margin-top: 0.75rem;
margin-bottom: 0.25rem;
padding-left: 0.75rem;
- color: var(--gray);
+ color: var(--h5w-selector-groupLabel--color, gray);
text-transform: uppercase;
font-size: 0.75em;
font-weight: 600;
@@ -76,11 +86,11 @@
}
.option:hover {
- background-color: var(--secondary-light-bg);
+ background-color: var(--h5w-selector-option-hover--bgColor, whitesmoke);
}
.option[data-selected] {
- background-color: var(--secondary-light);
+ background-color: var(--h5w-selector-option-selected--bgColor, #eee);
}
.gradient {
diff --git a/src/h5web/toolbar/controls/Selector/Selector.tsx b/src/h5web/toolbar/controls/Selector/Selector.tsx
index bd764c12f..c9bf608df 100644
--- a/src/h5web/toolbar/controls/Selector/Selector.tsx
+++ b/src/h5web/toolbar/controls/Selector/Selector.tsx
@@ -11,6 +11,7 @@ const MENU_TOP = 87; // HACK: height of breadcrumbs bar + height of toolbar
const MENU_BOTTOM = 16; // offset from bottom of viewport
interface Props {
+ label?: string;
value: T;
disabled?: boolean;
onChange: (value: T) => void;
@@ -19,50 +20,61 @@ interface Props {
}
function Selector(props: Props) {
- const { value, disabled, onChange, options, optionComponent: Option } = props;
+ const {
+ label,
+ value,
+ disabled,
+ onChange,
+ options,
+ optionComponent: Option,
+ } = props;
const { height: winHeight } = useWindowSize();
const menuMaxHeight = winHeight - MENU_TOP - MENU_BOTTOM;
return (
-
-
+
+ {label &&
{label}}
-
- {Object.entries(options).map(([groupLabel, groupOptions]) => (
- -
- {groupLabel}
-
-
- ))}
-
- )}
-
-
+
+
+
+
+ {Object.entries(options).map(([groupLabel, groupOptions]) => (
+ -
+ {groupLabel}
+
+
+ ))}
+
+ )}
+
+
+
);
}
diff --git a/src/h5web/toolbar/controls/ToggleGroup.module.css b/src/h5web/toolbar/controls/ToggleGroup.module.css
index 7eb2315fc..d34819c3a 100644
--- a/src/h5web/toolbar/controls/ToggleGroup.module.css
+++ b/src/h5web/toolbar/controls/ToggleGroup.module.css
@@ -5,7 +5,7 @@
.btn {
composes: btn from '../Toolbar.module.css';
- padding: 1px;
+ padding: 0;
}
.btnLike {
@@ -16,20 +16,13 @@
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
+
.btn:not(:last-child) > .btnLike {
+ margin-right: -1px; /* attenuate shadow between buttons */
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
-.btn[aria-checked='false'] > .btnLike {
- background-color: var(--secondary-dark-15);
- box-shadow: var(--btn-shadow-idle) var(--btn-shadow-color);
-}
-
-.btn[aria-checked='false']:hover > .btnLike {
- box-shadow: var(--btn-shadow-idle) var(--btn-shadow-dark-color);
-}
-
.icon {
composes: icon from '../Toolbar.module.css';
}
diff --git a/src/h5web/toolbar/controls/ToggleGroup.tsx b/src/h5web/toolbar/controls/ToggleGroup.tsx
index e245b2c66..146020c25 100644
--- a/src/h5web/toolbar/controls/ToggleGroup.tsx
+++ b/src/h5web/toolbar/controls/ToggleGroup.tsx
@@ -44,6 +44,7 @@ function Btn(props: BtnProps) {
className={styles.btn}
type="button"
role={role === 'tablist' ? 'tab' : 'radio'}
+ data-raised
aria-checked={value === selectedValue}
onClick={() => {
onChange(value);
diff --git a/src/h5web/vis-packs/core/heatmap/ColorBar.module.css b/src/h5web/vis-packs/core/heatmap/ColorBar.module.css
index e12512a66..5d14f9772 100644
--- a/src/h5web/vis-packs/core/heatmap/ColorBar.module.css
+++ b/src/h5web/vis-packs/core/heatmap/ColorBar.module.css
@@ -24,7 +24,7 @@
.gradientBar {
grid-area: gradient;
display: flex;
- border: 1px solid var(--black);
+ border: 1px solid currentColor;
}
.gradient {
diff --git a/src/h5web/vis-packs/core/shared/TooltipMesh.module.css b/src/h5web/vis-packs/core/shared/TooltipMesh.module.css
index d1c922fce..21ec49183 100644
--- a/src/h5web/vis-packs/core/shared/TooltipMesh.module.css
+++ b/src/h5web/vis-packs/core/shared/TooltipMesh.module.css
@@ -1,6 +1,6 @@
.tooltip {
padding: 0.25rem 0.5rem;
- background-color: var(--h5w-tooltip--bgColor, whitesmoke);
+ background-color: var(--h5w-tooltip--bgColor, rgba(255, 255, 255, 0.9));
border-radius: 0.25rem;
box-shadow: rgba(33, 33, 33, 0.2) 0px 1px 2px;
color: var(--h5w-tooltip--color, inherit);
diff --git a/src/h5web/visualizer/Visualizer.module.css b/src/h5web/visualizer/Visualizer.module.css
index cc60e01c3..e8adefa0f 100644
--- a/src/h5web/visualizer/Visualizer.module.css
+++ b/src/h5web/visualizer/Visualizer.module.css
@@ -17,8 +17,8 @@
z-index: 1;
display: flex;
justify-content: space-between;
+ height: 2.5rem;
background-color: var(--secondary-light-bg);
- min-height: 2.5rem;
}
.fallback {
@@ -27,7 +27,7 @@
.error {
padding: 1em;
- color: var(--danger);
+ color: brown;
}
.error > span {
diff --git a/src/stories/Customization.stories.mdx b/src/stories/Customization.stories.mdx
index 38715e639..3fa01a2c2 100644
--- a/src/stories/Customization.stories.mdx
+++ b/src/stories/Customization.stories.mdx
@@ -48,41 +48,41 @@ as you see fit. For instance, if you'd like to change the color of the curve of
}
```
-#### Common
-
-| Name | Default | Description |
-| ------------------------------ | ------------- | --------------------------- |
-| `--h5w-canvas--bgColor` | `transparent` | Background color of canvas |
-| `--h5w-plotTitle--color` | `inherit` | Text color of plot title |
-| `--h5w-plotTitle--fontFamily` | `inherit` | Font family of plot title |
-| `--h5w-plotTitle--fontSize` | `1.125em` | Font size of plot title |
-| `--h5w-plotTitle--fontWeight` | `inherit` | Font weight of plot title |
-| `--h5w-ticks--color` | `gray` | Color of ticks |
-| `--h5w-tickLabels--color` | `#333` | Text color of tick labels |
-| `--h5w-tickLabels--fontFamily` | `inherit` | Font family of tick labels |
-| `--h5w-tickLabels--fontSize` | `inherit` | Font size of tick labels |
-| `--h5w-axisLabels--color` | `#333` | Text color of axis labels |
-| `--h5w-axisLabels--fontFamily` | `inherit` | Font family of axis labels |
-| `--h5w-axisLabels--fontSize` | `inherit` | Font size of axis labels |
-| `--h5w-axisLabels--fontWeight` | `600` | Font weight of axis labels |
-| `--h5w-grid--color` | `gray` | Color of grid lines |
-| `--h5w-grid--opacity` | `0.33` | Opacity of grid lines |
-| `--h5w-tooltip--color` | `inherit` | Text color of tooltip |
-| `--h5w-tooltip--bgColor` | `whitesmoke` | Background color of tooltip |
-| `--h5w-tooltip--fontFamily` | `inherit` | Font family of tooltip |
-| `--h5w-tooltip--fontSize` | `0.75em` | Font size of tooltip |
-| `--h5w-tooltip-guide--color` | `gray` | Color of tooltip guide |
-| `--h5w-tooltip-guide--width` | `1.5` | Width of tooltip guide |
-| `--h5w-tooltip-guide--opacity` | `0.5` | Opacity of tooltip guide |
-
-#### Line
+#### Visualizations
+
+| Name | Default | Description |
+| ------------------------------ | -------------------------- | --------------------------- |
+| `--h5w-canvas--bgColor` | `transparent` | Background color of canvas |
+| `--h5w-plotTitle--color` | `inherit` | Text color of plot title |
+| `--h5w-plotTitle--fontFamily` | `inherit` | Font family of plot title |
+| `--h5w-plotTitle--fontSize` | `1.125em` | Font size of plot title |
+| `--h5w-plotTitle--fontWeight` | `inherit` | Font weight of plot title |
+| `--h5w-ticks--color` | `gray` | Color of ticks |
+| `--h5w-tickLabels--color` | `#333` | Text color of tick labels |
+| `--h5w-tickLabels--fontFamily` | `inherit` | Font family of tick labels |
+| `--h5w-tickLabels--fontSize` | `inherit` | Font size of tick labels |
+| `--h5w-axisLabels--color` | `#333` | Text color of axis labels |
+| `--h5w-axisLabels--fontFamily` | `inherit` | Font family of axis labels |
+| `--h5w-axisLabels--fontSize` | `inherit` | Font size of axis labels |
+| `--h5w-axisLabels--fontWeight` | `600` | Font weight of axis labels |
+| `--h5w-grid--color` | `gray` | Color of grid lines |
+| `--h5w-grid--opacity` | `0.33` | Opacity of grid lines |
+| `--h5w-tooltip--color` | `inherit` | Text color of tooltip |
+| `--h5w-tooltip--bgColor` | `rgba(255, 255, 255, 0.9)` | Background color of tooltip |
+| `--h5w-tooltip--fontFamily` | `inherit` | Font family of tooltip |
+| `--h5w-tooltip--fontSize` | `0.75em` | Font size of tooltip |
+| `--h5w-tooltip-guide--color` | `gray` | Color of tooltip guide |
+| `--h5w-tooltip-guide--width` | `1.5` | Width of tooltip guide |
+| `--h5w-tooltip-guide--opacity` | `0.5` | Opacity of tooltip guide |
+
+##### Line
| Name | Default | Description |
| ---------------------- | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--h5w‑line‑‑color` | `midnightblue` | Color of main curve and error bars/caps |
| `--h5w‑line‑‑colorAux` | `orangered, forestgreen, crimson, mediumslateblue, sienna` | Color(s) of auxiliary curves. Accepts a comma-separated list of colors. If the number of colours is lower than the number of auxiliary curves, the last color in the list is used. |
-#### Heatmap
+##### Heatmap
| Name | Default | Description |
| --------------------------------------- | -------------------------------------------- | ----------------------------------------- |
@@ -93,7 +93,7 @@ as you see fit. For instance, if you'd like to change the color of the curve of
| `--h5w-colorBar-bounds--color` | `#333` | Font size of color bar min and max bounds |
| `--h5w-colorBar-bounds--fontSize` | `0.875em` | Font size of color bar min and max bounds |
-#### Matrix
+##### Matrix
| Name | Default | Description |
| ------------------------------------ | ------------------------------------------ | ------------------------------------- |
@@ -109,3 +109,56 @@ as you see fit. For instance, if you'd like to change the color of the curve of
| `--h5w-matrix-indexCell--fontSize` | `var(--h5w-matrix--fontSize, inherit)` | Font size of index cells |
| `--h5w-matrix-indexCell--fontWeight` | `600` | Font weight of index cells |
| `--h5w-matrix-anchorCell--bgColor` | `silver` | Background colour of anchor cell |
+
+#### UI
+
+| Name | Default | Description |
+| -------------------- | ------- | ------------------------------------------------------ |
+| `--h5w-error--color` | `brown` | Color of error messages and UI elements in error state |
+
+##### Toolbar
+
+| Name | Default | Description |
+| -------------------------------- | -------------------- | --------------------------- |
+| `--h5w-toolbar--bgColor` | `aliceblue` | Background color of toolbar |
+| `--h5w-toolbar-separator--color` | `rgba(0, 0, 0, 0.2)` | Color of toolbar separators |
+
+##### Buttons
+
+| Name | Default | Description |
+| ------------------------------------- | -------------------------------------------------- | -------------------------------------------- |
+| `--h5w-btn-hover--bgColor` | `whitesmoke` | Background color of buttons on hover |
+| `--h5w-btn-hover--shadowColor` | `var(--h5w-btnRaised--shadowColor, gray)` | Box shadow color of buttons on hover |
+| `--h5w-btnPressed--bgColor` | `white` | Background color of pressed buttons |
+| `--h5w-btnPressed--shadowColor` | `var(--h5w-btnRaised--shadowColor, gray)` | Box shadow color of pressed buttons |
+| `--h5w‑btnPressed‑hover‑‑shadowColor` | `var(--h5w-btnRaised-hover--shadowColor, dimgray)` | Box shadow color of pressed buttons on hover |
+| `--h5w-btnRaised--shadowColor` | `gray` | Box shadow color of raised buttons |
+| `--h5w-btnRaised-hover--shadowColor` | `dimgray` | Box shadow color of raised buttons on hover |
+
+##### Selectors
+
+| Name | Default | Description |
+| ----------------------------------------- | ------------ | ------------------------------------ |
+| `--h5w-selector-label--color` | `royalblue` | Text color of label |
+| `--h5w-selector-menu--bgColor` | `white` | Background color of menu |
+| `--h5w-selector-arrowIcon--color` | `dimgray` | Color of arrow icon |
+| `--h5w-selector-option-hover--bgColor` | `whitesmoke` | Background color of options on hover |
+| `--h5w-selector-option-selected--bgColor` | `#eee` | Background color of selected option |
+| `--h5w-selector-groupLabel--color` | `gray` | Text color of group labels in menu |
+
+##### Domain slider
+
+| Name | Default | Description |
+| ---------------------------------------------------- | -------------------------- | ---------------------------------------------- |
+| `--h5w-domainSlider-track--bgColor` | `gray` | Background color of track |
+| `--h5w-domainSlider-track--shadowColor` | `gray` | Box shadow color of track |
+| `--h5w-domainSlider-dataTrack--bgColor` | `royalblue` | Background color of data track |
+| `--h5w-domainSlider-dataTrack--shadowColor` | `midnightblue` | Box shadow color of data track |
+| `--h5w-domainSlider-thumb--bgColor` | `lightgray` | Background color of thumbs |
+| `--h5w-domainSlider-thumb-auto--bgColor` | `whitesmoke` | Background color of auto-scaled thumbs |
+| `--h5w-domainSlider-tooltip--bgColor` | `rgba(255, 255, 255, 0.9)` | Background color of tooltip |
+| `--h5w-domainSlider-tooltip--colorAlt` | `#333` | Text color of bounds and data range in tooltip |
+| `--h5w-domainSlider-boundInput--shadowColor` | `dimgray` | Box shadow color of bound inputs |
+| `--h5w-domainSlider-boundInput-focus--shadowColor` | `royalblue` | Box shadow color of bound inputs on focus |
+| `--h5w-domainSlider-boundInput-editing--bgColor` | `white` | Background color of bound inputs when editing |
+| `--h5w-domainSlider-boundInput-editing--borderColor` | `royalblue` | Border color of bound inputs when editing |
diff --git a/src/stories/Toolbar.stories.tsx b/src/stories/Toolbar.stories.tsx
index e857a11c1..fcb8c946e 100644
--- a/src/stories/Toolbar.stories.tsx
+++ b/src/stories/Toolbar.stories.tsx
@@ -39,15 +39,7 @@ const Template: Story<{ narrow?: boolean }> = ({ narrow }) => {
return (
<>
-