From c317e9db457f9d0fbaafc8630a7e4a920df42737 Mon Sep 17 00:00:00 2001 From: Arno V Date: Thu, 22 Feb 2024 20:51:48 -0500 Subject: [PATCH] feat: adding typography classes prose-light and prose-dark --- packages/documentation/.ladle/components.tsx | 30 +---- packages/documentation/.ladle/config.mjs | 2 +- packages/documentation/.ladle/styles.css | 4 +- packages/documentation/nodemon.json | 6 +- .../src/Components/Main.stories.tsx | 7 +- .../src/Components/Table.stories.tsx | 12 +- .../src/GettingStarted/1-overview.stories.tsx | 82 ++++++++++++ .../GettingStarted/2-Installation.stories.tsx | 50 +++++++ .../3-configuration.stories.tsx | 108 +++++++++++++++ ...{usage.stories.mdx => 4-usage.stories.mdx} | 30 +++-- .../GettingStarted/Installation.stories.mdx | 47 ------- .../GettingStarted/configuration.stories.mdx | 84 ------------ .../src/GettingStarted/overview.stories.tsx | 87 ------------- .../src/System/Flexgrid.stories.tsx | 99 +++++++------- .../src/System/Icons.stories.tsx | 50 ++++--- packages/ui-components/lib/tailwindPlugin.ts | 123 ++++++++++++++++-- .../src/components/Bubble/utilities.ts | 2 +- .../src/components/Button/utilities.ts | 2 +- .../src/components/Card/utilities.ts | 2 +- .../src/components/Table/Table.tsx | 1 + .../src/components/Table/utilities.ts | 6 +- 21 files changed, 476 insertions(+), 358 deletions(-) create mode 100644 packages/documentation/src/GettingStarted/1-overview.stories.tsx create mode 100644 packages/documentation/src/GettingStarted/2-Installation.stories.tsx create mode 100644 packages/documentation/src/GettingStarted/3-configuration.stories.tsx rename packages/documentation/src/GettingStarted/{usage.stories.mdx => 4-usage.stories.mdx} (70%) delete mode 100644 packages/documentation/src/GettingStarted/Installation.stories.mdx delete mode 100644 packages/documentation/src/GettingStarted/configuration.stories.mdx delete mode 100644 packages/documentation/src/GettingStarted/overview.stories.tsx diff --git a/packages/documentation/.ladle/components.tsx b/packages/documentation/.ladle/components.tsx index 316e49b6..d684fc62 100644 --- a/packages/documentation/.ladle/components.tsx +++ b/packages/documentation/.ladle/components.tsx @@ -7,38 +7,18 @@ import clsx from "clsx"; const renderImportLine = (importName: string) => { return ( -
+

{importName}

- 
-				

-					

-						{`import { ${importName} } from "@versini/ui-components";`}
-					

-				

+			
+				{`import { ${importName} } from "@versini/ui-components";`}
); }; -export const Provider: GlobalProvider = ({ - children, - globalState, - storyMeta, -}) => { +export const Provider: GlobalProvider = ({ children, storyMeta }) => { const className = clsx( - "mt-0 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl", - { - "docs-typography": globalState.story.startsWith("getting-started--"), - }, + "prose prose-light mt-0 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl", ); const handleOnClickGitHub = () => { window.open(import.meta.env.REPOSITORY, "_blank", "noopener,noreferrer"); diff --git a/packages/documentation/.ladle/config.mjs b/packages/documentation/.ladle/config.mjs index ca7adffe..1f8eb76c 100644 --- a/packages/documentation/.ladle/config.mjs +++ b/packages/documentation/.ladle/config.mjs @@ -1,7 +1,7 @@ /** @type {import('@ladle/react').UserConfig} */ export default { - // defaultStory: "getting-started--overview", + defaultStory: "getting-started--overview", storyOrder: [ "getting-started--overview", "getting-started--installation", diff --git a/packages/documentation/.ladle/styles.css b/packages/documentation/.ladle/styles.css index cd393765..a4a0526a 100644 --- a/packages/documentation/.ladle/styles.css +++ b/packages/documentation/.ladle/styles.css @@ -2,7 +2,7 @@ @tailwind components; @tailwind utilities; -@layer components { +/* @layer components { .docs-typography strong:not(.not-docs-typography strong) { @apply text-copy-lighter; } @@ -23,4 +23,4 @@ .docs-typography .prism-code:not(.not-docs-typography .prism-code) { @apply m-1 !important; } -} +} */ diff --git a/packages/documentation/nodemon.json b/packages/documentation/nodemon.json index 450d7bf0..5f0f51bf 100644 --- a/packages/documentation/nodemon.json +++ b/packages/documentation/nodemon.json @@ -1,3 +1,7 @@ { - "watch": ["src/**/*.*", "../ui-components/src/**/*.*"] + "watch": [ + ".ladle/*.*", + "src/**/*.*", + "../ui-components/src/**/*.*", + "../ui-components/lib/**/*.*"] } diff --git a/packages/documentation/src/Components/Main.stories.tsx b/packages/documentation/src/Components/Main.stories.tsx index 0b6da195..890faa7a 100644 --- a/packages/documentation/src/Components/Main.stories.tsx +++ b/packages/documentation/src/Components/Main.stories.tsx @@ -15,16 +15,17 @@ Basic.args = { export const WithHeaderAndFooter: Story = (args) => (
-
+
hello header content
-
+
hello main content
App Name v1.0.0
} row2={
something something
} /> diff --git a/packages/documentation/src/Components/Table.stories.tsx b/packages/documentation/src/Components/Table.stories.tsx index 94ab0b2a..ea381774 100644 --- a/packages/documentation/src/Components/Table.stories.tsx +++ b/packages/documentation/src/Components/Table.stories.tsx @@ -104,11 +104,7 @@ export const WithAction: Story = (args) => { {data.map((row, idx) => { return ( - + {row.timestamp} {row.character} @@ -209,11 +205,7 @@ export const WithStickyHeader: Story = (args) => { {data.map((row, idx) => { return ( - + {row.timestamp} {row.character} diff --git a/packages/documentation/src/GettingStarted/1-overview.stories.tsx b/packages/documentation/src/GettingStarted/1-overview.stories.tsx new file mode 100644 index 00000000..9e68186c --- /dev/null +++ b/packages/documentation/src/GettingStarted/1-overview.stories.tsx @@ -0,0 +1,82 @@ +import { linkTo, Story } from "@ladle/react"; +import { + ButtonIcon, + Flexgrid, + FlexgridItem, + IconNext, +} from "@versini/ui-components"; + +export default { + title: "Getting started", +}; + +export const Overview: Story = () => ( +
+

UI Components

+ + + +
+

+ UI Components provides a strong, responsive, and accessible library + of foundational React components. +

+
+ + + + + + + An illustration of web page rendered on both desktop and mobile devices. + + + +

Features

+ +
    +
  • + Strong: built-in strong components typing via + TypeScript. +
    • +
  • + Responsive: built-in responsive components. +
    • +
  • + Accessible: built with accessibility in mind from the + start. +
    • +
+ +

Extra

+ +
    +
  • + TailwindCSS: built with TailwindCSS, enabling styles + tree-shaking. +
    • +
  • + Hooks: provides a set of hooks to use in your + application. +
    • +
  • + Icons: provides a set of icons to use in your + application. +
    • +
  • + Theming: provides a theming system to customize the + look of the components. +
    • +
+
+); diff --git a/packages/documentation/src/GettingStarted/2-Installation.stories.tsx b/packages/documentation/src/GettingStarted/2-Installation.stories.tsx new file mode 100644 index 00000000..c4a89ba9 --- /dev/null +++ b/packages/documentation/src/GettingStarted/2-Installation.stories.tsx @@ -0,0 +1,50 @@ +import { linkTo, Story } from "@ladle/react"; +import { + ButtonIcon, + Flexgrid, + FlexgridItem, + IconNext, + IconPrevious, +} from "@versini/ui-components"; + +export default { + title: "Getting Started", +}; + +export const Installation: Story = () => ( +
+

Installation

+

+ The UI-Components library is available as a npm package. +

+ 
+			$ npm install --save @versini/ui-components
+
+

+ You also need to install React and React-DOM (at least 18.0.0 or above). +

+ 
+			$ npm install --save react react-dom
+
+ + + + + + + + + + + + +
+); diff --git a/packages/documentation/src/GettingStarted/3-configuration.stories.tsx b/packages/documentation/src/GettingStarted/3-configuration.stories.tsx new file mode 100644 index 00000000..14b07ddc --- /dev/null +++ b/packages/documentation/src/GettingStarted/3-configuration.stories.tsx @@ -0,0 +1,108 @@ +import { linkTo, Story } from "@ladle/react"; +import { + ButtonIcon, + Flexgrid, + FlexgridItem, + IconNext, + IconPrevious, +} from "@versini/ui-components"; + +export default { + title: "Getting Started", +}; + +export const Configuration: Story = () => ( +
+

Configuration

+ +

JavaScript

+ +
    +
  • +

    + UI Components come un-bundled, which means you need to use a bundler + such as Webpack, Vite or Rollup to bundle components into your + application. +

    +
    • +
  • +

    + UI Components are tree-shakeable, side-effect free and each component + style is self-contained. +

    +
    • +
  • +

    + Please refer to each component API documentation (under the Components + or Form components menu) to see how they should be imported, what + their individual props are as well as many different examples. +

    +
    • +
+ +

CSS

+ +

+ You can use the UI-Components library with or without{" "} + TailwindCSS. Depending on your situation, you can either + use the pre-built CSS or the TailwindCSS plugin to build your own styles + and take advantage of tree-shaking unused styles. +

+ +

Without TailwindCSS

+ +

+ If you are not using TailwindCSS, you can use the pre-built CSS file. Just + import it in your entry file: +

+ + 
+			
+				{`// index.js
+import "@versini/ui-components/dist/style.css";`}
+			
+
+ +

With TailwindCSS

+ +

+ If you are using TailwindCSS, you can use the{" "} + UI-Components library TailwindCSS plugin: +

+ + 
+			
+				{`// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+
+import { twPlugin } from "@versini/ui-components/dist/utilities";
+
+export default twPlugin.merge({
+  // this is an example, you can change the path to your files
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+});`}
+			
+
+ + + + + + + + + + + + + +
+); diff --git a/packages/documentation/src/GettingStarted/usage.stories.mdx b/packages/documentation/src/GettingStarted/4-usage.stories.mdx similarity index 70% rename from packages/documentation/src/GettingStarted/usage.stories.mdx rename to packages/documentation/src/GettingStarted/4-usage.stories.mdx index e009fe1c..0784ea9d 100644 --- a/packages/documentation/src/GettingStarted/usage.stories.mdx +++ b/packages/documentation/src/GettingStarted/4-usage.stories.mdx @@ -10,7 +10,9 @@ import { -# Usage +
+

Usage

+
```jsx // App.jsx @@ -37,22 +39,22 @@ function App() { } ``` -If everything works well, this is what you should see in your page: +
+

If everything works well, this is what you should see in your page:

-
- - Hooray - - } - > -

Hello World

- + + Hooray + + } +> +

Hello World

+
-
+
- -# Installation - -The UI-Components library is available as a npm package. - -```bash -$ npm install --save @versini/ui-components -``` - -You also need to install React and React-DOM (at least 18.0.0 or above). - -```bash -$ npm install --save react react-dom -``` - -
- - - - - - - - - - - - -
diff --git a/packages/documentation/src/GettingStarted/configuration.stories.mdx b/packages/documentation/src/GettingStarted/configuration.stories.mdx deleted file mode 100644 index e250e431..00000000 --- a/packages/documentation/src/GettingStarted/configuration.stories.mdx +++ /dev/null @@ -1,84 +0,0 @@ -import { linkTo, Meta } from "@ladle/react"; -import { - ButtonIcon, - Flexgrid, - FlexgridItem, - IconNext, - IconPrevious, -} from "@versini/ui-components"; - - - -# Configuration - -## JavaScript - -
-
    -
  • - UI Components come un-bundled, which means you need to use a bundler such - as Webpack, Vite or Rollup to bundle components into your application. -
    • -
  • - UI Components are tree-shakeable, side-effect free and each component - style is self-contained. -
    • -
  • - Please refer to each component API documentation (under the Components or - Form components menu) to see how they should be imported, what their - individual props are as well as many different examples. -
    • -
-
- -## CSS - -You can use the UI-Components library with or without TailwindCSS. Depending on your situation, you can either use the pre-built CSS or the TailwindCSS plugin to build your own styles and take advantage of tree-shaking unused styles. - -## Without TailwindCSS - -If you are not using TailwindCSS, you can use the pre-built CSS file. Just import it in your entry file: - -```javascript -// index.js -import "@versini/ui-components/dist/style.css"; -``` - -## With TailwindCSS - -If you are using TailwindCSS, you can use the UI-Components library TailwindCSS plugin: - -```javascript -// tailwind.config.js -/** @type {import('tailwindcss').Config} */ - -import { twPlugin } from "@versini/ui-components/dist/utilities"; - -export default twPlugin.merge({ - // this is an example, you can change the path to your files - content: ["./src/**/*.{js,ts,jsx,tsx}"], -}); -``` - -
- - - - - - - - - - - - -
diff --git a/packages/documentation/src/GettingStarted/overview.stories.tsx b/packages/documentation/src/GettingStarted/overview.stories.tsx deleted file mode 100644 index 624b1a4d..00000000 --- a/packages/documentation/src/GettingStarted/overview.stories.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import type { Story } from "@ladle/react"; -import { linkTo, Meta } from "@ladle/react"; -import { - ButtonIcon, - Flexgrid, - FlexgridItem, - IconNext, -} from "@versini/ui-components"; - -export default { - title: "Getting started", -}; - -export const Overview: Story = () => ( - <> - - -
-

UI Components --

- - - -
-

- UI Components provides a strong, responsive, and accessible - library of foundational React components. -

-
- - - - - - - An illustration of web page rendered on both desktop and mobile devices. - - - -

Features

- -
    -
  • - Strong: built-in strong components typing via - TypeScript. -
    • -
  • - Responsive: built-in responsive components. -
    • -
  • - Accessible: built with accessibility in mind from the - start. -
    • -
- -

Extra

- -
    -
  • - TailwindCSS: built with TailwindCSS, enabling styles - tree-shaking. -
    • -
  • - Hooks: provides a set of hooks to use in your - application. -
    • -
  • - Icons: provides a set of icons to use in your - application. -
    • -
  • - Theming: provides a theming system to customize the - look of the components. -
    • -
-
- -); diff --git a/packages/documentation/src/System/Flexgrid.stories.tsx b/packages/documentation/src/System/Flexgrid.stories.tsx index 4a22d1dd..d1b726af 100644 --- a/packages/documentation/src/System/Flexgrid.stories.tsx +++ b/packages/documentation/src/System/Flexgrid.stories.tsx @@ -62,33 +62,41 @@ export const Basic: Story = (args) => ( - item 1 -
- (starts col 1, spans 4 cols) +
+ item 1 +
+ (starts col 1, spans 4 cols) +
- item 2 -
- (starts col 5, spans 4 cols) +
+ item 2 +
+ (starts col 5, spans 4 cols) +
- item 3 -
- (starts col 9, spans 4 cols) +
+ item 3 +
+ (starts col 9, spans 4 cols) +
- item 4 -
- (starts col 1, spans 4 cols) +
+ item 4 +
+ (starts col 1, spans 4 cols) +
@@ -97,18 +105,22 @@ export const Basic: Story = (args) => ( - item 5 -
- (starts col 7, spans across the remaining space) +
+ item 5 +
+ (starts col 7, spans across the remaining space) +
- item 6 -
- (starts col 1, spans 6 cols) +
+ item 6 +
+ (starts col 1, spans 6 cols) +
@@ -117,27 +129,33 @@ export const Basic: Story = (args) => ( - item 7 -
- (starts col 1, spans 7 cols) +
+ item 7 +
+ (starts col 1, spans 7 cols) +
- item 8 -
- (starts col 9, spans 4 cols) +
+ item 8 +
+ (starts col 9, spans 4 cols) +
- item 9 -
- (starts col 1, spans 12 cols) +
+ item 9 +
+ (starts col 1, spans 12 cols) +
@@ -148,38 +166,17 @@ export const Interactive: Story = (args) => ( -
- Cell 1 -
+
Cell 1
 -
- Cell 2 -
+
Cell 2
 -
- Cell 3 -
+
Cell 3
 diff --git a/packages/documentation/src/System/Icons.stories.tsx b/packages/documentation/src/System/Icons.stories.tsx index 0a87cc6a..d2d07c80 100644 --- a/packages/documentation/src/System/Icons.stories.tsx +++ b/packages/documentation/src/System/Icons.stories.tsx @@ -25,29 +25,37 @@ export default { }; export const Basic: Story = (args) => ( -
- - - - - - - - - - - - - - - - - - -
+ <> +
+

Icons

+ 
+				{`import { IconXYZ } from "@versini/ui-components";`}
+
+
+
+ + + + + + + + + + + + + + + + + + +
+ ); Basic.args = { monotone: false, - decorative: false, + decorative: true, }; diff --git a/packages/ui-components/lib/tailwindPlugin.ts b/packages/ui-components/lib/tailwindPlugin.ts index 825a9f9e..693fa022 100644 --- a/packages/ui-components/lib/tailwindPlugin.ts +++ b/packages/ui-components/lib/tailwindPlugin.ts @@ -44,24 +44,131 @@ const myComponentLibraryConfig = { theme: { extend: { colors: dynamicColors(), - // typography: ({ theme }: { theme: any }) => ({ - typography: { + // typography: { + typography: ({ theme }: { theme: (arg0: string) => any }) => ({ DEFAULT: { css: { "h1, h2, h3, h4, h5, h6": { - color: tokens.colors["copy-light"], fontFamily: "Open Sans", }, + p: { + marginTop: 0, + marginBottom: 0, + fontSize: "1rem", + lineHeight: "1.75rem", + }, blockquote: { - borderLeftColor: tokens.colors["border-dark"], + borderLeftWidth: "6px", + }, + "blockquote p": { + fontFamily: "Georgia, Cambria, Times New Roman, Times, serif", + }, + li: { + fontSize: "1rem", + }, + pre: { + marginTop: "2rem", + marginBottom: "2rem", + borderRadius: "0.5rem", + fontSize: "0.875rem", + lineHeight: "1.25rem", + }, + code: { + fontFamily: + 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + }, + }, + }, + light: { + css: { + "--tw-prose-body": tokens.colors["copy-light"], + "--tw-prose-headings": tokens.colors["copy-light"], + "--tw-prose-lead": tokens.colors["copy-lighter"], + "--tw-prose-links": tokens.colors["copy-lighter"], + "--tw-prose-bold": tokens.colors["copy-lighter"], + "--tw-prose-counters": tokens.colors["copy-light"], + "--tw-prose-bullets": tokens.colors["copy-light"], + "--tw-prose-hr": tokens.colors["copy-light"], + "--tw-prose-quotes": tokens.colors["copy-lighter"], + "--tw-prose-quote-borders": tokens.colors["copy-lighter"], + "--tw-prose-captions": tokens.colors["copy-lighter"], + "--tw-prose-code": tokens.colors["copy-lighter"], + "--tw-prose-pre-code": tokens.colors["copy-light"], + "--tw-prose-pre-bg": tokens.colors["surface-dark"], + li: { + color: tokens.colors["copy-lighter"], }, - "ul > li::marker": { - color: "var(--tw-prose-counters)", + }, + }, + dark: { + css: { + "--tw-prose-body": theme("colors.slate[800]"), + "--tw-prose-headings": theme("colors.slate[900]"), + "--tw-prose-lead": theme("colors.slate[700]"), + "--tw-prose-links": theme("colors.slate[900]"), + "--tw-prose-bold": theme("colors.slate[900]"), + "--tw-prose-counters": theme("colors.slate[600]"), + "--tw-prose-bullets": theme("colors.slate[400]"), + "--tw-prose-hr": theme("colors.slate[300]"), + "--tw-prose-quotes": theme("colors.slate[900]"), + "--tw-prose-quote-borders": theme("colors.slate[300]"), + "--tw-prose-captions": theme("colors.slate[700]"), + "--tw-prose-code": theme("colors.slate[900]"), + "--tw-prose-pre-code": theme("colors.slate[100]"), + "--tw-prose-pre-bg": theme("colors.slate[900]"), + li: { + color: tokens.colors["copy-dark"], }, }, }, - // }), - }, + // light: { + // css: { + // "h1, h2, h3, h4, h5, h6": { + // color: tokens.colors["copy-light"], + // fontFamily: "Open Sans", + // }, + // strong: { + // color: tokens.colors["copy-lighter"], + // }, + // p: { + // color: tokens.colors["copy-lighter"], + // marginTop: 0, + // marginBottom: 0, + // fontSize: "1.125rem", + // lineHeight: "1.75rem", + // }, + // blockquote: { + // borderLeftColor: tokens.colors["border-light"], + // borderLeftWidth: "6px", + // }, + // "blockquote p": { + // fontFamily: "Georgia, Cambria, Times New Roman, Times, serif", + // }, + // li: { + // color: tokens.colors["copy-lighter"], + // fontSize: "1.125rem", + // }, + // "ul > li::marker": { + // color: tokens.colors["copy-lighter"], + // }, + // pre: { + // color: tokens.colors["copy-light"], + // backgroundColor: tokens.colors["surface-dark"], + // marginTop: "2rem", + // marginBottom: "2rem", + // borderRadius: "0.5rem", + // fontSize: "0.875rem", + // lineHeight: "1.25rem", + // }, + // code: { + // color: tokens.colors["copy-light"], + // fontFamily: + // 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + // }, + // }, + // // }, + // }, + }), }, }, }; diff --git a/packages/ui-components/src/components/Bubble/utilities.ts b/packages/ui-components/src/components/Bubble/utilities.ts index 45b0b6ad..e27e839c 100644 --- a/packages/ui-components/src/components/Bubble/utilities.ts +++ b/packages/ui-components/src/components/Bubble/utilities.ts @@ -16,7 +16,7 @@ const getBubbleColorClasses = ({ kind }: { kind: string }) => { }; const getBubbleTypographyClasses = () => { - return "prose prose-p:my-3 prose-blockquote:my-3 prose-ol:my-3 prose-ul:my-3 prose-ul:prose-li:marker:text-black"; + return "prose prose-dark prose-p:my-3 prose-blockquote:my-3 prose-ol:my-3 prose-ul:my-3 prose-ul:prose-li:marker:text-black"; }; const getBubbleBorderClasses = ({ kind }: { kind: string }) => { diff --git a/packages/ui-components/src/components/Button/utilities.ts b/packages/ui-components/src/components/Button/utilities.ts index 7cebbbd3..2a868849 100644 --- a/packages/ui-components/src/components/Button/utilities.ts +++ b/packages/ui-components/src/components/Button/utilities.ts @@ -73,7 +73,7 @@ const getButtonSizesClasses = ({ }; const getButtonBaseClasses = ({ kind }: { kind: string }) => { - return clsx("rounded-full text-copy-light", { + return clsx("not-prose rounded-full text-copy-light", { "bg-action-dark": kind === "dark", "bg-action-light": kind === "light", }); diff --git a/packages/ui-components/src/components/Card/utilities.ts b/packages/ui-components/src/components/Card/utilities.ts index 9508be91..08b5fae3 100644 --- a/packages/ui-components/src/components/Card/utilities.ts +++ b/packages/ui-components/src/components/Card/utilities.ts @@ -26,7 +26,7 @@ export const getCardClasses = ({ const header = headerClassName ? headerClassName : clsx( - `${CARD_CLASSNAME}__header mb-4 border-b-2 border-border-medium text-lg font-bold`, + `${CARD_CLASSNAME}__header not-prose mb-4 border-b-2 border-border-medium text-lg font-bold`, ); const footer = footerClassName diff --git a/packages/ui-components/src/components/Table/Table.tsx b/packages/ui-components/src/components/Table/Table.tsx index e40d1042..ecedbe65 100644 --- a/packages/ui-components/src/components/Table/Table.tsx +++ b/packages/ui-components/src/components/Table/Table.tsx @@ -109,6 +109,7 @@ export const TableCell = ({ const cellClass = getTableCellClasses({ cellWrapper: context.cellWrapper, className, + kind: context.kind, }); return ( diff --git a/packages/ui-components/src/components/Table/utilities.ts b/packages/ui-components/src/components/Table/utilities.ts index da6cb6f3..b8473b14 100644 --- a/packages/ui-components/src/components/Table/utilities.ts +++ b/packages/ui-components/src/components/Table/utilities.ts @@ -30,7 +30,7 @@ export const getTableClasses = ({ }, wrapperClassName, ), - table: clsx("w-full text-left text-sm", className, { + table: clsx("my-0 w-full text-left text-sm", className, { "text-copy-light": kind === "dark", "text-copy-dark": kind === "light", }), @@ -76,11 +76,15 @@ export const getTableRowClasses = ({ export const getTableCellClasses = ({ cellWrapper, className, + kind, }: { + kind: string; cellWrapper?: string; className?: string; }) => { return clsx(className, { + "text-copy-light": kind === "dark", + "text-copy-dark": kind === "light", "px-4 py-3": cellWrapper === CELL_WRAPPER_HEAD, "p-4": cellWrapper === CELL_WRAPPER_BODY, });