Merge pull request #680 from silx-kit/controls

Let toolbar and controls be customized via CSS

src/h5web/App.module.css

@@ -1,5 +1,5 @@
 .root {
-  background-color: var(--white);
+  background-color: white;
 }
 
 .explorer {

src/h5web/toolbar/ComplexToolbar.tsx

@@ -55,6 +55,18 @@ function ComplexToolbar() {
 
       <Separator />
 
+      <Selector
+        value={visType}
+        onChange={(value: ComplexVisType) => setVisType(value)}
+        options={Object.values(ComplexVisType)}
+        optionComponent={({ option }) => (
+          // eslint-disable-next-line react/jsx-no-useless-fragment
+          <>{`${VIS_TYPE_SYMBOLS[option]} ${option}`}</>
+        )}
+      />
+
+      <Separator />
+
       <ScaleSelector value={scaleType} onScaleChange={setScaleType} />
 
       <Separator />
@@ -74,18 +86,6 @@ function ComplexToolbar() {
 
       <Separator />
 
-      <Selector
-        value={visType}
-        onChange={(value: ComplexVisType) => setVisType(value)}
-        options={Object.values(ComplexVisType)}
-        optionComponent={({ option }) => (
-          // eslint-disable-next-line react/jsx-no-useless-fragment
-          <>{`${VIS_TYPE_SYMBOLS[option]} ${option}`}</>
-        )}
-      />
-
-      <Separator />
-
       <SnapshotButton />
     </Toolbar>
   );

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;
 }

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,39 +21,41 @@
   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;
   cursor: text;
 }
 
 .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';
 }

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,20 +53,20 @@
 }
 
 .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 {
   display: flex;
   align-items: flex-start;
   min-height: 2rem;
   margin-top: -0.25rem;
-  color: var(--warn);
+  color: var(--h5w-error--color, brown);
 }
 
 .errorMessage {

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;
 }
 

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;
 }

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, IconType> = {
   [ScaleType.Linear]: MdSort,

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 (
-    <div className={styles.root}>
-      {label && <span className={styles.label}>{label}</span>}
-      <Selector
-        value={value}
-        onChange={onScaleChange}
-        options={Object.values(ScaleType)}
-        optionComponent={ScaleOption}
-      />
-    </div>
+    <Selector
+      label={label}
+      value={value}
+      onChange={onScaleChange}
+      options={Object.values(ScaleType)}
+      optionComponent={ScaleOption}
+    />
   );
 }