UBER-524: cleaned CSS, UI fixes.

dev/storybook/.storybook/styles/styles.scss

@@ -3,5 +3,5 @@ html, body {
 }
 
 .docs-story {
-  background: var(--body-color);
+  background: var(--theme-bg-color);
 }

packages/kanban/src/components/KanbanRow.svelte

@@ -134,7 +134,7 @@
     // transition: box-shadow .15s ease-in-out;
 
     // &:hover {
-    //   background-color: var(--board-card-bg-hover);
+    //   background-color: var(--highlight-hover);
     // }
     &.checked {
       background-color: var(--highlight-select);
@@ -161,7 +161,7 @@
       cursor: grab;
     }
     &.dragged {
-      background-color: var(--board-bg-color);
+      background-color: var(--theme-bg-accent-color);
     }
   }
   @keyframes anim-border {

packages/panel/src/components/Panel.svelte

@@ -12,9 +12,9 @@
     // 
     // See the License for the specific language governing permissions and
     // limitations under the License.
-    -->
+-->
 <script lang="ts">
-  import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
+  import { afterUpdate } from 'svelte'
   import { Writable, writable } from 'svelte/store'
 
   import activity from '@hcengineering/activity'
@@ -56,8 +56,6 @@
   let lastScrollHeight: number = -1
   let count: number = 0
 
-  const dispatch = createEventDispatcher()
-
   const waitCount = 10
   const PanelScrollTop: Writable<Record<string, number>> = writable<Record<string, number>>({})
 
@@ -88,18 +86,15 @@
       startScrollHeightCheck()
     }
   })
-
-  onMount(() => {
-    dispatch('open')
-  })
 </script>
 
 <Panel
   bind:isAside
-  isHeader={$$slots.header || isHeader}
+  {isHeader}
   bind:panelWidth
   bind:innerWidth
   bind:withoutTitle
+  on:open
   on:close
   {allowClose}
   {floatAside}

packages/presentation/src/components/DocPopup.svelte

@@ -236,7 +236,7 @@
 <style lang="scss">
   .plainContainer {
     color: var(--caption-color);
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     border: 1px solid var(--button-border-color);
     border-radius: 0.25rem;
     box-shadow: none;

packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte

@@ -17,7 +17,7 @@
   export let title: string | undefined = undefined
   export let position: 'start' | 'middle' | 'end' | undefined = undefined
   export let selected = false
-  export let color = 'var(--body-color)'
+  export let color = 'var(--theme-bg-color)'
 
   let clientWidth = 0
 

packages/text-editor/src/components/CollaboratorEditor.svelte

@@ -745,7 +745,7 @@
   .ref-container .formatPanel {
     margin: -0.5rem -0.25rem 0.5rem;
     padding: 0.375rem;
-    background-color: var(--body-accent);
+    background-color: var(--theme-comp-header-color);
     border-radius: 0.5rem;
     box-shadow: var(--button-shadow);
     z-index: 1;

packages/theme/styles/_colors.scss

@@ -191,12 +191,6 @@
   --theme-won-color: #34DB80;
   --theme-caret-color: #fff;
 
-  --body-color: #1f2023;
-  --body-accent: #222326;
-  --board-bg-color: #1c1d1f;
-  --board-card-bg-color: #27282b;
-  --board-card-bg-hover: #2a2b2e;
-  --board-card-shadow: rgb(0 0 0 / 15%) 0px 0px 2px;
   --accent-bg-color: #27282b;
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;
 
@@ -385,12 +379,6 @@
   --theme-won-color: #34DB80;  // Dark
   --theme-caret-color: #669AFF;
 
-  --body-color: #fff;
-  --body-accent: #fafafa; // HZ
-  --board-bg-color: #f4f5f8;
-  --board-card-bg-color: #fff;
-  --board-card-bg-hover: rgb(252, 252, 252);
-  --board-card-shadow: rgb(0 0 0 / 6%) 0px 0px 1px;
   --accent-bg-color: #eff0f2;  // HZ
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;  // Dark
 

packages/theme/styles/_layouts.scss

@@ -894,7 +894,7 @@ a.no-line {
   &:hover { color: var(--theme-caption-color); }
 }
 
-.background-body-color { background-color: var(--body-color); }
+.background-body-color { background-color: var(--theme-bg-color); }
 .background-accent-bg-color { background-color: var(--accent-bg-color); }
 .background-highlight-select { background-color: var(--highlight-select); }
 .background-highlight-red { background-color: var(--highlight-red); }

packages/theme/styles/common.scss

@@ -138,6 +138,7 @@
     .an-element__label { padding-left: .5rem; }
   }
   .an-element__icon {
+    flex-shrink: 0;
     min-width: 1rem;
     color: var(--theme-dark-color);
 
@@ -379,7 +380,7 @@
   height: 1px;
   background-color: var(--theme-divider-color);
 
-  &.dark { background-color: var(--body-accent); }
+  &.dark { background-color: var(--theme-bg-accent-color); }
   &.noMargin { margin: 0; }
   & + & { display: none; }
 }
@@ -528,7 +529,7 @@
 
   &:hover,
   &.focusable:focus-within {
-    // background-color: var(--body-color);
+    // background-color: var(--theme-bg-color);
     border-color: var(--theme-list-divider-color);
   }
 }
