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

fix(dashboard): JSON view (#8038)

Browse Source 
* updated json view

* cleanup

* cleanup
This commit is contained in:
Kasper Fabricius Kristensen
2024-07-09 16:45:22 +02:00
committed by GitHub
parent 566bbd5074
commit 4736d9e2dd
9 changed files with 494 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
packages/admin-next/dashboard/src/components/common/json-view-section/json-view-section.tsx
View File

@@ -1,4 +1,10 @@
import { ArrowsPointingOut, XMarkMini } from "@medusajs/icons"
import {
ArrowsPointingOut,
Check,
SquareTwoStack,
TriangleDownMini,
XMarkMini,
} from "@medusajs/icons"
import {
Badge,
Container,
@@ -8,29 +14,27 @@ import {
Kbd,
} from "@medusajs/ui"
import Primitive from "@uiw/react-json-view"
import { CSSProperties, Suspense } from "react"
import { useTranslation } from "react-i18next"
import { CSSProperties, MouseEvent, Suspense, useState } from "react"
import { Trans, useTranslation } from "react-i18next"
type JsonViewSectionProps = {
data: object
root?: string
title?: string
}
// TODO: Fix the positioning of the copy btn
export const JsonViewSection = ({
data,
root,
title = "JSON",
}: JsonViewSectionProps) => {
export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
const { t } = useTranslation()
const numberOfKeys = Object.keys(data).length
return (
<Container className="flex items-center justify-between px-6 py-4">
<div className="flex items-center gap-x-4">
<Heading level="h2">{title}</Heading>
<Badge size="2xsmall">{numberOfKeys} keys</Badge>
<Heading level="h2">{t("json.header")}</Heading>
<Badge size="2xsmall">
{t("json.numberOfKeys", {
count: numberOfKeys,
})}
</Badge>
</div>
<Drawer>
<Drawer.Trigger asChild>
@@ -42,86 +46,153 @@ export const JsonViewSection = ({
<ArrowsPointingOut />
</IconButton>
</Drawer.Trigger>
<Drawer.Content className="border-ui-code-border bg-ui-code-bg-base text-ui-code-fg-subtle dark overflow-hidden border shadow-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">
<div className="bg-ui-code-bg-base border-ui-code-border flex items-center justify-between border-b px-6 py-4">
<Drawer.Content className="bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">
<div className="bg-ui-code-bg-base flex items-center justify-between px-6 py-4">
<div className="flex items-center gap-x-4">
<Heading className="text-ui-code-fg-base">{title}</Heading>
<Badge size="2xsmall">{numberOfKeys} keys</Badge>
<Drawer.Title asChild>
<Heading className="text-ui-contrast-fg-primary">
<Trans
i18nKey="json.drawer.header"
count={numberOfKeys}
components={[
<span key="count-span" className="text-ui-fg-subtle" />,
]}
/>
</Heading>
</Drawer.Title>
<Drawer.Description className="sr-only">
{t("json.drawer.description")}
</Drawer.Description>
</div>
<div className="flex items-center gap-x-2">
<Kbd>esc</Kbd>
<Kbd className="bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary">
esc
</Kbd>
<Drawer.Close asChild>
<IconButton
size="small"
variant="transparent"
className="text-ui-fg-subtle"
className="text-ui-contrast-fg-secondary hover:text-ui-contrast-fg-primary hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus-visible:bg-ui-contrast-bg-base-hover focus-visible:shadow-borders-interactive-with-active"
>
<XMarkMini />
</IconButton>
</Drawer.Close>
</div>
</div>
<Drawer.Body className="overflow-auto p-4">
<Suspense fallback={<div>Loading...</div>}>
<Primitive
value={data}
displayDataTypes={false}
keyName={root}
style={
{
"--w-rjv-font-family": "Roboto Mono, monospace",
"--w-rjv-line-color": "var(--code-border)",
"--w-rjv-curlybraces-color": "rgb(255,255,255)",
"--w-rjv-key-string": "rgb(247,208,25)",
"--w-rjv-info-color": "var(--code-fg-muted)",
"--w-rjv-type-string-color": "rgb(73,209,110)",
"--w-rjv-quotes-string-color": "rgb(73,209,110)",
"--w-rjv-type-boolean-color": "rgb(187,77,96)",
"--w-rjv-type-int-color": "rgb(247,208,25)",
"--w-rjv-type-float-color": "rgb(247,208,25)",
"--w-rjv-type-bigint-color": "rgb(247,208,25)",
"--w-rjv-key-number": "rgb(247,208,25)",
"--w-rjv-arrow-color": "rgb(255,255,255)",
"--w-rjv-copied-color": "var(--code-fg-subtle)",
"--w-rjv-copied-success-color": "var(--code-fg-base)",
"--w-rjv-colon-color": "rgb(255,255,255)",
} as CSSProperties
}
collapsed={1}
<Drawer.Body className="flex flex-1 flex-col overflow-hidden px-[5px] py-0 pb-[5px]">
<div className="bg-ui-contrast-bg-subtle flex-1 overflow-auto rounded-b-[4px] rounded-t-lg p-3">
<Suspense
fallback={<div className="flex size-full flex-col"></div>}
>
<Primitive.Quote render={() => <span />} />
<Primitive.Null
render={() => (
<span className="text-ui-tag-red-text">null</span>
)}
/>
<Primitive.Undefined
render={() => (
<span className="text-ui-code-fg-muted">undefined</span>
)}
/>
<Primitive.CountInfo
render={(_props, { value }) => {
return (
<span className="text-ui-tag-neutral-text ml-2">
{t("general.items", {
count: Object.keys(value as object).length,
})}
</span>
)
}}
/>
{/* <Primitive.Arrow>
<TriangleDownMini className="text-ui-code-fg-subtle -ml-[3px]" />
</Primitive.Arrow> */}
<Primitive.Colon>
<span className="mr-1">:</span>
</Primitive.Colon>
</Primitive>
</Suspense>
<Primitive
value={data}
displayDataTypes={false}
style={
{
"--w-rjv-font-family": "Roboto Mono, monospace",
"--w-rjv-line-color": "var(--contrast-border-base)",
"--w-rjv-curlybraces-color":
"var(--contrast-fg-secondary)",
"--w-rjv-brackets-color": "var(--contrast-fg-secondary)",
"--w-rjv-key-string": "var(--contrast-fg-primary)",
"--w-rjv-info-color": "var(--contrast-fg-secondary)",
"--w-rjv-type-string-color": "var(--tag-green-icon)",
"--w-rjv-quotes-string-color": "var(--tag-green-icon)",
"--w-rjv-type-boolean-color": "var(--tag-orange-icon)",
"--w-rjv-type-int-color": "var(--tag-orange-icon)",
"--w-rjv-type-float-color": "var(--tag-orange-icon)",
"--w-rjv-type-bigint-color": "var(--tag-orange-icon)",
"--w-rjv-key-number": "var(--contrast-fg-secondary)",
"--w-rjv-arrow-color": "var(--contrast-fg-secondary)",
"--w-rjv-copied-color": "var(--contrast-fg-secondary)",
"--w-rjv-copied-success-color":
"var(--contrast-fg-primary)",
"--w-rjv-colon-color": "var(--contrast-fg-primary)",
"--w-rjv-ellipsis-color": "var(--contrast-fg-secondary)",
} as CSSProperties
}
collapsed={1}
>
<Primitive.Quote render={() => <span />} />
<Primitive.Null
render={() => (
<span className="text-ui-tag-red-icon">null</span>
)}
/>
<Primitive.Undefined
render={() => (
<span className="text-ui-tag-blue-icon">undefined</span>
)}
/>
<Primitive.CountInfo
render={(_props, { value }) => {
return (
<span className="text-ui-contrast-fg-secondary ml-2">
{t("general.items", {
count: Object.keys(value as object).length,
})}
</span>
)
}}
/>
<Primitive.Arrow>
<TriangleDownMini className="text-ui-contrast-fg-secondary -ml-[0.5px]" />
</Primitive.Arrow>
<Primitive.Colon>
<span className="mr-1">:</span>
</Primitive.Colon>
<Primitive.Copied
render={({ style }, { value }) => {
return <Copied style={style} value={value} />
}}
/>
</Primitive>
</Suspense>
</div>
</Drawer.Body>
</Drawer.Content>
</Drawer>
</Container>
)
}
type CopiedProps = {
style?: CSSProperties
value: object | undefined
}
const Copied = ({ style, value }: CopiedProps) => {
const [copied, setCopied] = useState(false)
const handler = (e: MouseEvent<HTMLSpanElement>) => {
e.stopPropagation()
setCopied(true)
if (typeof value === "string") {
navigator.clipboard.writeText(value)
} else {
const json = JSON.stringify(value, null, 2)
navigator.clipboard.writeText(json)
}
setTimeout(() => {
setCopied(false)
}, 2000)
}
const styl = { whiteSpace: "nowrap", width: "20px" }
if (copied) {
return (
<span style={{ ...style, ...styl }}>
<Check className="text-ui-contrast-fg-primary" />
</span>
)
}
return (
<span style={{ ...style, ...styl }} onClick={handler}>
<SquareTwoStack className="text-ui-contrast-fg-secondary" />
</span>
)
}

10
packages/admin-next/dashboard/src/i18n/translations/en.json
View File

@@ -52,6 +52,16 @@
"includesTaxTooltip": "Prices in this column are tax inclusive.",
"excludesTaxTooltip": "Prices in this column are tax exclusive."
},
"json": {
"header": "JSON",
"numberOfKeys_one": "{{count}} key",
"numberOfKeys_other": "{{count}} keys",
"drawer": {
"header_one": "JSON <0>· {{count}} key</0>",
"header_other": "JSON <0>· {{count}} keys</0>",
"description": "View the JSON data for this object."
}
},
"validation": {
"mustBeInt": "The value must be a whole number.",
"mustBePositive": "The value must be a positive number."

2
packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
View File

@@ -62,7 +62,7 @@ export const ProductDetail = () => {
)
})}
<div className="hidden xl:block">
<JsonViewSection data={product} root="product" />
<JsonViewSection data={product} />
</div>
</div>
<div className="flex w-full max-w-[100%] flex-col gap-y-3 xl:mt-0 xl:max-w-[400px]">

2
packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/workflow-execution-payload-section.tsx
View File

@@ -20,5 +20,5 @@ export const WorkflowExecutionPayloadSection = ({
payload = { input: payload }
}
return <JsonViewSection title="Payload" data={payload as object} />
return <JsonViewSection data={payload as object} />
}

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

@@ -3,75 +3,44 @@ export const theme = {
"colors": {
"ui": {
"tag": {
"green": {
"bg": {
"DEFAULT": "var(--tag-green-bg)",
"hover": {
"DEFAULT": "var(--tag-green-bg-hover)"
}
"neutral": {
"border": {
"DEFAULT": "var(--tag-neutral-border)"
},
"icon": {
"DEFAULT": "var(--tag-green-icon)"
},
"border": {
"DEFAULT": "var(--tag-green-border)"
"DEFAULT": "var(--tag-neutral-icon)"
},
"text": {
"DEFAULT": "var(--tag-green-text)"
"DEFAULT": "var(--tag-neutral-text)"
},
"bg": {
"hover": {
"DEFAULT": "var(--tag-neutral-bg-hover)"
},
"DEFAULT": "var(--tag-neutral-bg)"
}
},
"red": {
"text": {
"DEFAULT": "var(--tag-red-text)"
},
"bg": {
"DEFAULT": "var(--tag-red-bg)",
"hover": {
"DEFAULT": "var(--tag-red-bg-hover)"
}
},
"icon": {
"DEFAULT": "var(--tag-red-icon)"
},
"text": {
"DEFAULT": "var(--tag-red-text)"
},
"border": {
"DEFAULT": "var(--tag-red-border)"
}
},
"orange": {
"bg": {
"DEFAULT": "var(--tag-orange-bg)",
"hover": {
"DEFAULT": "var(--tag-orange-bg-hover)"
}
},
"icon": {
"DEFAULT": "var(--tag-orange-icon)"
},
"text": {
"DEFAULT": "var(--tag-orange-text)"
},
"border": {
"DEFAULT": "var(--tag-orange-border)"
}
},
"purple": {
"bg": {
"hover": {
"DEFAULT": "var(--tag-purple-bg-hover)"
},
"DEFAULT": "var(--tag-purple-bg)"
},
"text": {
"DEFAULT": "var(--tag-purple-text)"
},
"icon": {
"DEFAULT": "var(--tag-purple-icon)"
},
"border": {
"DEFAULT": "var(--tag-purple-border)"
"DEFAULT": "var(--tag-red-icon)"
}
},
"blue": {
"text": {
"DEFAULT": "var(--tag-blue-text)"
},
"border": {
"DEFAULT": "var(--tag-blue-border)"
},
@@ -83,93 +52,93 @@ export const theme = {
},
"icon": {
"DEFAULT": "var(--tag-blue-icon)"
},
"text": {
"DEFAULT": "var(--tag-blue-text)"
}
},
"neutral": {
"border": {
"DEFAULT": "var(--tag-neutral-border)"
},
"orange": {
"text": {
"DEFAULT": "var(--tag-neutral-text)"
"DEFAULT": "var(--tag-orange-text)"
},
"bg": {
"DEFAULT": "var(--tag-neutral-bg)",
"hover": {
"DEFAULT": "var(--tag-neutral-bg-hover)"
}
"border": {
"DEFAULT": "var(--tag-orange-border)"
},
"icon": {
"DEFAULT": "var(--tag-neutral-icon)"
}
}
},
"border": {
"interactive": {
"DEFAULT": "var(--border-interactive)"
},
"error": {
"DEFAULT": "var(--border-error)"
},
"danger": {
"DEFAULT": "var(--border-danger)"
},
"strong": {
"DEFAULT": "var(--border-strong)"
},
"base": {
"DEFAULT": "var(--border-base)"
},
"transparent": {
"DEFAULT": "var(--border-transparent)"
},
"menu": {
"bot": {
"DEFAULT": "var(--border-menu-bot)"
"DEFAULT": "var(--tag-orange-icon)"
},
"top": {
"DEFAULT": "var(--border-menu-top)"
"bg": {
"hover": {
"DEFAULT": "var(--tag-orange-bg-hover)"
},
"DEFAULT": "var(--tag-orange-bg)"
}
},
"green": {
"icon": {
"DEFAULT": "var(--tag-green-icon)"
},
"border": {
"DEFAULT": "var(--tag-green-border)"
},
"text": {
"DEFAULT": "var(--tag-green-text)"
},
"bg": {
"hover": {
"DEFAULT": "var(--tag-green-bg-hover)"
},
"DEFAULT": "var(--tag-green-bg)"
}
},
"purple": {
"bg": {
"DEFAULT": "var(--tag-purple-bg)",
"hover": {
"DEFAULT": "var(--tag-purple-bg-hover)"
}
},
"text": {
"DEFAULT": "var(--tag-purple-text)"
},
"icon": {
"DEFAULT": "var(--tag-purple-icon)"
},
"border": {
"DEFAULT": "var(--tag-purple-border)"
}
}
},
"bg": {
"highlight": {
"DEFAULT": "var(--bg-highlight)",
"hover": {
"DEFAULT": "var(--bg-highlight-hover)"
"switch": {
"off": {
"hover": {
"DEFAULT": "var(--bg-switch-off-hover)"
},
"DEFAULT": "var(--bg-switch-off)"
}
},
"interactive": {
"DEFAULT": "var(--bg-interactive)"
"subtle": {
"hover": {
"DEFAULT": "var(--bg-subtle-hover)"
},
"DEFAULT": "var(--bg-subtle)",
"pressed": {
"DEFAULT": "var(--bg-subtle-pressed)"
}
},
"overlay": {
"DEFAULT": "var(--bg-overlay)"
},
"switch": {
"off": {
"DEFAULT": "var(--bg-switch-off)",
"hover": {
"DEFAULT": "var(--bg-switch-off-hover)"
}
}
},
"field": {
"component": {
"hover": {
"DEFAULT": "var(--bg-field-component-hover)"
},
"DEFAULT": "var(--bg-field-component)"
},
"DEFAULT": "var(--bg-field)",
"hover": {
"DEFAULT": "var(--bg-field-hover)"
},
"component": {
"DEFAULT": "var(--bg-field-component)",
"hover": {
"DEFAULT": "var(--bg-field-component-hover)"
}
}
},
"disabled": {
"DEFAULT": "var(--bg-disabled)"
},
"base": {
"pressed": {
"DEFAULT": "var(--bg-base-pressed)"
@@ -179,6 +148,12 @@ export const theme = {
},
"DEFAULT": "var(--bg-base)"
},
"highlight": {
"DEFAULT": "var(--bg-highlight)",
"hover": {
"DEFAULT": "var(--bg-highlight-hover)"
}
},
"component": {
"pressed": {
"DEFAULT": "var(--bg-component-pressed)"
@@ -188,86 +163,61 @@ export const theme = {
"DEFAULT": "var(--bg-component-hover)"
}
},
"subtle": {
"DEFAULT": "var(--bg-subtle)",
"pressed": {
"DEFAULT": "var(--bg-subtle-pressed)"
},
"hover": {
"DEFAULT": "var(--bg-subtle-hover)"
}
}
},
"fg": {
"on": {
"inverted": {
"DEFAULT": "var(--fg-on-inverted)"
},
"color": {
"DEFAULT": "var(--fg-on-color)"
}
},
"interactive": {
"hover": {
"DEFAULT": "var(--fg-interactive-hover)"
},
"DEFAULT": "var(--fg-interactive)"
},
"error": {
"DEFAULT": "var(--fg-error)"
},
"muted": {
"DEFAULT": "var(--fg-muted)"
"DEFAULT": "var(--bg-interactive)"
},
"disabled": {
"DEFAULT": "var(--fg-disabled)"
},
"base": {
"DEFAULT": "var(--fg-base)"
},
"subtle": {
"DEFAULT": "var(--fg-subtle)"
"DEFAULT": "var(--bg-disabled)"
}
},
"button": {
"danger": {
"DEFAULT": "var(--button-danger)",
"pressed": {
"DEFAULT": "var(--button-danger-pressed)"
"border": {
"menu": {
"bot": {
"DEFAULT": "var(--border-menu-bot)"
},
"hover": {
"DEFAULT": "var(--button-danger-hover)"
"top": {
"DEFAULT": "var(--border-menu-top)"
}
},
"strong": {
"DEFAULT": "var(--border-strong)"
},
"interactive": {
"DEFAULT": "var(--border-interactive)"
},
"base": {
"DEFAULT": "var(--border-base)"
},
"danger": {
"DEFAULT": "var(--border-danger)"
},
"error": {
"DEFAULT": "var(--border-error)"
},
"transparent": {
"DEFAULT": "var(--button-transparent)",
"hover": {
"DEFAULT": "var(--button-transparent-hover)"
},
"pressed": {
"DEFAULT": "var(--button-transparent-pressed)"
}
},
"neutral": {
"DEFAULT": "var(--button-neutral)",
"hover": {
"DEFAULT": "var(--button-neutral-hover)"
},
"pressed": {
"DEFAULT": "var(--button-neutral-pressed)"
}
},
"inverted": {
"DEFAULT": "var(--button-inverted)",
"pressed": {
"DEFAULT": "var(--button-inverted-pressed)"
},
"hover": {
"DEFAULT": "var(--button-inverted-hover)"
}
"DEFAULT": "var(--border-transparent)"
}
},
"contrast": {
"border": {
"top": {
"DEFAULT": "var(--contrast-border-top)"
},
"base": {
"DEFAULT": "var(--contrast-border-base)"
},
"bot": {
"DEFAULT": "var(--contrast-border-bot)"
}
},
"fg": {
"primary": {
"DEFAULT": "var(--contrast-fg-primary)"
},
"secondary": {
"DEFAULT": "var(--contrast-fg-secondary)"
}
},
"bg": {
"base": {
"pressed": {
@@ -280,50 +230,76 @@ export const theme = {
},
"subtle": {
"DEFAULT": "var(--contrast-bg-subtle)"
},
"highlight": {
"DEFAULT": "var(--contrast-bg-highlight)"
},
"alpha": {
"DEFAULT": "var(--contrast-bg-alpha)"
}
},
"fg": {
"primary": {
"DEFAULT": "var(--contrast-fg-primary)"
},
"secondary": {
"DEFAULT": "var(--contrast-fg-secondary)"
}
},
"border": {
"base": {
"DEFAULT": "var(--contrast-border-base)"
}
}
},
"code": {
"fg": {
"subtle": {
"DEFAULT": "var(--code-fg-subtle)"
"fg": {
"disabled": {
"DEFAULT": "var(--fg-disabled)"
},
"base": {
"DEFAULT": "var(--fg-base)"
},
"muted": {
"DEFAULT": "var(--fg-muted)"
},
"on": {
"color": {
"DEFAULT": "var(--fg-on-color)"
},
"muted": {
"DEFAULT": "var(--code-fg-muted)"
},
"base": {
"DEFAULT": "var(--code-fg-base)"
"inverted": {
"DEFAULT": "var(--fg-on-inverted)"
}
},
"bg": {
"base": {
"DEFAULT": "var(--code-bg-base)"
"interactive": {
"hover": {
"DEFAULT": "var(--fg-interactive-hover)"
},
"subtle": {
"DEFAULT": "var(--code-bg-subtle)"
"DEFAULT": "var(--fg-interactive)"
},
"error": {
"DEFAULT": "var(--fg-error)"
},
"subtle": {
"DEFAULT": "var(--fg-subtle)"
}
},
"button": {
"inverted": {
"pressed": {
"DEFAULT": "var(--button-inverted-pressed)"
},
"hover": {
"DEFAULT": "var(--button-inverted-hover)"
},
"DEFAULT": "var(--button-inverted)"
},
"transparent": {
"DEFAULT": "var(--button-transparent)",
"hover": {
"DEFAULT": "var(--button-transparent-hover)"
},
"pressed": {
"DEFAULT": "var(--button-transparent-pressed)"
}
},
"border": {
"DEFAULT": "var(--code-border)"
"danger": {
"pressed": {
"DEFAULT": "var(--button-danger-pressed)"
},
"DEFAULT": "var(--button-danger)",
"hover": {
"DEFAULT": "var(--button-danger-hover)"
}
},
"neutral": {
"DEFAULT": "var(--button-neutral)",
"hover": {
"DEFAULT": "var(--button-neutral-hover)"
},
"pressed": {
"DEFAULT": "var(--button-neutral-pressed)"
}
}
}
}
@@ -345,13 +321,13 @@ export const theme = {
"borders-base": "var(--borders-base)",
"elevation-card-rest": "var(--elevation-card-rest)",
"buttons-neutral-focus": "var(--buttons-neutral-focus)",
"details-code-block": "var(--details-code-block)",
"details-switch-background-focus": "var(--details-switch-background-focus)",
"details-switch-background": "var(--details-switch-background)",
"elevation-flyout": "var(--elevation-flyout)",
"elevation-tooltip": "var(--elevation-tooltip)",
"elevation-modal": "var(--elevation-modal)",
"details-commandbar": "var(--details-commandbar)"
"elevation-commandbar": "var(--elevation-commandbar)",
"elevation-code-block": "var(--elevation-code-block)"
}
}
}

284
packages/design-system/ui-preset/src/theme/tokens/colors.ts
View File

@@ -1,194 +1,182 @@
export const colors = {
"dark": {
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--border-interactive": "rgba(96, 165, 250, 1)",
"--fg-interactive-hover": "rgba(147, 197, 253, 1)",
"--fg-error": "rgba(251, 113, 133, 1)",
"--bg-interactive": "rgba(96, 165, 250, 1)",
"--border-error": "rgba(251, 113, 133, 1)",
"--button-danger": "rgba(159, 18, 57, 1)",
"--fg-interactive": "rgba(96, 165, 250, 1)",
"--tag-red-border": "rgba(136, 19, 55, 1)",
"--tag-red-bg": "rgba(76, 5, 25, 1)",
"--tag-blue-text": "rgba(147, 197, 253, 1)",
"--tag-orange-text": "rgba(253, 186, 116, 1)",
"--tag-green-text": "rgba(52, 211, 153, 1)",
"--tag-orange-border": "rgba(124, 45, 18, 1)",
"--tag-green-border": "rgba(6, 78, 59, 1)",
"--tag-red-text": "rgba(253, 164, 175, 1)",
"--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
"--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
"--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
"--border-transparent": "rgba(255, 255, 255, 0)",
"--tag-orange-icon": "rgba(251, 146, 60, 1)",
"--tag-purple-bg": "rgba(46, 16, 101, 1)",
"--tag-blue-bg": "rgba(23, 37, 84, 1)",
"--tag-green-bg": "rgba(2, 44, 34, 1)",
"--tag-blue-border": "rgba(30, 58, 138, 1)",
"--tag-purple-border": "rgba(91, 33, 182, 1)",
"--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
"--tag-orange-bg": "rgba(67, 20, 7, 1)",
"--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
"--tag-blue-icon": "rgba(96, 165, 250, 1)",
"--tag-red-icon": "rgba(251, 113, 133, 1)",
"--tag-purple-icon": "rgba(167, 139, 250, 1)",
"--tag-purple-text": "rgba(196, 181, 253, 1)",
"--tag-green-icon": "rgba(16, 185, 129, 1)",
"--button-danger-pressed": "rgba(225, 29, 72, 1)",
"--button-danger-hover": "rgba(190, 18, 60, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--code-bg-base": "rgba(9, 9, 11, 1)",
"--bg-subtle-hover": "rgba(24, 24, 27, 1)",
"--bg-overlay": "rgba(9, 9, 11, 0.72)",
"--fg-on-inverted": "rgba(9, 9, 11, 1)",
"--bg-base-pressed": "rgba(63, 63, 70, 1)",
"--button-transparent-pressed": "rgba(63, 63, 70, 1)",
"--bg-component-hover": "rgba(255, 255, 255, 0.1)",
"--border-menu-top": "rgba(24, 24, 27, 1)",
"--button-neutral": "rgba(39, 39, 42, 1)",
"--border-interactive": "rgba(96, 165, 250, 1)",
"--button-transparent-hover": "rgba(39, 39, 42, 1)",
"--code-fg-subtle": "rgba(161, 161, 170, 1)",
"--tag-neutral-bg-hover": "rgba(63, 63, 70, 1)",
"--contrast-border-base": "rgba(82, 82, 91, 1)",
"--tag-orange-border": "rgba(124, 45, 18, 1)",
"--tag-blue-text": "rgba(147, 197, 253, 1)",
"--button-neutral-pressed": "rgba(82, 82, 91, 1)",
"--tag-neutral-bg": "rgba(255, 255, 255, 0.08)",
"--bg-highlight": "rgba(23, 37, 84, 1)",
"--code-fg-base": "rgba(250, 250, 250, 1)",
"--tag-neutral-icon": "rgba(113, 113, 122, 1)",
"--bg-switch-off-hover": "rgba(82, 82, 91, 1)",
"--bg-base": "rgba(24, 24, 27, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--button-inverted-pressed": "rgba(161, 161, 170, 1)",
"--fg-interactive-hover": "rgba(147, 197, 253, 1)",
"--fg-error": "rgba(251, 113, 133, 1)",
"--button-neutral-hover": "rgba(63, 63, 70, 1)",
"--bg-switch-off": "rgba(63, 63, 70, 1)",
"--border-strong": "rgba(255, 255, 255, 0.16)",
"--border-error": "rgba(251, 113, 133, 1)",
"--fg-subtle": "rgba(161, 161, 170, 1)",
"--bg-highlight-hover": "rgba(30, 58, 138, 1)",
"--button-inverted": "rgba(82, 82, 91, 1)",
"--tag-orange-text": "rgba(253, 186, 116, 1)",
"--fg-base": "rgba(244, 244, 245, 1)",
"--code-border": "rgba(39, 39, 42, 1)",
"--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
"--contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
"--bg-base-hover": "rgba(39, 39, 42, 1)",
"--bg-subtle-hover": "rgba(24, 24, 27, 1)",
"--bg-field-component": "rgba(24, 24, 27, 1)",
"--fg-disabled": "rgba(82, 82, 91, 1)",
"--bg-subtle": "rgba(9, 9, 11, 1)",
"--tag-neutral-border": "rgba(63, 63, 70, 1)",
"--bg-subtle-pressed": "rgba(63, 63, 70, 1)",
"--bg-field-component-hover": "rgba(9, 9, 11, 0.24)",
"--button-danger": "rgba(159, 18, 57, 1)",
"--tag-blue-border": "rgba(30, 58, 138, 1)",
"--tag-neutral-text": "rgba(212, 212, 216, 1)",
"--fg-muted": "rgba(161, 161, 170, 1)",
"--bg-overlay": "rgba(9, 9, 11, 0.72)",
"--tag-purple-border": "rgba(91, 33, 182, 1)",
"--tag-green-text": "rgba(52, 211, 153, 1)",
"--button-inverted-hover": "rgba(113, 113, 122, 1)",
"--fg-on-inverted": "rgba(9, 9, 11, 1)",
"--code-bg-subtle": "rgba(24, 24, 27, 1)",
"--bg-component": "rgba(39, 39, 42, 1)",
"--bg-base-pressed": "rgba(63, 63, 70, 1)",
"--bg-disabled": "rgba(39, 39, 42, 1)",
"--contrast-bg-highlight": "rgba(82, 82, 91, 1)",
"--button-transparent-pressed": "rgba(63, 63, 70, 1)",
"--code-fg-muted": "rgba(82, 82, 91, 1)",
"--contrast-fg-secondary": "rgba(161, 161, 170, 1)",
"--contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
"--contrast-fg-primary": "rgba(250, 250, 250, 1)",
"--contrast-bg-base": "rgba(63, 63, 70, 1)",
"--bg-component-pressed": "rgba(255, 255, 255, 0.16)",
"--bg-component-hover": "rgba(255, 255, 255, 0.1)",
"--contrast-border-top": "rgba(24, 24, 27, 1)",
"--contrast-border-bot": "rgba(255, 255, 255, 0.08)",
"--contrast-fg-secondary": "rgba(161, 161, 170, 1)",
"--tag-blue-icon": "rgba(96, 165, 250, 1)",
"--contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
"--bg-field": "rgba(255, 255, 255, 0.04)",
"--bg-field-component": "rgba(24, 24, 27, 1)",
"--bg-field-component-hover": "rgba(9, 9, 11, 0.24)",
"--tag-neutral-bg": "rgba(255, 255, 255, 0.08)",
"--tag-green-border": "rgba(6, 78, 59, 1)",
"--contrast-fg-primary": "rgba(250, 250, 250, 1)",
"--tag-red-icon": "rgba(251, 113, 133, 1)",
"--tag-red-text": "rgba(253, 164, 175, 1)",
"--tag-purple-icon": "rgba(167, 139, 250, 1)",
"--bg-interactive": "rgba(96, 165, 250, 1)",
"--bg-field-hover": "rgba(255, 255, 255, 0.08)",
"--border-base": "rgba(255, 255, 255, 0.08)",
"--border-strong": "rgba(255, 255, 255, 0.16)",
"--contrast-bg-alpha": "rgba(63, 63, 70, 0.9)",
"--border-transparent": "rgba(255, 255, 255, 0)",
"--contrast-bg-base": "rgba(63, 63, 70, 1)",
"--tag-orange-icon": "rgba(251, 146, 60, 1)",
"--tag-purple-bg": "rgba(46, 16, 101, 1)",
"--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
"--contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
"--bg-base-hover": "rgba(39, 39, 42, 1)",
"--tag-blue-bg": "rgba(23, 37, 84, 1)",
"--tag-green-bg": "rgba(2, 44, 34, 1)",
"--tag-purple-text": "rgba(196, 181, 253, 1)",
"--bg-subtle-pressed": "rgba(63, 63, 70, 1)",
"--tag-red-border": "rgba(136, 19, 55, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--tag-green-icon": "rgba(16, 185, 129, 1)",
"--tag-red-bg": "rgba(76, 5, 25, 1)",
"--fg-interactive": "rgba(96, 165, 250, 1)",
"--tag-orange-bg": "rgba(67, 20, 7, 1)",
"--button-danger-hover": "rgba(190, 18, 60, 1)",
"--bg-component": "rgba(39, 39, 42, 1)",
"--bg-disabled": "rgba(39, 39, 42, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--border-menu-bot": "rgba(255, 255, 255, 0.08)",
"--border-menu-top": "rgba(24, 24, 27, 1)"
"--border-base": "rgba(255, 255, 255, 0.1)",
"--tag-purple-bg-hover": "rgba(91, 33, 182, 1)",
"--tag-orange-bg-hover": "rgba(124, 45, 18, 1)",
"--tag-neutral-bg-hover": "rgba(63, 63, 70, 1)",
"--tag-blue-bg-hover": "rgba(30, 58, 138, 1)",
"--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
"--tag-green-bg-hover": "rgba(6, 78, 59, 1)"
},
"light": {
"--tag-green-bg": "rgba(209, 250, 229, 1)",
"--border-interactive": "rgba(59, 130, 246, 1)",
"--bg-highlight": "rgba(239, 246, 255, 1)",
"--tag-red-bg": "rgba(255, 228, 230, 1)",
"--tag-orange-bg": "rgba(255, 237, 213, 1)",
"--tag-green-icon": "rgba(16, 185, 129, 1)",
"--tag-purple-bg-hover": "rgba(221, 214, 254, 1)",
"--tag-blue-border": "rgba(191, 219, 254, 1)",
"--tag-orange-icon": "rgba(249, 115, 22, 1)",
"--tag-purple-bg": "rgba(237, 233, 254, 1)",
"--tag-purple-text": "rgba(91, 33, 182, 1)",
"--tag-blue-bg": "rgba(219, 234, 254, 1)",
"--tag-blue-icon": "rgba(59, 130, 246, 1)",
"--border-error": "rgba(225, 29, 72, 1)",
"--fg-on-inverted": "rgba(255, 255, 255, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--fg-interactive-hover": "rgba(37, 99, 235, 1)",
"--fg-interactive": "rgba(59, 130, 246, 1)",
"--fg-error": "rgba(225, 29, 72, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--fg-muted": "rgba(161, 161, 170, 1)",
"--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
"--tag-blue-bg-hover": "rgba(191, 219, 254, 1)",
"--tag-red-icon": "rgba(244, 63, 94, 1)",
"--tag-red-bg-hover": "rgba(254, 205, 211, 1)",
"--tag-neutral-border": "rgba(228, 228, 231, 1)",
"--tag-neutral-icon": "rgba(161, 161, 170, 1)",
"--bg-switch-off-hover": "rgba(212, 212, 216, 1)",
"--border-menu-bot": "rgba(255, 255, 255, 1)",
"--border-menu-top": "rgba(228, 228, 231, 1)",
"--bg-subtle-hover": "rgba(244, 244, 245, 1)",
"--contrast-border-top": "rgba(9, 9, 11, 1)",
"--bg-overlay": "rgba(9, 9, 11, 0.4)",
"--contrast-fg-primary": "rgba(255, 255, 255, 0.88)",
"--bg-switch-off": "rgba(228, 228, 231, 1)",
"--contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
"--bg-field-component-hover": "rgba(250, 250, 250, 1)",
"--bg-base-pressed": "rgba(228, 228, 231, 1)",
"--tag-neutral-text": "rgba(82, 82, 91, 1)",
"--tag-red-text": "rgba(159, 18, 57, 1)",
"--tag-purple-icon": "rgba(139, 92, 246, 1)",
"--contrast-bg-base": "rgba(24, 24, 27, 1)",
"--fg-disabled": "rgba(212, 212, 216, 1)",
"--border-strong": "rgba(212, 212, 216, 1)",
"--contrast-border-base": "rgba(255, 255, 255, 0.15)",
"--bg-field": "rgba(250, 250, 250, 1)",
"--tag-blue-text": "rgba(30, 64, 175, 1)",
"--tag-orange-bg-hover": "rgba(253, 230, 138, 1)",
"--tag-purple-border": "rgba(221, 214, 254, 1)",
"--fg-base": "rgba(9, 9, 11, 1)",
"--button-inverted-pressed": "rgba(82, 82, 91, 1)",
"--border-interactive": "rgba(59, 130, 246, 1)",
"--bg-base-hover": "rgba(244, 244, 245, 1)",
"--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
"--bg-highlight": "rgba(239, 246, 255, 1)",
"--contrast-fg-secondary": "rgba(255, 255, 255, 0.56)",
"--fg-muted": "rgba(161, 161, 170, 1)",
"--tag-red-bg": "rgba(255, 228, 230, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--button-danger-pressed": "rgba(159, 18, 57, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--button-inverted-hover": "rgba(63, 63, 70, 1)",
"--bg-field-component": "rgba(255, 255, 255, 1)",
"--tag-orange-text": "rgba(154, 52, 18, 1)",
"--tag-green-icon": "rgba(16, 185, 129, 1)",
"--border-base": "rgba(228, 228, 231, 1)",
"--bg-base": "rgba(255, 255, 255, 1)",
"--tag-orange-border": "rgba(254, 215, 170, 1)",
"--tag-red-border": "rgba(254, 205, 211, 1)",
"--tag-green-border": "rgba(167, 243, 208, 1)",
"--tag-green-text": "rgba(6, 95, 70, 1)",
"--button-danger": "rgba(225, 29, 72, 1)",
"--button-danger-pressed": "rgba(159, 18, 57, 1)",
"--button-danger-hover": "rgba(190, 18, 60, 1)",
"--bg-interactive": "rgba(59, 130, 246, 1)",
"--bg-highlight-hover": "rgba(219, 234, 254, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--bg-overlay": "rgba(9, 9, 11, 0.4)",
"--tag-neutral-border": "rgba(228, 228, 231, 1)",
"--bg-switch-off": "rgba(228, 228, 231, 1)",
"--contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
"--tag-neutral-text": "rgba(82, 82, 91, 1)",
"--button-transparent-hover": "rgba(244, 244, 245, 1)",
"--contrast-bg-base": "rgba(24, 24, 27, 1)",
"--fg-disabled": "rgba(212, 212, 216, 1)",
"--bg-field": "rgba(250, 250, 250, 1)",
"--border-strong": "rgba(212, 212, 216, 1)",
"--bg-field-hover": "rgba(244, 244, 245, 1)",
"--fg-base": "rgba(9, 9, 11, 1)",
"--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
"--code-fg-subtle": "rgba(161, 161, 170, 1)",
"--tag-neutral-bg": "rgba(244, 244, 245, 1)",
"--button-transparent-pressed": "rgba(228, 228, 231, 1)",
"--tag-neutral-bg-hover": "rgba(228, 228, 231, 1)",
"--code-fg-muted": "rgba(113, 113, 122, 1)",
"--contrast-bg-highlight": "rgba(63, 63, 70, 1)",
"--tag-neutral-icon": "rgba(161, 161, 170, 1)",
"--border-base": "rgba(228, 228, 231, 1)",
"--code-bg-base": "rgba(24, 24, 27, 1)",
"--button-neutral": "rgba(255, 255, 255, 1)",
"--code-bg-subtle": "rgba(39, 39, 42, 1)",
"--tag-blue-border": "rgba(191, 219, 254, 1)",
"--fg-interactive-hover": "rgba(37, 99, 235, 1)",
"--tag-orange-icon": "rgba(249, 115, 22, 1)",
"--button-neutral-hover": "rgba(244, 244, 245, 1)",
"--contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
"--bg-switch-off-hover": "rgba(212, 212, 216, 1)",
"--code-fg-base": "rgba(250, 250, 250, 1)",
"--bg-disabled": "rgba(244, 244, 245, 1)",
"--code-border": "rgba(63, 63, 70, 1)",
"--fg-subtle": "rgba(82, 82, 91, 1)",
"--button-neutral-pressed": "rgba(228, 228, 231, 1)",
"--border-transparent": "rgba(255, 255, 255, 0)",
"--button-inverted": "rgba(39, 39, 42, 1)",
"--button-inverted-pressed": "rgba(82, 82, 91, 1)",
"--button-inverted-hover": "rgba(63, 63, 70, 1)",
"--bg-field-component": "rgba(255, 255, 255, 1)",
"--bg-field-component-hover": "rgba(250, 250, 250, 1)",
"--contrast-bg-alpha": "rgba(9, 9, 11, 0.8)",
"--contrast-fg-primary": "rgba(255, 255, 255, 0.88)",
"--contrast-fg-secondary": "rgba(255, 255, 255, 0.56)",
"--contrast-border-base": "rgba(255, 255, 255, 0.15)",
"--border-menu-bot": "rgba(255, 255, 255, 1)",
"--border-menu-top": "rgba(228, 228, 231, 1)",
"--bg-base-pressed": "rgba(228, 228, 231, 1)",
"--bg-base-hover": "rgba(244, 244, 245, 1)",
"--bg-base": "rgba(255, 255, 255, 1)",
"--fg-interactive": "rgba(59, 130, 246, 1)",
"--bg-component-pressed": "rgba(228, 228, 231, 1)",
"--tag-purple-bg": "rgba(237, 233, 254, 1)",
"--contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
"--bg-component": "rgba(250, 250, 250, 1)",
"--bg-subtle": "rgba(250, 250, 250, 1)",
"--tag-purple-text": "rgba(91, 33, 182, 1)",
"--contrast-border-bot": "rgba(255, 255, 255, 0.1)",
"--button-inverted": "rgba(39, 39, 42, 1)",
"--tag-red-icon": "rgba(244, 63, 94, 1)",
"--button-transparent-hover": "rgba(244, 244, 245, 1)",
"--button-neutral-pressed": "rgba(228, 228, 231, 1)",
"--tag-purple-icon": "rgba(167, 139, 250, 1)",
"--bg-field-hover": "rgba(244, 244, 245, 1)",
"--fg-on-inverted": "rgba(255, 255, 255, 1)",
"--bg-interactive": "rgba(59, 130, 246, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--button-transparent-pressed": "rgba(228, 228, 231, 1)",
"--tag-purple-border": "rgba(221, 214, 254, 1)",
"--bg-highlight-hover": "rgba(219, 234, 254, 1)",
"--border-error": "rgba(225, 29, 72, 1)",
"--button-danger": "rgba(225, 29, 72, 1)",
"--tag-blue-bg": "rgba(219, 234, 254, 1)",
"--border-transparent": "rgba(255, 255, 255, 0)",
"--button-danger-hover": "rgba(190, 18, 60, 1)",
"--bg-subtle-pressed": "rgba(228, 228, 231, 1)",
"--fg-error": "rgba(225, 29, 72, 1)",
"--bg-component-hover": "rgba(244, 244, 245, 1)",
"--bg-subtle-hover": "rgba(244, 244, 245, 1)"
"--bg-disabled": "rgba(244, 244, 245, 1)",
"--tag-blue-icon": "rgba(96, 165, 250, 1)",
"--fg-subtle": "rgba(82, 82, 91, 1)",
"--tag-orange-bg-hover": "rgba(254, 215, 170, 1)",
"--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
"--tag-red-bg-hover": "rgba(254, 205, 211, 1)",
"--tag-purple-bg-hover": "rgba(221, 214, 254, 1)",
"--tag-neutral-bg-hover": "rgba(228, 228, 231, 1)",
"--tag-blue-bg-hover": "rgba(191, 219, 254, 1)",
"--tag-green-bg": "rgba(209, 250, 229, 1)",
"--tag-neutral-bg": "rgba(244, 244, 245, 1)",
"--tag-orange-bg": "rgba(255, 237, 213, 1)"
}
}

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

@@ -6,13 +6,12 @@ export const effects = {
"--borders-interactive-with-active": "0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25)",
"--borders-focus": "0px 0px 0px 1px rgba(24, 24, 27, 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(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
"--details-code-block": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset",
"--details-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
"--elevation-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
"--details-switch-background-focus": "0px 0px 0px 1px rgba(24, 24, 27, 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.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
"--buttons-danger": "0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
"--buttons-neutral": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
"--buttons-danger-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
"--borders-base": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
"--borders-base": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
"--details-switch-background": "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.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
"--buttons-neutral-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
"--buttons-inverted-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
@@ -22,7 +21,8 @@ export const effects = {
"--elevation-modal": "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
"--elevation-card-hover": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
"--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.25)",
"--buttons-inverted": "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)"
"--buttons-inverted": "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
"--elevation-code-block": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset"
},
"light": {
"--borders-interactive-with-active": "0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.2)",
@@ -41,12 +41,12 @@ export const effects = {
"--borders-base": "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
"--elevation-card-rest": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
"--buttons-neutral-focus": "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
"--details-code-block": "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset",
"--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.75px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
"--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.75px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
"--elevation-flyout": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
"--elevation-tooltip": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
"--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.6) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
"--details-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.3) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)"
"--elevation-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.3) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
"--elevation-code-block": "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset"
}
}

1
packages/design-system/ui/package.json
View File

@@ -91,7 +91,6 @@
"@radix-ui/react-popover": "1.1.1",
"@radix-ui/react-portal": "1.1.1",
"@radix-ui/react-radio-group": "1.2.0",
"@radix-ui/react-scroll-area": "1.1.0",
"@radix-ui/react-select": "2.1.1",
"@radix-ui/react-slot": "1.1.0",
"@radix-ui/react-switch": "1.1.0",

28
yarn.lock
View File

@@ -5230,7 +5230,6 @@ __metadata:
"@radix-ui/react-popover": 1.1.1
"@radix-ui/react-portal": 1.1.1
"@radix-ui/react-radio-group": 1.2.0
"@radix-ui/react-scroll-area": 1.1.0
"@radix-ui/react-select": 2.1.1
"@radix-ui/react-slot": 1.1.0
"@radix-ui/react-switch": 1.1.0
@@ -6913,33 +6912,6 @@ __metadata:
languageName: node
linkType: hard
"@radix-ui/react-scroll-area@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-scroll-area@npm:1.1.0"
dependencies:
"@radix-ui/number": 1.1.0
"@radix-ui/primitive": 1.1.0
"@radix-ui/react-compose-refs": 1.1.0
"@radix-ui/react-context": 1.1.0
"@radix-ui/react-direction": 1.1.0
"@radix-ui/react-presence": 1.1.0
"@radix-ui/react-primitive": 2.0.0
"@radix-ui/react-use-callback-ref": 1.1.0
"@radix-ui/react-use-layout-effect": 1.1.0
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 46063b17f06bd2fe20ceaceb2fb0c1cd1b2767045d6d721904bc3f5d6726704a77eaf63997a514ca8f43d973da0c6446d7ca04057d9983cb0d46f4be8c01c9f5
languageName: node
linkType: hard
"@radix-ui/react-select@npm:2.1.1":
version: 2.1.1
resolution: "@radix-ui/react-select@npm:2.1.1"