Theme updates for Tooltip, List, Dialog

src/layers/Dialog/Dialog.story.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Dialog } from './Dialog';
 import { useDialog } from './useDialog';
 import { Button } from '../../elements';
+import { Stack } from '../../layout';
 
 export default {
   title: 'Components/Layers/Dialog',
@@ -88,3 +89,28 @@ export const Footer = () => {
     </div>
   );
 };
+
+export const ConfirmDialog = () => {
+  const { toggleOpen, Dialog } = useDialog();
+
+  return (
+    <div style={{ textAlign: 'center', margin: '50px' }}>
+      <Button onClick={toggleOpen}>Open</Button>
+      <Dialog
+        header="Whats up"
+        footer={
+          <Stack justifyContent="end" className="w-full">
+            <Button>Cancel</Button>
+            <Button color="primary">Save</Button>
+          </Stack>
+        }
+      >
+        <div>
+          This is notification text. Fusce dapibus, tellus ac cursus commodo,
+          tortor mauris condimentum nibh, ut fermentum massa justo sit amet
+          risus.
+        </div>
+      </Dialog>
+    </div>
+  );
+};

src/layers/Dialog/DialogTheme.tsx

@@ -26,7 +26,10 @@ const baseTheme: DialogTheme = {
 
 export const dialogTheme: DialogTheme = {
   ...baseTheme,
-  inner: [baseTheme.inner, 'bg-panel text-panel-content'].join(' '),
+  inner: [
+    baseTheme.inner,
+    'bg-panel text-panel-content border border-panel-accent rounded shadow-2xl'
+  ].join(' '),
   header: {
     ...baseTheme.header,
     closeButton: [baseTheme.header.closeButton, 'text-panel-content'].join(' ')

src/layers/Tooltip/TooltipTheme.ts

@@ -10,7 +10,7 @@ const baseTheme: TooltipTheme = {
 
 export const tooltipTheme: TooltipTheme = {
   ...baseTheme,
-  base: [baseTheme.base, 'bg-surface text-surface-content'].join(' ')
+  base: [baseTheme.base, 'bg-panel-accent text-surface-content'].join(' ')
 };
 
 export const legacyTooltipTheme: TooltipTheme = {

src/layout/List/List.story.tsx

@@ -62,15 +62,18 @@ const Icon = () => (
 );
 
 export const StartEnd = () => (
-  <List style={{ width: '150px' }}>
-    <ListItem start={<Icon />} end={<button>...</button>}>
-      Item 1
+  <List style={{ width: '200px' }}>
+    <ListItem disabled start={<Icon />} end={<button>...</button>}>
+      Item 1 (disabled)
     </ListItem>
     <ListItem start={<Icon />} end={<button>...</button>}>
       Item 2
     </ListItem>
+    <ListItem active start={<Icon />} end={<button>...</button>}>
+      Item 3 (active)
+    </ListItem>
     <ListItem start={<Icon />} end={<button>...</button>}>
-      Item 3
+      Item 4
     </ListItem>
   </List>
 );

src/layout/List/ListTheme.ts

@@ -29,8 +29,8 @@ const baseTheme: ListTheme = {
   header: 'pl-2 pr-2',
   listItem: {
     base: 'items-center flex p-2.5 relative rounded-none',
-    disabled: 'cursor-not-allowed',
-    active: 'underline',
+    disabled: 'cursor-not-allowed pointer-events-none',
+    active: '',
     clickable:
       'cursor-pointer transition-color duration-300 ease-linear transition-bg duration-300 ease-linear hover:color-inherit hover:bg-transparent',
     disablePadding: 'p-0',
@@ -54,7 +54,22 @@ const baseTheme: ListTheme = {
 export const listTheme = {
   ...baseTheme,
   base: [baseTheme.base, 'text-surface-content'].join(' '),
-  header: [baseTheme.header, 'text-surface-content'].join(' ')
+  header: [baseTheme.header, 'text-surface-content'].join(' '),
+  listItem: {
+    ...baseTheme.listItem,
+    base: [
+      baseTheme.listItem.base,
+      'hover:bg-panel-accent hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-panel-secondary-content [&:has(h3)]:hover:bg-transparent'
+    ].join(' '),
+    active: [
+      baseTheme.listItem.active,
+      'text-primary-active hover:text-mystic'
+    ].join(' '),
+    disabled: [
+      baseTheme.listItem.disabled,
+      'opacity-40 text-panel-secondary-content'
+    ].join(' ')
+  }
 };
 
 export const legacyListTheme = {