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}} - - {Array.isArray(options) ? ( - - ) : ( -
    - {Object.entries(options).map(([groupLabel, groupOptions]) => ( -
  • - {groupLabel} -
      - -
    -
    • - ))} -
- )} - - + + + + + {Array.isArray(options) ? ( + + ) : ( +
    + {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 ( <> -
+