feat: update scrollbar (#634)

src/components/Flex.tsx

@@ -1,8 +1,8 @@
-// drop-in replacement for anywhere 'honorable' Flex is used. Moving forward a regular div or a styled component should just be used instead
+// drop-in replacement for anywhere 'honorable' Flex is used
 
 import {
   type CSSProperties,
-  type ComponentProps,
+  type ReactNode,
   type Ref,
   forwardRef,
   memo,
@@ -46,9 +46,11 @@ type FlexBaseProps = {
     | 'space-evenly'
 
   gap?: string
+
+  children?: ReactNode
 }
 
-type FlexProps = CSSProperties & ComponentProps<'div'> & FlexBaseProps
+type FlexProps = Omit<CSSProperties, keyof FlexBaseProps> & FlexBaseProps
 
 function FlexRef(props: FlexProps, ref: Ref<any>) {
   const {

src/components/IconFrame.tsx

@@ -1,15 +1,17 @@
+import { ButtonBase, Flex } from 'honorable'
 import {
   type ComponentProps,
   type ReactElement,
   type ReactNode,
   cloneElement,
   forwardRef,
 } from 'react'
-import { ButtonBase, Flex, type FlexProps } from 'honorable'
 import styled from 'styled-components'
 
 import { type styledTheme } from '../theme'
 
+import { type SemanticColorKey } from '../theme/colors'
+
 import Tooltip, { type TooltipProps } from './Tooltip'
 
 type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
@@ -85,7 +87,7 @@ const sizeToFrameSize: Record<Size, number> = {
   xlarge: 48,
 }
 
-type IconFrameProps = Omit<FlexProps, 'size'> & {
+type IconFrameProps = {
   clickable?: boolean
   disabled?: boolean
   textValue?: string
@@ -95,21 +97,25 @@ type IconFrameProps = Omit<FlexProps, 'size'> & {
   tooltipProps?: Partial<TooltipProps>
   type?: Type
   selected?: boolean
+  background?: SemanticColorKey
 }
 
 const IconFrameSC = styled(Flex)<{
   $type: Type
   $clickable: boolean
   $selected: boolean
   $size: Size
-}>(({ theme, $type, $clickable, $selected, $size }) => ({
+  $background?: SemanticColorKey
+}>(({ theme, $type, $clickable, $selected, $size, $background }) => ({
   display: 'flex',
   alignItems: 'center',
   alignContent: 'center',
   justifyContent: 'center',
   width: sizeToFrameSize[$size],
   height: sizeToFrameSize[$size],
-  backgroundColor: $selected
+  backgroundColor: $background
+    ? theme.colors[$background]
+    : $selected
     ? typeToSelectedBG(theme)[$type]
     : typeToBG(theme)[$type],
   border: typeToBorder(theme)[$type],
@@ -157,6 +163,7 @@ const IconFrame = forwardRef<
       tooltip,
       tooltipProps,
       type = 'tertiary',
+      background,
       as,
       ...props
     },
@@ -174,6 +181,7 @@ const IconFrame = forwardRef<
         $selected={selected}
         $type={type}
         $size={size}
+        $background={background}
         ref={ref}
         aria-label={textValue}
         disabled={(clickable && disabled) || undefined}

src/theme/scrollBar.ts

@@ -7,14 +7,11 @@ import { type FillLevel } from '../components/contexts/FillLevelContext'
 import { semanticColorCssVars } from './colors'
 
 export const scrollBar = ({ fillLevel }: { fillLevel: FillLevel }) => {
-  const trackColor =
-    fillLevel >= 2
-      ? semanticColorCssVars['fill-three']
-      : semanticColorCssVars['fill-two']
+  const trackColor = 'transparent'
   const barColor =
     fillLevel >= 2
       ? semanticColorCssVars['text-xlight']
-      : semanticColorCssVars['fill-three']
+      : semanticColorCssVars['fill-three-hover']
   const barWidth = 6
   const barRadius = barWidth / 2