From 40d8580ade287ae704ebe02ecf615f401772c7d7 Mon Sep 17 00:00:00 2001 From: Simek Date: Wed, 17 Sep 2025 19:49:56 +0200 Subject: [PATCH 1/2] add border radius to in-content tables --- website/src/css/customTheme.scss | 30 +++++++++++++++-- website/src/theme/MDXComponents/index.tsx | 41 +++++++++++++++++++++++ 2 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 website/src/theme/MDXComponents/index.tsx diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index f77f86036e9..3190031e436 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -13,7 +13,7 @@ --deepdark: #20232a; --light: #373940; --text: #1a1a1a; - --subtle: #636363; + --subtle: #6c707b; --divider: #ececec; --tintColor: #f7f7f7; @@ -46,6 +46,8 @@ --ifm-toc-link-color: var(--ifm-color-emphasis-700); --ifm-blockquote-color: var(--ifm-font-color-base); --ifm-blockquote-font-size: 16px; + --ifm-global-radius: 9px; + --ifm-code-border-radius: 0.4rem; --ifm-blockquote-border-radius: var(--ifm-global-radius); --ifm-table-head-color: var(--subtle); --ifm-link-hover-decoration: none; @@ -61,6 +63,7 @@ --ifm-table-border-color: var(--ifm-toc-border-color); --ifm-table-cell-padding: 10px; --ifm-table-stripe-background: rgba(0, 0, 0, 0.02); + --ifm-table-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03); --ifm-alert-border-radius: 20px; @media (min-width: 340px) { @@ -120,7 +123,7 @@ html[data-theme="light"] { } html[data-theme="dark"] { - --subtle: #7c7c7c; + --subtle: #858993; --navbar-background: #20232aee; --sidebar-active-item-background: #61dafb15; @@ -130,6 +133,8 @@ html[data-theme="dark"] { --ifm-color-emphasis-300: var(--dark); --ifm-table-head-background: var(--deepdark); --ifm-table-head-color: var(--subtle); + --ifm-table-stripe-background: rgba(0, 0, 0, 0.08); + --ifm-table-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); --docsearch-searchbox-background: var(--ifm-background-color); --docsearch-modal-background: var(--deepdark); @@ -352,10 +357,19 @@ hr { font-weight: 600; } + .table-wrapper { + border: 1px solid var(--ifm-table-border-color); + border-radius: var(--ifm-global-radius); + overflow: hidden; + box-shadow: var(--ifm-table-box-shadow); + margin-bottom: var(--ifm-spacing-vertical); + } + table { display: table; width: 100%; table-layout: fixed; + margin-bottom: 0; thead tr { border: 0; @@ -365,12 +379,24 @@ hr { padding: 6px var(--ifm-table-cell-padding); font-size: 80%; text-align: start; + border: 0; + border-right: 1px solid var(--ifm-table-border-color); + + &:last-child { + border-right: 0; + } } tr td { font-size: 90%; line-height: 1.3em; text-align: start; + border: 0; + border-right: 1px solid var(--ifm-table-border-color); + + &:last-child { + border-right: 0; + } code { display: inline-block; diff --git a/website/src/theme/MDXComponents/index.tsx b/website/src/theme/MDXComponents/index.tsx new file mode 100644 index 00000000000..460e0c80b74 --- /dev/null +++ b/website/src/theme/MDXComponents/index.tsx @@ -0,0 +1,41 @@ +import React, {type ComponentProps} from 'react'; +import Head from '@docusaurus/Head'; +import MDXCode from '@theme/MDXComponents/Code'; +import MDXA from '@theme/MDXComponents/A'; +import MDXPre from '@theme/MDXComponents/Pre'; +import MDXDetails from '@theme/MDXComponents/Details'; +import MDXHeading from '@theme/MDXComponents/Heading'; +import MDXUl from '@theme/MDXComponents/Ul'; +import MDXLi from '@theme/MDXComponents/Li'; +import MDXImg from '@theme/MDXComponents/Img'; +import Admonition from '@theme/Admonition'; +import Mermaid from '@theme/Mermaid'; + +import type {MDXComponentsObject} from '@theme/MDXComponents'; + +const MDXComponents: MDXComponentsObject = { + Head, + details: MDXDetails, // For MD mode support, see https://github.com/facebook/docusaurus/issues/9092#issuecomment-1602902274 + Details: MDXDetails, + code: MDXCode, + a: MDXA, + pre: MDXPre, + ul: MDXUl, + li: MDXLi, + img: MDXImg, + h1: (props: ComponentProps<'h1'>) => , + h2: (props: ComponentProps<'h2'>) => , + h3: (props: ComponentProps<'h3'>) => , + h4: (props: ComponentProps<'h4'>) => , + h5: (props: ComponentProps<'h5'>) => , + h6: (props: ComponentProps<'h6'>) => , + admonition: Admonition, + mermaid: Mermaid, + table: ({children, ...props}) => ( +
+ {children}
+
+ ), +}; + +export default MDXComponents; From 447c995d8aad3427d9498e02a36a57f3d230062b Mon Sep 17 00:00:00 2001 From: Simek Date: Wed, 17 Sep 2025 20:03:20 +0200 Subject: [PATCH 2/2] unify border radius, use var instead hardcoded value --- website/src/css/customTheme.scss | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 3190031e436..e87482360e8 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -466,10 +466,10 @@ hr { div[class*="codeBlockContainer"] { box-shadow: none; - border-radius: 8px; + border-radius: var(--ifm-global-radius); pre { - border-radius: 8px; + border-radius: var(--ifm-global-radius); } button { @@ -1129,7 +1129,7 @@ aside[class^="theme-doc-sidebar-container"] { } .menu__link { - border-radius: 8px; + border-radius: var(--ifm-global-radius); padding: 6px 12px; } @@ -1311,7 +1311,6 @@ div[class^="tableOfContents"] { .table-of-contents__link--active { font-weight: 500; color: var(--home-button-primary) !important; - border-radius: 8px; code { font-weight: 700; @@ -1632,7 +1631,7 @@ div[class*="announcementBarContent"] { float: left; width: 36px; height: 36px; - border-radius: 8px; + border-radius: var(--ifm-global-radius); background-color: #6170af; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 18.036c.042.507.221 1.016.692 1.699.558.81 1.518 1.254 2.218.54.473-.481 5.582-9.335 8.045-12.69a.737.737 0 011.202 0c2.463 3.355 7.572 12.209 8.045 12.69.7.714 1.66.27 2.218-.54.55-.798.702-1.358.702-1.955 0-.407-7.958-15.086-8.76-16.308C13.593.297 13.357.042 12.053 0h-.994c-1.304.041-1.54.297-2.31 1.472C7.964 2.67.317 16.77 0 17.737v.299z' fill='%23fff'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; @@ -2034,7 +2033,7 @@ html[data-theme="dark"] .docsRating { a[class*="sidebarItemLink"] { border-left: 0 !important; padding: 4px 12px !important; - border-radius: 8px; + border-radius: var(--ifm-global-radius); transition: color 0.15s, background-color 0.15s;