@@ -543,17 +544,14 @@
   .description {
     // overflow: hidden;
     padding: 0.75rem;
-    background-color: var(--body-accent);
-    border: 1px solid var(--button-border-color);
+    background-color: var(--theme-bg-color);
+    border: 1px solid var(--theme-divider-color);
     // border-radius: .5rem;
     transition-property: background-color, height;
     transition-duration: .15s;
     transition-timing-function: var(--timing-main);
 
-    .label {
-      color: var(--dark-color);
-      text-shadow: var(--button-shadow);
-    }
+    .label { color: var(--theme-dark-color); }
     .caption {
       display: flex;
       align-items: center;
@@ -567,8 +565,8 @@
 
       font-weight: 500;
       font-size: 1rem;
-      color: var(--caption-color);
-      background: var(--popup-bg-color);
+      color: var(--theme-caption-color);
+      background-color: var(--theme-comp-header-color);
       border: 1px solid transparent;
       border-radius: .125rem;
       transition: margin-bottom .15s var(--timing-main),
@@ -644,9 +642,9 @@
     &:not(:first-child):not(:last-child) { border-top: none; }
 
     &:hover,
-    &:focus-within { background-color: var(--body-color); }
-    // &:focus-within .caption { box-shadow: 0 0 2px 1px var(--primary-edit-border-color); }
-    &:focus-within .caption { border-color: var(--primary-edit-border-color); }
+    &:focus-within { background-color: var(--theme-bg-color); }
+    // &:focus-within .caption { box-shadow: 0 0 2px 1px var(--accented-button-outline); }
+    &:focus-within .caption { border-color: var(--accented-button-outline); }
   }
 }
 

packages/theme/styles/global.scss

@@ -67,7 +67,7 @@
 * {
   box-sizing: border-box;
   touch-action: manipulation;
-  scrollbar-color: var(--body-accent) var(--board-bg-color);
+  scrollbar-color: var(--theme-comp-header-color) var(--theme-back-color);
   scrollbar-width: none;
   --body-font-size: .875rem;
   --panel-aside-width: 25rem; // 20rem;

packages/theme/styles/panel.scss

@@ -262,17 +262,6 @@
           box-shadow: var(--popup-aside-shadow);
           transform: translateX(-100%);
           visibility: visible;
-
-          &::after {
-            position: absolute;
-            content: '';
-            top: 0;
-            left: 100%;
-            width: 360px;
-            height: 100%;
-            background-color: var(--board-card-bg-color);
-            border: 1px solid var(--board-card-bg-color);
-          }
         }
       }
 

packages/ui/src/components/Dialog.svelte

@@ -74,7 +74,7 @@
     height: 100vh;
     min-height: 100vh;
     max-height: 100vh;
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     border-radius: 1.875rem 0 0 1.875rem;
     box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, 0.4);
 

packages/ui/src/components/Panel.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { afterUpdate, createEventDispatcher } from 'svelte'
+  import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
   import { deviceOptionsStore as deviceInfo } from '../../'
   import { resizeObserver } from '../resize'
   import Button from './Button.svelte'
