improvement: light theme improvements

src/cljs/athens/views/left_sidebar.cljs

@@ -23,28 +23,18 @@
                 :border "1px solid transparent"
                 :borderTopColor (when (:above @drag) "brand")
                 :borderBottomColor (when (:below @drag) "brand")}
-       [:> Button {:variant "link"
-                   :borderWidth "1px"
-                   :color "foreground.primary"
-                   :p "1rem"
-                   :display "block"
-                   :py "0.5rem"
+       [:> Button {:variant "ghost"
                    :mx "1rem"
                    :textAlign "left"
                    :justifyContent "flex-start"
                    :overflow "hidden"
-                   :fontWeight "medium"
+                   :fontWeight "normal"
                    :whiteSpace "nowrap"
                    :textOverflow "ellipsis"
                    :flex "1"
-                   :border "none"
-                   :bg "transparent"
-                   :borderRadius "md"
                    :boxShadow "0 0 0 0.25rem transparent"
                    :_focus {:outline "none"}
-                   :_hover {:bg "background.upper"}
-                   :_active {:bg "background.attic"
-                             :transitionDuration "0s"}
+                   :_active {:transitionDuration "0s"}
                    :on-click (fn [e]
                                (let [shift? (.-shiftKey e)]
                                  (rf/dispatch [:reporting/navigation {:source :left-sidebar

src/js/components/AppToolbar/AppToolbar.tsx

@@ -47,13 +47,13 @@ interface ToolbarIconButtonProps extends ButtonOptions, HTMLChakraProps<'button'
 }
 
 const toolbarButtonStyle = {
-  background: 'background.floor',
+  variant: "ghost",
   color: "foreground.secondary",
   sx: { WebkitAppRegion: "no-drag" }
 }
 
 const toolbarIconButtonStyle = {
-  background: 'background.floor',
+  variant: "ghost",
   color: "foreground.secondary",
   sx: {
     WebkitAppRegion: "no-drag",
@@ -70,7 +70,7 @@ const ToolbarButton = React.forwardRef((props: ToolbarButtonProps, ref) => {
 
 const ToolbarIconButton = React.forwardRef((props: ToolbarIconButtonProps, ref) => {
   const { children } = props;
-  return <IconButton aria-label="" ref={ref as any} {...toolbarIconButtonStyle
+  return <IconButton ref={ref as any} {...toolbarIconButtonStyle
   } {...props}>{children}</IconButton>
 });
 
@@ -87,7 +87,6 @@ const AppToolbarWrapper = ({ children, ...props }) => <Flex
   transition='0.5s ease-in-out'
   transitionProperty='common'
   height="var(--app-header-height, 44px)"
-
   _hover={{
     borderBottomColor: 'separator.divider',
     bg: "background.floor",
@@ -219,7 +218,7 @@ export interface AppToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 const SecondaryToolbarItems = (items) => {
   return <ButtonGroup size="sm">
     {items.map((item) => <Tooltip label={item.label} key={item.label}>
-      <ToolbarIconButton key={item.label} aria-label={item.label} isActive={item.isActive} onClick={item.onClick}>
+      <ToolbarIconButton variant="ghost" color="foreground.secondary" key={item.label} aria-label={item.label} isActive={item.isActive} onClick={item.onClick}>
         {item.icon}
       </ToolbarIconButton>
     </Tooltip>)}

src/js/theme/theme.js

@@ -90,7 +90,8 @@ const semanticTokens = {
       _dark: "0 0.25rem 1rem #00000055",
     },
     menu: {
-      default: "0 0.25rem 1rem #00000055",
+      default: "0 0.25rem 1rem #00000022",
+      _dark: "0 0.25rem 1rem #00000022",
     },
     popover: {
       default: "0 0.25rem 1rem #00000055",
@@ -109,11 +110,11 @@ const semanticTokens = {
     },
     // separator colors
     "separator.border": {
-      default: '00000011',
+      default: '00000022',
       _dark: '#ffffff55'
     },
     "separator.divider": {
-      default: '#00000011',
+      default: '#00000022',
       _dark: '#ffffff11'
     },
     // background colors
@@ -146,9 +147,17 @@ const semanticTokens = {
       default: 'hsla(0, 0%, 0%, 0.57)',
       _dark: 'hsla(0, 0%, 100%, 0.57)'
     },
+    "foreground.tertiary": {
+      default: 'hsla(0, 0%, 0%, 0.2)',
+      _dark: 'hsla(0, 0%, 100%, 0.2)'
+    },
     // interactions
-    "interaction.surface.hover": {
+    "interaction.surface": {
       default: 'hsla(0, 0%, 0%, 0.04)',
+      _dark: 'hsla(0, 0%, 100%, 0.04)',
+    },
+    "interaction.surface.hover": {
+      default: 'hsla(0, 0%, 0%, 0.08)',
       _dark: 'hsla(0, 0%, 100%, 0.08)',
     },
     "interaction.surface.active": {
@@ -320,6 +329,18 @@ const components = {
         borderRadius: "1px"
       },
       solid: {
+        bg: "interaction.surface",
+        _hover: {
+          bg: "interaction.surface.hover"
+        },
+        _active: {
+          color: 'foreground.primary',
+          bg: 'interaction.surface.active',
+        },
+      },
+      ghost: {
+        bg: "transparent",
+        color: "foreground.primary",
         _hover: {
           bg: "interaction.surface.hover"
         },
@@ -386,6 +407,7 @@ const components = {
         overflow: 'hidden',
         p: 0,
         bg: 'background.vibrancy',
+        borderColor: 'separator.divider',
         backdropFilter: "blur(20px)",
         minWidth: '0',
         width: 'max-content',
@@ -405,6 +427,21 @@ const components = {
           flexShrink: 0,
           fontSize: "1.5em",
         },
+        _focus: {
+          background: "interaction.surface.hover",
+        },
+        _focusVisible: {
+          background: "interaction.surface.hover",
+        },
+        _hover: {
+          background: "interaction.surface.hover",
+        },
+        _active: {
+          background: "interaction.surface.active",
+        },
+        _expanded: {
+          background: "interaction.surface.active",
+        },
         // additional selector to catch icons not using the icon prop
         "&& > svg:first-of-type, svg:not(span > svg)": {
           marginInlineEnd: "0.75rem"
@@ -456,6 +493,16 @@ const components = {
       thickness: '1.5px',
     }
   },
+  Switch: {
+    baseStyle: {
+      track: {
+        background: "foreground.tertiary",
+        _checked: {
+          background: "link",
+        }
+      }
+    }
+  },
   Table: {
     baseStyle: {
       border: 'separator.divider',