fix(baseline): make the theme more datagrid like

Author: rwieruch

.storybook/preview.js

@@ -42,8 +42,6 @@ export const parameters = {
         ['Installation', 'FAQ'],
         'First Steps',
         ['Compact Table', 'Composed Table'],
-        'Types',
-        ['Data', 'Compact Table', 'Composed Table', ...Features, 'Virtualized'],
         'Compact Table',
         ['Base', ...Features],
         'Theming',
@@ -57,12 +55,12 @@ export const parameters = {
           'Bootstrap (WIP)',
           'Ant Design (WIP)',
         ],
-        'Product Themes',
-        ['Google Drive (WIP)', 'Stripe (WIP)'],
         'Features',
         Features,
         'Composites',
         ['Sort & Select', 'Tree & Select', 'Tree & Sort'],
+        'Types',
+        ['Data', 'Compact Table', 'Composed Table', ...Features, 'Virtualized'],
         'CRUD',
         ['Create', 'Update', 'Delete'],
         'Misc',

.storybook/stories/FirstSteps/compact-table.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import { CompactTable } from '@table-library/react-table-library/compact';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { getTheme } from '@table-library/react-table-library/baseline';
 
 import { nodes } from '../data';
 
@@ -9,6 +11,8 @@ const key = 'Compact Table';
 const Component = () => {
   const data = { nodes };
 
+  const theme = useTheme(getTheme());
+
   const COLUMNS = [
     { label: 'Task', renderCell: (item) => item.name },
     {
@@ -28,21 +32,25 @@ const Component = () => {
     { label: 'Tasks', renderCell: (item) => item.nodes?.length },
   ];
 
-  return <CompactTable columns={COLUMNS} data={data} layout={{ isDiv: true }} />;
+  return <CompactTable columns={COLUMNS} data={data} theme={theme} />;
 };
 
 const code = `
 import * as React from 'react';
 
 import { CompactTable } from '@table-library/react-table-library/compact';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { getTheme } from '@table-library/react-table-library/baseline';
 
 import { nodes } from '../data';
 
-const key = 'CompactTable';
+const key = 'Compact Table';
 
 const Component = () => {
   const data = { nodes };
 
+  const theme = useTheme(getTheme());
+
   const COLUMNS = [
     { label: 'Task', renderCell: (item) => item.name },
     {
@@ -62,7 +70,7 @@ const Component = () => {
     { label: 'Tasks', renderCell: (item) => item.nodes?.length },
   ];
 
-  return <CompactTable columns={COLUMNS} data={data} />;
+  return <CompactTable columns={COLUMNS} data={data} theme={theme} />;
 };
 `;
 

.storybook/stories/FirstSteps/composed-table.js

@@ -9,6 +9,8 @@ import {
   HeaderCell,
   Cell,
 } from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { getTheme } from '@table-library/react-table-library/baseline';
 
 import { nodes } from '../data';
 
@@ -17,8 +19,10 @@ const key = 'Composed Table';
 const Component = () => {
   const data = { nodes };
 
+  const theme = useTheme(getTheme());
+
   return (
-    <Table data={data}>
+    <Table data={data} theme={theme}>
       {(tableList) => (
         <>
           <Header>
@@ -66,6 +70,8 @@ import {
   HeaderCell,
   Cell,
 } from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { getTheme } from '@table-library/react-table-library/baseline';
 
 import { nodes } from '../data';
 
@@ -74,8 +80,10 @@ const key = 'Composed Table';
 const Component = () => {
   const data = { nodes };
 
+  const theme = useTheme(getTheme());
+
   return (
-    <Table data={data}>
+    <Table data={data} theme={theme}>
       {(tableList) => (
         <>
           <Header>

.storybook/stories/Themes/Products/google-drive.story.js

@@ -10,7 +10,7 @@ If you want to give a component a specific CSS class, do it this way:
 <Row className="foo" ... >
 ```
 
-Then if you want to style all Row components with this CSS class, specify it in the `THEME` that is passed to `const = useTheme(THEME)`:
+Then if you want to style all Row components with this CSS class, specify it in the `THEME` that is passed to `const = useTheme(THEME);` (see Features/Theme):
 
 ```
 const THEME = {

.storybook/stories/Themes/Products/stripe.story.js

@@ -4,4 +4,4 @@ import { Meta } from '@storybook/addon-docs';
 
 # Utility First/Atomic CSS (e.g. Tailwind CSS)
 
-See: https://github.com/table-library/react-table-library/discussions/40
+See Theming/Imperative Style and https://github.com/table-library/react-table-library/discussions/40

.storybook/stories/Theming/class.story.mdx

@@ -4,7 +4,7 @@ import { Meta } from '@storybook/addon-docs';
 
 # Themes
 
-This is a opt-in theme. You can use this theme as **baseline theme** (see next code snippet), use a **third-party theme** (see Library Themes), create your **custom theme** (see Features/Theme), or **stitch themes** (see Featues/Theme/stitch themes) by merging baseline theme, custom theme, and/or library theme.
+Theming is opt-in. You can use the following theme as **baseline theme** (see next code snippet), use a **third-party theme** (see Library Themes), create your **custom theme** (see Features/Theme), or **stitch themes** (see Featues/Theme/stitch themes) by merging baseline theme, custom theme, and/or library theme.
 
 ```javascript
 // compact table
@@ -50,7 +50,7 @@ const BASELINE_THEME = {
   Header: '',
   Body: '',
   BaseRow: `
-    font-size: 18px;
+    font-size: 16px;
   `,
   HeaderRow: `
     color: ${COLORS.FONT_PRIMARY};
@@ -65,22 +65,29 @@ const BASELINE_THEME = {
     &:hover {
       color: ${COLORS.FONT_PRIMARY};
     }
+
+    &:not(:last-of-type) > .td {
+      border-bottom: 1px solid ${COLORS.BORDER};
+    }
   `,
   BaseCell: `
     padding: 6px 12px;
-
-    &:not(:last-of-type) {
-      border-right: 1px solid ${COLORS.BORDER};
-    }
   `,
   HeaderCell: `
+    font-weight: bold;
     border-bottom: 1px solid ${COLORS.BORDER};
 
     svg,
     path {
       fill: currentColor;
     }
   `,
-  Cell: '',
+  Cell: `
+    &:focus {
+      outline: dotted;
+      outline-width: 1px;
+      outline-offset: -1px;
+    }
+  `,
 };
 ```

.storybook/stories/Theming/taliwind.story.mdx renamed to .storybook/stories/Theming/tailwind.story.mdx

@@ -8,7 +8,7 @@ const BASELINE_THEME = {
   Header: '',
   Body: '',
   BaseRow: `
-    font-size: 18px;
+    font-size: 16px;
   `,
   HeaderRow: `
     color: ${COLORS.FONT_PRIMARY};
@@ -23,23 +23,30 @@ const BASELINE_THEME = {
     &:hover {
       color: ${COLORS.FONT_PRIMARY};
     }
+
+    &:not(:last-of-type) > .td {
+      border-bottom: 1px solid ${COLORS.BORDER};
+    }
   `,
   BaseCell: `
     padding: 6px 12px;
-
-    &:not(:last-of-type) {
-      border-right: 1px solid ${COLORS.BORDER};
-    }
   `,
   HeaderCell: `
+    font-weight: bold;
     border-bottom: 1px solid ${COLORS.BORDER};
 
     svg,
     path {
       fill: currentColor;
     }
   `,
-  Cell: '',
+  Cell: `
+    &:focus {
+      outline: dotted;
+      outline-width: 1px;
+      outline-offset: -1px;
+    }
+  `,
 };
 
 export const getTheme = (): Theme => {

.storybook/stories/Theming/themes.story.mdx

@@ -3,4 +3,4 @@ export const FONT_SECONDARY = '#757575';
 export const FONT_DISABLED = '#9e9e9e';
 export const BACKGROUND = '#ffffff';
 export const ROW_SELECTED = '#e0e0e0';
-export const BORDER = '#a0a8ae';
+export const BORDER = '#dde2eb';