@@ -76,6 +76,8 @@
       checkPanel()
     }, 500)
   })
+
+  onMount(() => dispatch('open'))
 </script>
 
 <div

packages/ui/src/components/PanelInstance.svelte

@@ -117,7 +117,6 @@
   onMount(() => {
     if (props) fitPopup(props, contentPanel)
   })
-  $: console.log('[!!!] element: ', props?.element)
 </script>
 
 <svelte:window

packages/ui/src/components/Scroller.svelte

@@ -29,14 +29,16 @@
   export let fade: FadeOptions = defaultSP
   export let noFade: boolean = true
   export let invertScroll: boolean = false
-  export let horizontal: boolean = false
   export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
+  export let horizontal: boolean = contentDirection === 'horizontal'
   export let gap: string | undefined = undefined
   export let noStretch: boolean = autoscroll
   export let buttons: 'normal' | 'union' | false = false
   export let shrink: boolean = false
   export let divScroll: HTMLElement | undefined = undefined
-  export let checkForHeaders = false
+  export let checkForHeaders: boolean = false
+  export let stickedScrollBars: boolean = false
+  export let thinScrollBars: boolean = false
 
   export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
     if (divScroll) {
@@ -458,10 +460,12 @@
   class="scroller-container {orientir} {invertScroll ? 'invert' : 'normal'}"
   class:buttons={buttons === 'normal'}
   class:union={buttons === 'union'}
+  class:sticked={stickedScrollBars}
+  class:thin={thinScrollBars}
   class:shrink
   style:user-select={isScrolling ? 'none' : 'inherit'}
   style:--scroller-header-height={`${(fade.multipler?.top ?? 0) * fz + 2}px`}
-  style:--scroller-footer-height={`${(fade.multipler?.bottom ?? 0) * fz + 2}px`}
+  style:--scroller-footer-height={`${(fade.multipler?.bottom ?? 0) * fz + (stickedScrollBars ? 0 : 2)}px`}
   style:--scroller-left-offset={`${(fade.multipler?.left ?? 0) * fz + 2}px`}
   style:--scroller-right-offset={`${(fade.multipler?.right ?? 0) * fz + (mask !== 'none' ? 12 : 2)}px`}
 >
@@ -817,4 +821,37 @@
       }
     }
   }
+
+  .scroller-container.sticked,
+  .scroller-container.thin {
+    .bar,
+    .track {
+      transform-origin: center right;
+    }
+    .bar-horizontal,
+    .track-horizontal {
+      transform-origin: bottom center;
+    }
+  }
+
+  .scroller-container.sticked {
+    .bar,
+    .track {
+      right: 0;
+    }
+    .bar-horizontal,
+    .track-horizontal {
+      bottom: var(--scroller-footer-height, 0);
+    }
+  }
+  .scroller-container.thin {
+    .bar,
+    .track {
+      width: 6px;
+    }
+    .bar-horizontal,
+    .track-horizontal {
+      height: 6px;
+    }
+  }
 </style>

packages/ui/src/components/ScrollerBar.svelte

@@ -163,7 +163,7 @@
     background-color: var(--scrollbar-bar-color);
     border-radius: 0.125rem;
     opacity: 0;
-    box-shadow: 0 0 1px 1px var(--board-bg-color);
+    box-shadow: 0 0 1px 1px var(--theme-bg-accent-color);
     cursor: pointer;
     z-index: 1;
     transition: all 0.15s;

packages/ui/src/components/Timeline.svelte

@@ -451,7 +451,7 @@
     flex-shrink: 0;
     padding: 0 2.25rem;
     height: 100%;
-    background-color: var(--body-accent);
+    background-color: var(--theme-comp-header-color);
     box-shadow: var(--accent-shadow);
     // z-index: 2;
   }
@@ -460,7 +460,7 @@
     position: relative;
     flex-grow: 1;
     height: 100%;
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     mask-image: linear-gradient(
       90deg,
       rgba(0, 0, 0, 0) 0,
@@ -542,7 +542,7 @@
   }
   .timeline-background__headers {
     left: 0;
-    background-color: var(--body-accent);
+    background-color: var(--theme-comp-header-color);
   }
   .timeline-background__viewbox,
   .timeline-foreground__viewbox {