asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(ui,ui-preset): Code component styles (#6357)

Browse Source
This commit is contained in:
Kasper Fabricius Kristensen
2024-02-09 10:11:22 +01:00
committed by GitHub
parent 20cefa0335
commit 85a44dfd01
8 changed files with 64 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/design-system/ui/src/components/code-block/code-block.stories.tsx
View File

@@ -41,7 +41,9 @@ export const Default: Story = {
<CodeBlock snippets={snippets}>
<CodeBlock.Header>
<CodeBlock.Header.Meta>
<Label weight={"plus"}>/product-detail.js</Label>
<Label size="small" weight={"plus"}>
/product-detail.js
</Label>
</CodeBlock.Header.Meta>
</CodeBlock.Header>
<CodeBlock.Body />

24
packages/design-system/ui/src/components/code-block/code-block.tsx
View File

@@ -101,7 +101,7 @@ const HeaderComponent = ({
return (
<div
className={clx(
"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3",
"border-b-ui-code-border bg-ui-code-bg-subtle flex items-center gap-2 border-b px-4 py-3",
className
)}
{...props}
@@ -110,9 +110,9 @@ const HeaderComponent = ({
snippets.map((snippet) => (
<div
className={clx(
"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all",
"text-ui-code-fg-subtle txt-compact-small-plus transition-fg cursor-pointer rounded-full border border-transparent px-3 py-2",
{
"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default":
"text-ui-code-fg-base border-ui-code-border bg-ui-code-bg-base cursor-default":
active.label === snippet.label,
}
)}
@@ -137,7 +137,10 @@ const Meta = ({
}: React.HTMLAttributes<HTMLDivElement>) => {
return (
<div
className={clx("text-ui-code-text-subtle ml-auto", className)}
className={clx(
"txt-compact-small text-ui-code-fg-subtle ml-auto",
className
)}
{...props}
/>
)
@@ -165,7 +168,7 @@ const Body = ({
{!active.hideCopy && (
<Copy
content={active.code}
className="text-ui-code-icon absolute right-4 top-4"
className="text-ui-code-fg-muted absolute right-4 top-4"
/>
)}
<div className="max-w-[90%]">
@@ -237,12 +240,9 @@ const Body = ({
>
{({ style, tokens, getLineProps, getTokenProps }) => (
<pre
className={clx(
"txt-compact-small whitespace-pre-wrap bg-transparent font-mono",
{
"grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
}
)}
className={clx("code-body whitespace-pre-wrap bg-transparent", {
"grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
})}
style={{
...style,
background: "transparent",
@@ -253,7 +253,7 @@ const Body = ({
{tokens.map((_, i) => (
<span
key={i}
className="text-ui-code-text-subtle tabular-nums"
className="text-ui-code-fg-subtle tabular-nums"
>
{i + 1}
</span>