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 (
-
+
{tab === Tab.Explore && ( diff --git a/packages/app/src/breadcrumbs/BreadcrumbsBar.module.css b/packages/app/src/breadcrumbs/BreadcrumbsBar.module.css index 0aebd6c8a..fcb6dc0c2 100644 --- a/packages/app/src/breadcrumbs/BreadcrumbsBar.module.css +++ b/packages/app/src/breadcrumbs/BreadcrumbsBar.module.css @@ -1,9 +1,11 @@ .bar { + flex: none; /* prevent shrinking when metadata viewer scrolls */ display: flex; justify-content: space-between; - font-size: 0.875rem; + height: var(--toolbar-height); + padding: 0 0.5rem; background-color: var(--secondary-bg); - padding: calc(0.5rem - 1px) 0.75rem 0.5rem; + font-size: 0.875rem; } .breadCrumbs { diff --git a/packages/app/src/explorer/Explorer.module.css b/packages/app/src/explorer/Explorer.module.css index b2d91e9a2..11a3ee69d 100644 --- a/packages/app/src/explorer/Explorer.module.css +++ b/packages/app/src/explorer/Explorer.module.css @@ -19,6 +19,7 @@ display: flex; align-items: center; width: 100%; + height: var(--toolbarBtn-height); padding: 0 1rem 0 calc(0.25rem + (var(--level) + 1) * 0.75rem); } @@ -39,8 +40,9 @@ .fileBtn { composes: btn; + height: var(--toolbar-height); margin: 0; - padding: 0.625rem 1rem; + padding: 0 1rem; font-weight: 600; } @@ -59,7 +61,6 @@ } .name { - padding: 0.375rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/packages/app/src/metadata-viewer/MetadataViewer.module.css b/packages/app/src/metadata-viewer/MetadataViewer.module.css index 7a74eecfb..10bbd87e3 100644 --- a/packages/app/src/metadata-viewer/MetadataViewer.module.css +++ b/packages/app/src/metadata-viewer/MetadataViewer.module.css @@ -14,7 +14,8 @@ } .table thead th { - padding: 0.675rem 1rem; + height: var(--toolbar-height); + padding: 0 1rem; background-color: var(--primary-bg); font-size: 1.25rem; } diff --git a/packages/app/src/search/Search.module.css b/packages/app/src/search/Search.module.css index 825c8c2b7..843155010 100644 --- a/packages/app/src/search/Search.module.css +++ b/packages/app/src/search/Search.module.css @@ -5,14 +5,24 @@ .inputRow { display: flex; - flex-direction: column; + align-items: center; + height: var(--toolbar-height); + padding: 0 0.5rem; } -.inputRow input { +.input { + flex: 1 1 0%; + height: var(--toolbarBtn-height); + padding: 0 0.5rem; + border: none; border-radius: 0.5rem; - margin: 0.625rem; - padding: 0.25rem; - box-shadow: none; + box-shadow: 0 0 2px dimgray; + outline: none; +} + +.input:hover, +.input:focus { + box-shadow: 0 0 2px 1px dimgray; } .entries { diff --git a/packages/app/src/visualizer/VisSelector.module.css b/packages/app/src/visualizer/VisSelector.module.css index cfc2f1ce1..5b822dda8 100644 --- a/packages/app/src/visualizer/VisSelector.module.css +++ b/packages/app/src/visualizer/VisSelector.module.css @@ -7,7 +7,7 @@ composes: btnClean from global; display: flex; align-items: center; - padding: 0.375rem 1rem; + padding: 0.125rem 1rem 0; border-bottom: 0.25rem solid transparent; line-height: 1; outline-offset: -1px; diff --git a/packages/app/src/visualizer/Visualizer.module.css b/packages/app/src/visualizer/Visualizer.module.css index 2baf5a6a5..5a1ead1f3 100644 --- a/packages/app/src/visualizer/Visualizer.module.css +++ b/packages/app/src/visualizer/Visualizer.module.css @@ -7,9 +7,10 @@ } .visBar { + flex: none; display: flex; justify-content: space-between; - height: 2.5rem; + height: var(--toolbar-height); background-color: var(--secondary-light-bg); } diff --git a/packages/lib/src/toolbar/Toolbar.module.css b/packages/lib/src/toolbar/Toolbar.module.css index 8ad47d557..26f6f4955 100644 --- a/packages/lib/src/toolbar/Toolbar.module.css +++ b/packages/lib/src/toolbar/Toolbar.module.css @@ -4,7 +4,7 @@ z-index: 1; /* for toolbar menus to appear above visualizations (overflow, selectors) */ display: flex; min-width: 0; - height: 2.5rem; + height: var(--h5w-toolbar--height, 2.5rem); padding: 0 0.5rem; background-color: var(--h5w-toolbar--bgColor, aliceblue); font-size: 0.875rem; @@ -56,7 +56,7 @@ a.btn { display: flex; align-items: center; justify-content: center; - height: 1.875rem; + height: var(--h5w-toolbar-btn--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; @@ -64,7 +64,7 @@ a.btn { } .btn[data-small] > .btnLike { - height: 1.75rem; + height: calc(var(--h5w-toolbar-btn--height, 1.875rem) - 0.125rem); border-radius: 0.875rem; font-size: 0.875em; }