UI: fix tables

fuma-nama · Jan 23, 2025 · c8821b2 · c8821b2
1 parent c2124f6
commit c8821b2
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/packages/ui/src/components/layout/toc.tsx b/packages/ui/src/components/layout/toc.tsx
@@ -40,7 +40,7 @@ export function Toc(props: HTMLAttributes<HTMLDivElement>) {
       id="nd-toc"
       {...props}
       className={cn(
-        'sticky top-fd-layout-top h-[var(--fd-toc-height)] pb-2 pt-12',
+        'sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] h-[var(--fd-toc-height)] pb-2 pt-12',
         toc,
         props.className,
       )}

diff --git a/packages/ui/src/layouts/docs/sidebar.tsx b/packages/ui/src/layouts/docs/sidebar.tsx
@@ -155,7 +155,7 @@ export function Sidebar({
         blockScrollingWidth={768} // md
         {...props}
         className={cn(
-          'fixed top-fd-layout-top z-30 bg-fd-card text-sm md:sticky md:h-[var(--fd-sidebar-height)]',
+          'fixed top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-30 bg-fd-card text-sm md:sticky md:h-[var(--fd-sidebar-height)]',
           'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible',
           props.className,
         )}

diff --git a/packages/ui/src/page.client.tsx b/packages/ui/src/page.client.tsx
@@ -34,7 +34,7 @@ export function TocNav(props: HTMLAttributes<HTMLDivElement>) {
       id="nd-tocnav"
       {...props}
       className={cn(
-        'sticky top-fd-layout-top z-10 flex flex-row items-center border-b border-fd-foreground/10 text-sm backdrop-blur-md transition-colors',
+        'sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-10 flex flex-row items-center border-b border-fd-foreground/10 text-sm backdrop-blur-md transition-colors',
         !isTransparent && 'bg-fd-background/80',
         open && 'opacity-0',
         tocNav,

diff --git a/packages/ui/src/theme/typography/styles.ts b/packages/ui/src/theme/typography/styles.ts
@@ -37,24 +37,30 @@ export const roundedTable = {
   table: {
     borderCollapse: 'separate',
     borderSpacing: '0',
-    '@apply bg-fd-card rounded-lg border overflow-hidden': '',
+    background: 'var(--color-fd-card)',
+    borderRadius: 'var(--radius-lg)',
+    border: '1p solid var(--color-fd-border)',
+    overflow: 'hidden',
   },
   th: {
     textAlign: 'start',
-    '@apply p-2.5 border-s bg-fd-muted': '',
+    padding: 'calc(var(--spacing) * 2.5)',
+    'border-inline-start': '1px solid var(--color-fd-border)',
+    background: 'var(--color-fd-muted)',
   },
   'th:first-child': {
-    '@apply border-s-0': '',
+    'border-inline-start': 'none',
   },
   'th:not(tr:last-child *), td:not(tr:last-child *)': {
-    '@apply border-b': '',
+    'border-bottom': '1px solid var(--color-fd-border)',
   },
   td: {
     textAlign: 'start',
-    '@apply border-s p-2.5': '',
+    'border-inline-start': '1px solid var(--color-fd-border)',
+    padding: 'calc(var(--spacing) * 2.5)',
   },
   'td:first-child': {
-    '@apply border-s-0': '',
+    'border-inline-start': 'none',
   },
   'tfoot th, tfoot td': {
     borderTopWidth: '1px',