diff --git a/apps/storybook/src/Customization.stories.mdx b/apps/storybook/src/Customization.stories.mdx index 8f66afbdf..fb02f5623 100644 --- a/apps/storybook/src/Customization.stories.mdx +++ b/apps/storybook/src/Customization.stories.mdx @@ -81,8 +81,8 @@ as you see fit. For instance, if you'd like to change the color of the curve of | 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. | +| `--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 @@ -117,6 +117,7 @@ as you see fit. For instance, if you'd like to change the color of the curve of | Name | Default | Description | | ---------------------------------------- | -------------------- | ---------------------------------------- | | `--h5w-toolbar--bgColor` | `aliceblue` | Background color of toolbar | +| `--h5w-toolbar--height` | `2.5rem` | Height of toolbar | | `--h5w-toolbar-separator--color` | `rgba(0, 0, 0, 0.2)` | Color of separators | | `--h5w-toolbar-label--color` | `royalblue` | Text color of control labels | | `--h5w-toolbar-input--shadowColor` | `dimgray` | Box shadow color of text inputs | @@ -125,15 +126,16 @@ as you see fit. For instance, if you'd like to change the color of the curve of ##### 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 | +| Name | Default | Description | +| ------------------------------------- | -------------------------------------------------- | --------------------------------------------------------- | +| `--h5w-btn--height` | `1.875rem` | Visual height of buttons (clickable height fills toolbar) | +| `--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 diff --git a/packages/app/src/App.module.css b/packages/app/src/App.module.css index 23798c17c..bd77ec082 100644 --- a/packages/app/src/App.module.css +++ b/packages/app/src/App.module.css @@ -27,6 +27,8 @@ --sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + --toolbar-height: 2.875rem; + --toolbarBtn-height: 2rem; } .root { @@ -37,9 +39,11 @@ --h5w-matrix-anchorCell--bgColor: var(--primary-dark-bg); --h5w-btn-hover--bgColor: var(--secondary-lighter); --h5w-btnPressed--bgColor: var(--secondary-light); + --h5w-toolbar--height: var(--toolbar-height); --h5w-toolbar--bgColor: var(--secondary-light-bg); --h5w-toolbar-label--color: var(--secondary-dark); --h5w-toolbar-input-focus--shadowColor: var(--secondary-dark); + --h5w-toolbar-btn--height: var(--toolbarBtn-height); --h5w-domainSlider-track--bgColor: var(--secondary-dark-15); --h5w-domainSlider-dataTrack--bgColor: var(--secondary-dark); --h5w-domainSlider-dataTrack--shadowColor: var(--secondary-darker); @@ -128,18 +132,18 @@ flex-direction: column; } -.fallback { - composes: fallback from global; +.fallbackBar { + flex: none; + height: var(--toolbar-height); + background-color: var(--secondary-light-bg); } .fallbackBar[data-mode='inspect'] { - height: 2.875rem; background-color: var(--primary-bg); } -.fallbackBar[data-mode='display'] { - height: 2.5rem; - background-color: var(--secondary-light-bg); +.fallback { + composes: fallback from global; } .error { diff --git a/packages/app/src/Sidebar.module.css b/packages/app/src/Sidebar.module.css index fd146fa38..9c9acde99 100644 --- a/packages/app/src/Sidebar.module.css +++ b/packages/app/src/Sidebar.module.css @@ -1,41 +1,26 @@ -.btnBar { +.tabBar { display: flex; - height: 2.875rem; + height: var(--toolbar-height); font-size: 1.25rem; background-color: var(--primary-lighter); } -.btn { +.tab { composes: btnClean from global; display: flex; + justify-content: center; align-items: center; - padding: 0 0.25rem; + width: var(--toolbar-height); + padding: 0.25rem 0 0.25rem; + border-bottom: solid 0.25rem transparent; background-color: var(--primary-lighter, aliceblue); - padding-bottom: 0.25rem; -} - -.btn[aria-selected='true'] { - border-bottom: solid 0.25rem var(--primary-dark); - padding-bottom: 0rem; } -.btn:hover { +.tab:hover { background-color: var(--primary-light); + border-bottom-color: var(--primary); } -.btnLike { - display: flex; - align-items: center; - justify-content: center; - height: 1.875rem; - padding: 0 0.5rem; - border-radius: 0.5rem; - transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out; - white-space: nowrap; -} - -.btn[data-small] > .btnLike { - height: 1.75rem; - border-radius: 0.875rem; - font-size: 0.875em; +.tab[aria-selected='true'] { + border-bottom-color: var(--primary-dark); } diff --git a/packages/app/src/Sidebar.tsx b/packages/app/src/Sidebar.tsx index cea0d0165..268a32f11 100644 --- a/packages/app/src/Sidebar.tsx +++ b/packages/app/src/Sidebar.tsx @@ -31,28 +31,24 @@ function Sidebar(props: Props) { return (