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

6
.changeset/happy-zoos-smile.md Normal file
View File

@@ -0,0 +1,6 @@
---
"@medusajs/ui-preset": patch
"@medusajs/ui": patch
---
fix(ui,ui-preset): Fixes an issue where the color styles of two code components was broken

5
packages/design-system/ui-preset/src/theme/extension/theme.ts
View File

@@ -310,7 +310,6 @@ export const theme = {
},
"boxShadow": {
"elevation-card-hover": "var(--elevation-card-hover)",
"elevation-modal": "var(--elevation-modal)",
"buttons-inverted": "var(--buttons-inverted)",
"elevation-card-rest": "var(--elevation-card-rest)",
"buttons-neutral-focus": "var(--buttons-neutral-focus)",
@@ -329,7 +328,9 @@ export const theme = {
"details-switch-background": "var(--details-switch-background)",
"elevation-tooltip": "var(--elevation-tooltip)",
"borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
"elevation-flyout": "var(--elevation-flyout)"
"elevation-flyout": "var(--elevation-flyout)",
"details-commandbar": "var(--details-commandbar)",
"elevation-modal": "var(--elevation-modal)"
}
}
}

10
packages/design-system/ui-preset/src/theme/tokens/effects.ts
View File

@@ -2,7 +2,6 @@ export const effects = {
"dark": {
"--details-switch-background-focus": "0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
"--buttons-neutral-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
"--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(46, 48, 53, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
"--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
"--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
"--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
@@ -20,11 +19,12 @@ export const effects = {
"--buttons-danger-focus": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
"--borders-base": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
"--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 4px rgba(225, 29, 72, 0.25)",
"--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)"
"--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
"--details-commandbar": "0px 0px 0px 1px rgba(228, 228, 233, 1) inset, 0px 0px 0px 1.5px rgba(46, 48, 53, 0.2) inset, 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
"--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 1.5px rgba(46, 48, 53, 0.6) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)"
},
"light": {
"--elevation-card-hover": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 8px 0px rgba(3, 7, 18, 0.1)",
"--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 231, 235, 0.4) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
"--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8)",
"--elevation-card-rest": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
"--buttons-neutral-focus": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
@@ -43,6 +43,8 @@ export const effects = {
"--details-switch-background": "0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
"--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
"--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
"--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)"
"--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)",
"--details-commandbar": "0px 0px 0px 1px rgba(27, 27, 31, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset, 0px 16px 32px 0px rgba(3, 7, 18, 0.16), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
"--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(229, 231, 235, 0.6) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)"
}
}

24
packages/design-system/ui-preset/src/theme/tokens/typography.ts
View File

@@ -131,18 +131,6 @@ export const typography = {
"fontWeight": "400",
"fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
},
".code-body": {
"fontSize": "0.8125rem",
"lineHeight": "1.5rem",
"fontWeight": "400",
"fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
},
".code-label": {
"fontSize": "0.8125rem",
"lineHeight": "1.25rem",
"fontWeight": "400",
"fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
},
".txt-compact-xlarge-plus": {
"fontSize": "1.125rem",
"lineHeight": "1.25rem",
@@ -190,5 +178,17 @@ export const typography = {
"lineHeight": "1.75rem",
"fontWeight": "500",
"fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
},
".code-body": {
"fontSize": "0.75rem",
"lineHeight": "1.375rem",
"fontWeight": "400",
"fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
},
".code-label": {
"fontSize": "0.75rem",
"lineHeight": "1.25rem",
"fontWeight": "400",
"fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
}
}

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>

8
packages/design-system/ui/src/components/command/command.stories.tsx
View File

@@ -1,7 +1,7 @@
import React from "react"
import type { Meta, StoryObj } from "@storybook/react"
import { Command } from "./command"
import React from "react"
import { Badge } from "../badge"
import { Command } from "./command"
const meta: Meta<typeof Command> = {
title: "Components/Command",
@@ -20,7 +20,9 @@ export const Default: Story = {
return (
<div className="w-[500px]">
<Command>
<Badge color="green">Get</Badge>
<Badge className="dark" size="small" color="green">
Get
</Badge>
<code>localhost:9000/store/products</code>
<Command.Copy content="localhost:9000/store/products" />
</Command>

20
packages/design-system/ui/src/components/command/command.tsx
View File

@@ -14,8 +14,8 @@ const CommandComponent = ({
return (
<div
className={clx(
"bg-ui-code-bg-header border-ui-code-border flex items-center rounded-lg border px-3 py-2",
"[&>code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6",
"bg-ui-code-bg-base border-ui-code-border flex items-center rounded-lg border px-3 py-2",
"[&>code]:text-ui-code-fg-base [&>code]:code-body [&>code]:mx-3",
className
)}
{...props}
@@ -24,6 +24,20 @@ const CommandComponent = ({
}
CommandComponent.displayName = "Command"
const Command = Object.assign(CommandComponent, { Copy })
const CommandCopy = React.forwardRef<
React.ElementRef<typeof Copy>,
React.ComponentPropsWithoutRef<typeof Copy>
>(({ className, ...props }, ref) => {
return (
<Copy
{...props}
ref={ref}
className={clx("!text-ui-code-fg-muted ml-auto", className)}
/>
)
})
CommandCopy.displayName = "Command.Copy"
const Command = Object.assign(CommandComponent, { Copy: CommandCopy })
export { Command }