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

chore(ui-preset,icons,toolbox): Update dark mode theme (#8168)

Browse Source 
* run scripts

* chore(ui-preset,icons): Update dark mode theme

* fix nameing of icon
This commit is contained in:
Kasper Fabricius Kristensen
2024-07-18 08:56:35 +02:00
committed by GitHub
parent 8ef4483afb
commit 2e3d444c9b
48 changed files with 1124 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/design-system/icons/src/components/__tests__/ai-assistent.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import AiAssistent from "../ai-assistent"
describe("AiAssistent", () => {
it("should render the icon without errors", async () => {
render(<AiAssistent data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/book.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import Book from "../book"
describe("Book", () => {
it("should render the icon without errors", async () => {
render(<Book data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/bookmarks.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import Bookmarks from "../bookmarks"
describe("Bookmarks", () => {
it("should render the icon without errors", async () => {
render(<Bookmarks data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

23
packages/design-system/icons/src/components/__tests__/check-circle.spec.tsx
View File

@@ -1,16 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import CheckCircle from "../check-circle"
import CheckCircle from "../check-circle"
describe("CheckCircle", () => {
it("should render the icon without errors", async () => {
render(<CheckCircle data-testid="icon" />)
describe("CheckCircle", () => {
it("should render the icon without errors", async () => {
render(<CheckCircle data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
const svgElement = screen.getByTestId("icon")
cleanup()
})
})
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/circle-arrow-up.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import CircleArrowUp from "../circle-arrow-up"
describe("CircleArrowUp", () => {
it("should render the icon without errors", async () => {
render(<CircleArrowUp data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/glasses.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import Glasses from "../glasses"
describe("Glasses", () => {
it("should render the icon without errors", async () => {
render(<Glasses data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/grid-list.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import GridList from "../grid-list"
describe("GridList", () => {
it("should render the icon without errors", async () => {
render(<GridList data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/history.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import History from "../history"
describe("History", () => {
it("should render the icon without errors", async () => {
render(<History data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/magnifier-alert.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import MagnifierAlert from "../magnifier-alert"
describe("MagnifierAlert", () => {
it("should render the icon without errors", async () => {
render(<MagnifierAlert data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/pen-plus.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import PenPlus from "../pen-plus"
describe("PenPlus", () => {
it("should render the icon without errors", async () => {
render(<PenPlus data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/shopping.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import Shopping from "../shopping"
describe("Shopping", () => {
it("should render the icon without errors", async () => {
render(<Shopping data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/stack-perspective.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import StackPerspective from "../stack-perspective"
describe("StackPerspective", () => {
it("should render the icon without errors", async () => {
render(<StackPerspective data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/trophy.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import Trophy from "../trophy"
describe("Trophy", () => {
it("should render the icon without errors", async () => {
render(<Trophy data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/truck-fast.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import TruckFast from "../truck-fast"
describe("TruckFast", () => {
it("should render the icon without errors", async () => {
render(<TruckFast data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

2
packages/design-system/icons/src/components/adjustments-done.tsx
View File

@@ -16,7 +16,7 @@ const AdjustmentsDone = React.forwardRef<SVGSVGElement, IconProps>(
fill={color}
d="M8.5 2.528h-.778a.75.75 0 1 0 0 1.5h1.08a4 4 0 0 1-.302-1.5M10.695 6.07a4 4 0 0 1-1.21-.94.75.75 0 0 0-.29.592V6.75H1.5a.75.75 0 0 0 0 1.5h7.694v1.028a.75.75 0 0 0 1.5 0zM5.806 1.5a.75.75 0 1 0-1.5 0v1.028H1.5a.75.75 0 0 0 0 1.5h2.806v1.028a.75.75 0 0 0 1.5 0V1.5M12.611 6.75a.75.75 0 0 0 0 1.5h.889a.75.75 0 0 0 0-1.5zM6.972 11.722a.75.75 0 0 1 .75-.75H13.5a.75.75 0 1 1 0 1.5H7.722a.75.75 0 0 1-.75-.75M1.5 10.972a.75.75 0 0 0 0 1.5h2.806V13.5a.75.75 0 0 0 1.5 0V9.944a.75.75 0 1 0-1.5 0v1.028z"
/>
<circle cx={12.5} cy={2.5} r={2.5} fill="#3B82F6" />
<circle cx={12.5} cy={2.5} r={2.5} fill="#60A5FA" />
<circle
cx={12.5}
cy={2.5}

385
packages/design-system/icons/src/components/ai-assistent.tsx Normal file
View File

@@ -0,0 +1,385 @@
import * as React from "react"
import type { IconProps } from "../types"
const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={19}
height={19}
fill="none"
ref={ref}
{...props}
>
<g filter="url(#a)">
<circle cx={9.5} cy={8.457} r={7.414} fill="url(#b)" />
<circle cx={9.5} cy={8.457} r={7.414} fill="url(#c)" />
</g>
<g
filter="url(#d)"
opacity={0.8}
style={{
mixBlendMode: "plus-lighter",
}}
>
<circle cx={9.5} cy={5.85} r={4.171} fill="url(#e)" />
<circle
cx={9.5}
cy={5.85}
r={4.071}
stroke="url(#f)"
strokeWidth={0.2}
/>
</g>
<g
filter="url(#g)"
opacity={0.8}
style={{
mixBlendMode: "plus-lighter",
}}
>
<circle cx={12.107} cy={9.5} r={4.171} fill="url(#h)" />
<circle
cx={12.107}
cy={9.5}
r={4.071}
stroke="url(#i)"
strokeWidth={0.2}
/>
</g>
<g
filter="url(#j)"
opacity={0.8}
style={{
mixBlendMode: "plus-lighter",
}}
transform="matrix(-1.0428 0 0 1.0428 11.064 3.243)"
>
<circle cx={4} cy={4} r={4} fill="url(#k)" />
<circle cx={4} cy={4} r={3.9} stroke="url(#l)" strokeWidth={0.2} />
</g>
<g
filter="url(#m)"
opacity={0.8}
style={{
mixBlendMode: "plus-lighter",
}}
transform="scale(1.0428 -1.0428)rotate(90 12.61 .5)"
>
<circle cx={4} cy={4} r={4} fill="url(#n)" />
<circle cx={4} cy={4} r={3.9} stroke="url(#o)" strokeWidth={0.2} />
</g>
<g
filter="url(#p)"
opacity={0.8}
style={{
mixBlendMode: "plus-lighter",
}}
transform="matrix(-1.0428 0 0 1.0428 13.67 6.893)"
>
<circle cx={4} cy={4} r={4} fill="url(#q)" />
<circle cx={4} cy={4} r={3.9} stroke="url(#r)" strokeWidth={0.2} />
</g>
<defs>
<linearGradient
id="b"
x1={9.589}
x2={9.589}
y1={1.087}
y2={15.916}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.2} stopColor="#C686FF" />
<stop offset={0.8} stopColor="#8D99FF" />
</linearGradient>
<linearGradient
id="c"
x1={5.017}
x2={13.721}
y1={8.468}
y2={11.691}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF6778" stopOpacity={0.8} />
<stop offset={1} stopColor="#fff" stopOpacity={0.1} />
</linearGradient>
<linearGradient
id="e"
x1={9.728}
x2={13.899}
y1={5.922}
y2={5.922}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8D99FF" stopOpacity={0.1} />
<stop offset={1} stopColor="#fff" stopOpacity={0.3} />
</linearGradient>
<linearGradient
id="f"
x1={13.899}
x2={9.728}
y1={5.922}
y2={5.922}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#fff" />
<stop offset={1} stopColor="#fff" stopOpacity={0} />
</linearGradient>
<linearGradient
id="h"
x1={12.446}
x2={16.618}
y1={9.728}
y2={9.728}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8D99FF" stopOpacity={0.1} />
<stop offset={1} stopColor="#fff" stopOpacity={0.3} />
</linearGradient>
<linearGradient
id="i"
x1={16.618}
x2={12.446}
y1={9.728}
y2={9.728}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8D99FF" />
<stop offset={1} stopColor="#8D99FF" stopOpacity={0} />
</linearGradient>
<linearGradient
id="k"
x1={4}
x2={8}
y1={4}
y2={4}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8D99FF" stopOpacity={0.1} />
<stop offset={1} stopColor="#fff" stopOpacity={0.3} />
</linearGradient>
<linearGradient
id="l"
x1={8}
x2={4}
y1={4}
y2={4}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8D99FF" />
<stop offset={1} stopColor="#8D99FF" stopOpacity={0} />
</linearGradient>
<linearGradient
id="n"
x1={4}
x2={8}
y1={4}
y2={4}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8D99FF" stopOpacity={0.1} />
<stop offset={1} stopColor="#fff" stopOpacity={0.3} />
</linearGradient>
<linearGradient
id="o"
x1={8}
x2={4}
y1={4}
y2={4}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8D99FF" />
<stop offset={1} stopColor="#8D99FF" stopOpacity={0} />
</linearGradient>
<linearGradient
id="q"
x1={4}
x2={8}
y1={4}
y2={4}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8D99FF" stopOpacity={0.1} />
<stop offset={1} stopColor="#fff" stopOpacity={0.3} />
</linearGradient>
<linearGradient
id="r"
x1={8}
x2={4}
y1={4}
y2={4}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#fff" />
<stop offset={1} stopColor="#fff" stopOpacity={0} />
</linearGradient>
<filter
id="a"
width={19}
height={19}
x={0}
y={0}
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset dy={1} />
<feGaussianBlur stdDeviation={1} />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
<feBlend
in2="BackgroundImageFix"
result="effect1_dropShadow_7446_46535"
/>
<feBlend
in="SourceGraphic"
in2="effect1_dropShadow_7446_46535"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset dx={-0.25} dy={-0.25} />
<feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
<feBlend in2="shape" result="effect2_innerShadow_7446_46535" />
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset dx={0.25} dy={0.25} />
<feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0" />
<feBlend
in2="effect2_innerShadow_7446_46535"
result="effect3_innerShadow_7446_46535"
/>
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset dx={1} dy={1} />
<feGaussianBlur stdDeviation={1} />
<feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0" />
<feBlend
in2="effect3_innerShadow_7446_46535"
result="effect4_innerShadow_7446_46535"
/>
</filter>
<filter
id="d"
width={9.385}
height={9.385}
x={4.807}
y={1.158}
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_7446_46535"
stdDeviation={0.25}
/>
</filter>
<filter
id="g"
width={9.385}
height={9.385}
x={7.414}
y={4.807}
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_7446_46535"
stdDeviation={0.25}
/>
</filter>
<filter
id="j"
width={9.385}
height={9.385}
x={2.2}
y={2.722}
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_7446_46535"
stdDeviation={0.25}
/>
</filter>
<filter
id="m"
width={9.385}
height={9.385}
x={4.807}
y={3.765}
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_7446_46535"
stdDeviation={0.25}
/>
</filter>
<filter
id="p"
width={9.385}
height={9.385}
x={4.807}
y={6.372}
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_7446_46535"
stdDeviation={0.25}
/>
</filter>
</defs>
</svg>
)
}
)
AiAssistent.displayName = "AiAssistent"
export default AiAssistent

19
packages/design-system/icons/src/components/arrow-down-circle.tsx
View File

@@ -11,21 +11,10 @@ const ArrowDownCircle = React.forwardRef<SVGSVGElement, IconProps>(
ref={ref}
{...props}
>
<g
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
clipPath="url(#a)"
>
<path d="M9.722 8.167 7.5 10.389 5.278 8.167M7.5 10.389V4.61" />
<path d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h15v15H0z" />
</clipPath>
</defs>
<path
fill={color}
d="M7.5.389C3.58.389.389 3.579.389 7.5s3.19 7.111 7.111 7.111 7.111-3.19 7.111-7.111S11.421.389 7.5.389m2.693 8.249L7.971 10.86a.665.665 0 0 1-.942 0L4.807 8.638a.667.667 0 1 1 .943-.943l1.084 1.084V4.611a.667.667 0 0 1 1.334 0V8.78l1.084-1.084a.667.667 0 1 1 .943.943z"
/>
</svg>
)
}

6
packages/design-system/icons/src/components/arrow-path-mini.tsx
View File

@@ -18,9 +18,9 @@ const ArrowPathMini = React.forwardRef<SVGSVGElement, IconProps>(
strokeWidth={1.5}
clipPath="url(#a)"
>
<path d="M13.944 7.5A6.444 6.444 0 0 1 1.536 9.944" />
<path d="m1.171 12.562.363-2.618 2.617.362M1.056 7.5a6.445 6.445 0 0 1 12.409-2.444" />
<path d="m13.829 2.438-.363 2.618-2.617-.362" />
<path d="M4.752 9.616 1.935 8.86l-.755 2.817" />
<path d="M13.136 8.53a5.729 5.729 0 0 1-11.196.357M10.248 5.384l2.817.755.755-2.817" />
<path d="M1.864 6.469a5.729 5.729 0 0 1 11.184-.403" />
</g>
<defs>
<clipPath id="a">

6
packages/design-system/icons/src/components/arrow-path.tsx
View File

@@ -18,9 +18,9 @@ const ArrowPath = React.forwardRef<SVGSVGElement, IconProps>(
strokeWidth={1.5}
clipPath="url(#a)"
>
<path d="M13.944 7.5A6.444 6.444 0 0 1 1.536 9.944" />
<path d="m1.171 12.562.363-2.618 2.617.362M1.056 7.5a6.445 6.445 0 0 1 12.408-2.444" />
<path d="m13.829 2.438-.363 2.618-2.617-.362" />
<path d="M4.752 9.616 1.935 8.86l-.755 2.817" />
<path d="M13.136 8.53a5.729 5.729 0 0 1-11.196.357M10.248 5.384l2.817.755.755-2.817" />
<path d="M1.864 6.469a5.729 5.729 0 0 1 11.184-.403" />
</g>
<defs>
<clipPath id="a">

33
packages/design-system/icons/src/components/book.tsx Normal file
View File

@@ -0,0 +1,33 @@
import * as React from "react"
import type { IconProps } from "../types"
const Book = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M4.611 1.056v9.777M1.944 12.389V2.833c0-.982.796-1.777 1.778-1.777h9.334v9.777"
/>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M4.167 13.945H3.5a1.556 1.556 0 1 1 0-3.111h9.556c-.57.75-.653 2.264 0 3.11zM7.278 4.167h3.11M7.278 6.834h3.11"
/>
</svg>
)
}
)
Book.displayName = "Book"
export default Book

33
packages/design-system/icons/src/components/bookmarks.tsx Normal file
View File

@@ -0,0 +1,33 @@
import * as React from "react"
import type { IconProps } from "../types"
const Bookmarks = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="m10.389 13.944-4.222-3.11-4.223 3.11V5.5c0-.982.796-1.778 1.778-1.778h4.89c.981 0 1.777.796 1.777 1.778z"
/>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M5.528 1.278c.255-.141.548-.222.86-.222h4.89c.982 0 1.778.795 1.778 1.777v8.445"
/>
</svg>
)
}
)
Bookmarks.displayName = "Bookmarks"
export default Bookmarks

24
packages/design-system/icons/src/components/check-circle.tsx
View File

@@ -4,26 +4,26 @@ const CheckCircle = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
width="16"
height="15"
viewBox="0 0 16 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
d="M8.41666 13.9446C11.9758 13.9446 14.8611 11.0593 14.8611 7.50011C14.8611 3.94094 11.9758 1.05566 8.41666 1.05566C4.85749 1.05566 1.97221 3.94094 1.97221 7.50011C1.97221 11.0593 4.85749 13.9446 8.41666 13.9446Z"
stroke={color}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89"
/>
<path
d="M5.52777 7.72233L7.52777 9.94455L11.3055 5.05566"
stroke={color}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="m4.611 7.722 2 2.223 3.778-4.89"
/>
</svg>
)

13
packages/design-system/icons/src/components/chevron-double-right-mini-solid.tsx
View File

@@ -11,20 +11,13 @@ const ChevronDoubleRightMiniSolid = React.forwardRef<SVGSVGElement, IconProps>(
ref={ref}
{...props}
>
<g
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
clipPath="url(#a)"
>
<path d="M8.167 3.722 11.944 7.5l-3.777 3.778M3.944 3.722 7.722 7.5l-3.778 3.778" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h15v15H0z" />
</clipPath>
</defs>
d="M8.167 3.722 11.944 7.5l-3.777 3.778M3.944 3.722 7.722 7.5l-3.778 3.778"
/>
</svg>
)
}

33
packages/design-system/icons/src/components/circle-arrow-up.tsx Normal file
View File

@@ -0,0 +1,33 @@
import * as React from "react"
import type { IconProps } from "../types"
const CircleArrowUp = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M5.278 6.834 7.5 4.61l2.222 2.223M7.5 4.611v5.778"
/>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89"
/>
</svg>
)
}
)
CircleArrowUp.displayName = "CircleArrowUp"
export default CircleArrowUp

2
packages/design-system/icons/src/components/ellipse-blue-solid.tsx
View File

@@ -13,7 +13,7 @@ const EllipseBlueSolid = React.forwardRef<SVGSVGElement, IconProps>(
>
<g clipPath="url(#a)" filter="url(#b)">
<rect width={10} height={10} x={2.5} y={2.5} fill="#fff" rx={5} />
<circle cx={7.5} cy={7.5} r={3} fill="#3B82F6" />
<circle cx={7.5} cy={7.5} r={3} fill="#60A5FA" />
</g>
<defs>
<clipPath id="a">

2
packages/design-system/icons/src/components/ellipse-purple-solid.tsx
View File

@@ -13,7 +13,7 @@ const EllipsePurpleSolid = React.forwardRef<SVGSVGElement, IconProps>(
>
<g clipPath="url(#a)" filter="url(#b)">
<rect width={10} height={10} x={2.5} y={2.5} fill="#fff" rx={5} />
<circle cx={7.5} cy={7.5} r={3} fill="#8B5CF6" />
<circle cx={7.5} cy={7.5} r={3} fill="#A78BFA" />
</g>
<defs>
<clipPath id="a">

13
packages/design-system/icons/src/components/eye-slash.tsx
View File

@@ -11,15 +11,10 @@ const EyeSlash = React.forwardRef<SVGSVGElement, IconProps>(
ref={ref}
{...props}
>
<g
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
clipPath="url(#a)"
>
<path d="M12.778 5.364c.357.4.645.792.866 1.129.4.607.4 1.406 0 2.013-.905 1.372-2.9 3.66-6.144 3.66q-.732-.002-1.38-.143M3.905 11.095C2.7 10.316 1.86 9.27 1.356 8.506c-.4-.607-.4-1.406 0-2.013.905-1.372 2.9-3.66 6.144-3.66 1.44 0 2.634.45 3.595 1.071" />
<path d="M9.792 8.35A2.45 2.45 0 0 1 8.35 9.792M5.771 9.229A2.444 2.444 0 1 1 9.23 5.77M1.278 13.722 13.722 1.278" />
<g fill={color} clipPath="url(#a)">
<path d="M7.5 10.389a2.889 2.889 0 1 0 0-5.778 2.889 2.889 0 0 0 0 5.778" />
<path d="M7.5 12.833a7.3 7.3 0 0 1-1.52-.159.667.667 0 0 1 .28-1.304c.4.087.817.13 1.24.13 2.934 0 4.76-2.106 5.587-3.36a1.18 1.18 0 0 0 0-1.28 9 9 0 0 0-.808-1.052.667.667 0 1 1 .997-.887c.333.375.644.78.924 1.206.55.833.55 1.912 0 2.746-.975 1.48-3.142 3.96-6.7 3.96M3.904 11.761a.66.66 0 0 1-.36-.106C2.234 10.809 1.328 9.675.8 8.873a2.49 2.49 0 0 1 0-2.746c.975-1.48 3.142-3.96 6.7-3.96 1.415 0 2.747.396 3.957 1.178a.666.666 0 1 1-.723 1.12A5.87 5.87 0 0 0 7.5 3.501c-2.934 0-4.76 2.106-5.588 3.36a1.18 1.18 0 0 0 0 1.28c.459.694 1.24 1.674 2.354 2.395a.667.667 0 0 1-.362 1.226" />
<path d="M1.278 14.389a.667.667 0 0 1-.471-1.139L13.25.807a.667.667 0 1 1 .943.943L1.75 14.193c-.13.13-.3.196-.471.196" />
</g>
<defs>
<clipPath id="a">

12
packages/design-system/icons/src/components/eye.tsx
View File

@@ -11,15 +11,9 @@ const Eye = React.forwardRef<SVGSVGElement, IconProps>(
ref={ref}
{...props}
>
<g
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
clipPath="url(#a)"
>
<path d="M1.356 8.506c-.4-.607-.4-1.406 0-2.013.905-1.372 2.9-3.66 6.144-3.66s5.24 2.287 6.144 3.66c.4.607.4 1.406 0 2.013-.905 1.372-2.9 3.66-6.144 3.66S2.26 9.88 1.356 8.507" />
<path d="M7.5 9.944a2.444 2.444 0 1 0 0-4.888 2.444 2.444 0 0 0 0 4.888" />
<g fill={color} clipPath="url(#a)">
<path d="M7.5 12.833c-3.558 0-5.725-2.48-6.7-3.96a2.49 2.49 0 0 1 0-2.747c.975-1.48 3.142-3.96 6.7-3.96s5.725 2.48 6.7 3.96a2.49 2.49 0 0 1 0 2.746c-.975 1.48-3.142 3.961-6.7 3.961m0-9.333c-2.934 0-4.76 2.106-5.588 3.36a1.18 1.18 0 0 0 0 1.28C2.74 9.393 4.566 11.5 7.5 11.5s4.76-2.106 5.588-3.36a1.18 1.18 0 0 0 0-1.28C12.26 5.607 10.434 3.5 7.5 3.5" />
<path d="M7.5 10.389a2.889 2.889 0 1 0 0-5.778 2.889 2.889 0 0 0 0 5.778" />
</g>
<defs>
<clipPath id="a">

21
packages/design-system/icons/src/components/flying-box.tsx
View File

@@ -11,21 +11,20 @@ const FlyingBox = React.forwardRef<SVGSVGElement, IconProps>(
ref={ref}
{...props}
>
<g
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
clipPath="url(#a)"
>
<path d="M1.78 4.232h-.615M2.394 2.388H1.165M10.71 12.612H2.105M10.93 2.388l-.606 2.02a.615.615 0 0 1-.59.44H7.823a.615.615 0 0 1-.589-.792l.5-1.668M5.313 8.157H6.62" />
<path d="M11.03 10.248H4.522c-.989 0-1.697-1.015-1.413-2.024l1.327-4.716c.188-.664.762-1.12 1.414-1.12h6.508c.989 0 1.697 1.016 1.414 2.024l-1.328 4.716c-.188.665-.762 1.12-1.414 1.12" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h15v15H0z" />
</clipPath>
</defs>
d="M7.5 1.5v5.333M11.278 4.167H3.722c-.982 0-1.778.796-1.778 1.778v5.333c0 .982.796 1.778 1.778 1.778h7.556c.982 0 1.778-.796 1.778-1.778V5.945c0-.982-.796-1.778-1.778-1.778"
/>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="m2.167 5.086 1.288-2.598c.3-.605.917-.988 1.593-.988h4.904c.676 0 1.293.383 1.593.988l1.288 2.599M4.167 10.833h1.777"
/>
</svg>
)
}

33
packages/design-system/icons/src/components/glasses.tsx Normal file
View File

@@ -0,0 +1,33 @@
import * as React from "react"
import type { IconProps } from "../types"
const Glasses = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M6.389 9.5a1.112 1.112 0 0 1 2.222 0M1.134 8.857l1.01-5.492A1.778 1.778 0 0 1 4.68 2.133M13.866 8.857l-1.01-5.492a1.778 1.778 0 0 0-2.536-1.232"
/>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M3.722 12.167a2.667 2.667 0 1 0 0-5.334 2.667 2.667 0 0 0 0 5.334M11.278 12.167a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333"
/>
</svg>
)
}
)
Glasses.displayName = "Glasses"
export default Glasses

26
packages/design-system/icons/src/components/grid-list.tsx Normal file
View File

@@ -0,0 +1,26 @@
import * as React from "react"
import type { IconProps } from "../types"
const GridList = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M8.611 2.834h4.445M8.611 5.5h4.445M8.611 9.5h4.445M8.611 12.167h4.445M5.056 1.944H2.833a.89.89 0 0 0-.889.89v2.221c0 .491.398.89.89.89h2.222c.49 0 .888-.399.888-.89V2.833a.89.89 0 0 0-.888-.889M5.056 9.056H2.833a.89.89 0 0 0-.889.889v2.222c0 .49.398.889.89.889h2.222c.49 0 .888-.398.888-.89V9.946a.89.89 0 0 0-.888-.89"
/>
</svg>
)
}
)
GridList.displayName = "GridList"
export default GridList

33
packages/design-system/icons/src/components/history.tsx Normal file
View File

@@ -0,0 +1,33 @@
import * as React from "react"
import type { IconProps } from "../types"
const History = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M1.056 7.5a6.445 6.445 0 1 0 .48-2.444"
/>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="m1.171 2.438.363 2.618 2.617-.362M7.5 3.722V7.5l2.889 2"
/>
</svg>
)
}
)
History.displayName = "History"
export default History

13
packages/design-system/icons/src/components/index.ts
View File

@@ -3,6 +3,7 @@ export { default as AcademicCapSolid } from "./academic-cap-solid"
export { default as AcademicCap } from "./academic-cap"
export { default as AdjustmentsDone } from "./adjustments-done"
export { default as Adjustments } from "./adjustments"
export { default as AiAssistent } from "./ai-assistent"
export { default as Apple } from "./apple"
export { default as ArchiveBox } from "./archive-box"
export { default as ArrowDownCircle } from "./arrow-down-circle"
@@ -43,6 +44,8 @@ export { default as BellAlert } from "./bell-alert"
export { default as BoltSolid } from "./bolt-solid"
export { default as Bolt } from "./bolt"
export { default as BookOpen } from "./book-open"
export { default as Book } from "./book"
export { default as Bookmarks } from "./bookmarks"
export { default as BottomToTop } from "./bottom-to-top"
export { default as BugAntSolid } from "./bug-ant-solid"
export { default as Bug } from "./bug"
@@ -81,6 +84,7 @@ export { default as ChevronRightMini } from "./chevron-right-mini"
export { default as ChevronRight } from "./chevron-right"
export { default as ChevronUpDown } from "./chevron-up-down"
export { default as ChevronUpMini } from "./chevron-up-mini"
export { default as CircleArrowUp } from "./circle-arrow-up"
export { default as CircleDottedLine } from "./circle-dotted-line"
export { default as CircleFilledSolid } from "./circle-filled-solid"
export { default as CircleHalfSolid } from "./circle-half-solid"
@@ -151,11 +155,14 @@ export { default as Gatsby } from "./gatsby"
export { default as GiftSolid } from "./gift-solid"
export { default as Gift } from "./gift"
export { default as Github } from "./github"
export { default as Glasses } from "./glasses"
export { default as GlobeEuropeSolid } from "./globe-europe-solid"
export { default as GlobeEurope } from "./globe-europe"
export { default as Google } from "./google"
export { default as GridList } from "./grid-list"
export { default as Hashtag } from "./hashtag"
export { default as Heart } from "./heart"
export { default as History } from "./history"
export { default as InboxSolid } from "./inbox-solid"
export { default as InformationCircleSolid } from "./information-circle-solid"
export { default as InformationCircle } from "./information-circle"
@@ -179,6 +186,7 @@ export { default as Loader } from "./loader"
export { default as LockClosedSolidMini } from "./lock-closed-solid-mini"
export { default as LockClosedSolid } from "./lock-closed-solid"
export { default as LockOpenSolid } from "./lock-open-solid"
export { default as MagnifierAlert } from "./magnifier-alert"
export { default as MagnifyingGlassMini } from "./magnifying-glass-mini"
export { default as MagnifyingGlass } from "./magnifying-glass"
export { default as MapPin } from "./map-pin"
@@ -195,6 +203,7 @@ export { default as NextJs } from "./next-js"
export { default as OpenRectArrowOut } from "./open-rect-arrow-out"
export { default as PaperClip } from "./paper-clip"
export { default as PauseSolid } from "./pause-solid"
export { default as PenPlus } from "./pen-plus"
export { default as PencilSquareSolid } from "./pencil-square-solid"
export { default as PencilSquare } from "./pencil-square"
export { default as Pencil } from "./pencil"
@@ -228,6 +237,7 @@ export { default as Share } from "./share"
export { default as ShoppingBag } from "./shopping-bag"
export { default as ShoppingCartSolid } from "./shopping-cart-solid"
export { default as ShoppingCart } from "./shopping-cart"
export { default as Shopping } from "./shopping"
export { default as SidebarLeft } from "./sidebar-left"
export { default as SidebarRight } from "./sidebar-right"
export { default as Slack } from "./slack"
@@ -248,6 +258,7 @@ export { default as SquareTwoStackSolid } from "./square-two-stack-solid"
export { default as SquareTwoStack } from "./square-two-stack"
export { default as SquaresPlusSolid } from "./squares-plus-solid"
export { default as SquaresPlus } from "./squares-plus"
export { default as StackPerspective } from "./stack-perspective"
export { default as StarSolid } from "./star-solid"
export { default as Star } from "./star"
export { default as Stopwatch } from "./stopwatch"
@@ -274,6 +285,8 @@ export { default as TriangleRightMiniHover } from "./triangle-right-mini-hover"
export { default as TriangleRightMini } from "./triangle-right-mini"
export { default as TriangleUpMini } from "./triangle-up-mini"
export { default as TrianglesMini } from "./triangles-mini"
export { default as Trophy } from "./trophy"
export { default as TruckFast } from "./truck-fast"
export { default as TypescriptEx } from "./typescript-ex"
export { default as Typescript } from "./typescript"
export { default as UserGroup } from "./user-group"

20
packages/design-system/icons/src/components/link.tsx
View File

@@ -11,20 +11,20 @@ const Link = React.forwardRef<SVGSVGElement, IconProps>(
ref={ref}
{...props}
>
<path
<g
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7.056 5.568c-.313.15-.607.354-.865.614l-.01.009a3.14 3.14 0 0 0 0 4.444l1.934 1.933a3.14 3.14 0 0 0 4.445 0l.008-.008a3.14 3.14 0 0 0 0-4.445l-.827-.828"
/>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7.944 9.432c.313-.15.607-.354.865-.614l.01-.009a3.14 3.14 0 0 0 0-4.444L6.884 2.432a3.14 3.14 0 0 0-4.445 0l-.008.009a3.14 3.14 0 0 0 0 4.444l.827.828"
/>
clipPath="url(#a)"
>
<path d="m6.44 3.965 1.59-1.591a3.25 3.25 0 1 1 4.597 4.596l-1.591 1.59M3.964 6.44l-1.59 1.59a3.25 3.25 0 1 0 4.596 4.597l1.59-1.591M5.909 9.09 9.091 5.91" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h15v15H0z" />
</clipPath>
</defs>
</svg>
)
}

25
packages/design-system/icons/src/components/magnifier-alert.tsx Normal file
View File

@@ -0,0 +1,25 @@
import * as React from "react"
import type { IconProps } from "../types"
const MagnifierAlert = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
fill="#212121"
fillRule="evenodd"
d="M11.551.951a1.64 1.64 0 0 0-2.769 0L6.175 5.068c-.692 1.092.094 2.515 1.385 2.515h.384a.75.75 0 0 0 0-1.5H7.56a.139.139 0 0 1-.118-.213l2.607-4.116a.14.14 0 0 1 .235 0l2.607 4.116a.139.139 0 0 1-.117.213h-.385a.75.75 0 0 0 0 1.5h.385c1.29 0 2.076-1.423 1.384-2.515zm-6.05 2.633a3.695 3.695 0 1 0 3.14 5.64.75.75 0 0 1 1.275.791 5 5 0 0 1-.25.367l3.031 3.032a.75.75 0 1 1-1.06 1.06l-3.033-3.031A5.195 5.195 0 1 1 5.758 2.09a.75.75 0 1 1-.072 1.498 4 4 0 0 0-.186-.005m4.666-.612a.75.75 0 0 1 .75.75V5.5a.75.75 0 1 1-1.5 0V3.722a.75.75 0 0 1 .75-.75M11 7.806a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0"
clipRule="evenodd"
/>
</svg>
)
}
)
MagnifierAlert.displayName = "MagnifierAlert"
export default MagnifierAlert

11
packages/design-system/icons/src/components/map-pin.tsx
View File

@@ -16,13 +16,14 @@ const MapPin = React.forwardRef<SVGSVGElement, IconProps>(
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M12.637 5.959c0 2.33-3.047 6.073-4.448 7.672a.914.914 0 0 1-1.379 0c-1.4-1.598-4.448-5.34-4.448-7.672.001-3.103 2.655-4.903 5.138-4.903s5.137 1.8 5.137 4.903"
d="M11.437 4.814c0 2.319-3.937 6.464-3.937 6.464S3.563 7.134 3.563 4.814c0-2.378 2.035-3.758 3.937-3.758s3.937 1.38 3.937 3.758"
/>
<path
fill={color}
fillRule="evenodd"
d="M7.5 5.361a.806.806 0 1 0 0 1.611.806.806 0 0 0 0-1.61m-2.306.806a2.306 2.306 0 1 1 4.612 0 2.306 2.306 0 0 1-4.612 0"
clipRule="evenodd"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7.5 6.167a1.333 1.333 0 1 0 0-2.667 1.333 1.333 0 0 0 0 2.667M13.056 13.945H1.944"
/>
</svg>
)

2
packages/design-system/icons/src/components/medusa.tsx
View File

@@ -12,7 +12,7 @@ const Medusa = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
{...props}
>
<path
fill="#09090B"
fill="#18181B"
d="M12.184 2.941 9.127 1.183a3.22 3.22 0 0 0-3.226 0L2.83 2.94a3.25 3.25 0 0 0-1.606 2.786V9.26c0 1.153.62 2.209 1.606 2.786l3.057 1.772c1 .577 2.226.577 3.226 0l3.057-1.772a3.2 3.2 0 0 0 1.606-2.786V5.727c.028-1.14-.592-2.209-1.592-2.786m-4.677 7.697A3.14 3.14 0 0 1 4.365 7.5a3.14 3.14 0 0 1 3.142-3.138c1.733 0 3.155 1.407 3.155 3.138a3.145 3.145 0 0 1-3.155 3.138"
/>
</svg>

26
packages/design-system/icons/src/components/pen-plus.tsx Normal file
View File

@@ -0,0 +1,26 @@
import * as React from "react"
import type { IconProps } from "../types"
const PenPlus = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M2.389 13.5s3.199-.505 4.04-1.347c.843-.841 6.514-6.513 6.514-6.513a1.904 1.904 0 1 0-2.694-2.693L3.736 9.46c-.841.842-1.346 4.04-1.346 4.04zM3.278 1.056V5.5M5.5 3.278H1.056"
/>
</svg>
)
}
)
PenPlus.displayName = "PenPlus"
export default PenPlus

35
packages/design-system/icons/src/components/shopping.tsx Normal file
View File

@@ -0,0 +1,35 @@
import * as React from "react"
import type { IconProps } from "../types"
const Shopping = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<g
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
clipPath="url(#a)"
>
<path d="M8.333 4.842a1.67 1.67 0 0 0-1.307-.633H3.39c-.86 0-1.578.653-1.66 1.508l-.515 5.417a1.667 1.667 0 0 0 1.659 1.825h1.292" />
<path d="M8.184 7.125h3.631c.86 0 1.58.655 1.66 1.51l.312 3.334a1.667 1.667 0 0 1-1.66 1.822H7.873c-.982 0-1.751-.845-1.66-1.822l.313-3.334c.08-.856.8-1.51 1.66-1.51M3.542 4.208V2.542a1.666 1.666 0 1 1 3.333 0v1.666" />
<path d="M11.458 9.209v.208a1.459 1.459 0 0 1-2.916 0v-.208" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h15v15H0z" />
</clipPath>
</defs>
</svg>
)
}
)
Shopping.displayName = "Shopping"
export default Shopping

2
packages/design-system/icons/src/components/square-blue-solid.tsx
View File

@@ -11,7 +11,7 @@ const SquareBlueSolid = React.forwardRef<SVGSVGElement, IconProps>(
ref={ref}
{...props}
>
<rect width={8} height={8} x={3.5} y={3.5} fill="#3B82F6" rx={2} />
<rect width={8} height={8} x={3.5} y={3.5} fill="#60A5FA" rx={2} />
<rect
width={7}
height={7}

2
packages/design-system/icons/src/components/square-purple-solid.tsx
View File

@@ -11,7 +11,7 @@ const SquarePurpleSolid = React.forwardRef<SVGSVGElement, IconProps>(
ref={ref}
{...props}
>
<rect width={8} height={8} x={3.5} y={3.5} fill="#8B5CF6" rx={2} />
<rect width={8} height={8} x={3.5} y={3.5} fill="#A78BFA" rx={2} />
<rect
width={7}
height={7}

26
packages/design-system/icons/src/components/stack-perspective.tsx Normal file
View File

@@ -0,0 +1,26 @@
import * as React from "react"
import type { IconProps } from "../types"
const StackPerspective = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="m2.389 10.389-.748.25a.444.444 0 0 1-.585-.422V4.783c0-.303.297-.517.585-.421l.748.25M5.944 12.055l-.718.3a.445.445 0 0 1-.615-.41v-8.89c0-.317.323-.532.615-.41l.718.3M8.798 1.124l4.631 2.137c.315.145.516.46.516.807v6.862a.89.89 0 0 1-.516.807l-4.631 2.137a.445.445 0 0 1-.631-.403V1.528c0-.325.336-.54.63-.404"
/>
</svg>
)
}
)
StackPerspective.displayName = "StackPerspective"
export default StackPerspective

33
packages/design-system/icons/src/components/trophy.tsx Normal file
View File

@@ -0,0 +1,33 @@
import * as React from "react"
import type { IconProps } from "../types"
const Trophy = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7.944 10.389s0 2.611 3.334 3.555H3.722C7.056 13 7.056 10.39 7.056 10.39M4.199 7.5c-3.393 0-3.143-4.666-3.143-4.666h1.988M10.801 7.5c3.394 0 3.143-4.666 3.143-4.666h-1.988"
/>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M11.944 1.056c-.555 5.805-2.027 9.083-4.222 9.333h-.444c-2.195-.25-3.667-3.528-4.222-9.333z"
/>
</svg>
)
}
)
Trophy.displayName = "Trophy"
export default Trophy

34
packages/design-system/icons/src/components/truck-fast.tsx Normal file
View File

@@ -0,0 +1,34 @@
import * as React from "react"
import type { IconProps } from "../types"
const TruckFast = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<g
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
clipPath="url(#a)"
>
<path d="M3.472 12.938a1.41 1.41 0 1 0 0-2.82 1.41 1.41 0 0 0 0 2.82M9.312 12.938a1.41 1.41 0 1 0 0-2.82 1.41 1.41 0 0 0 0 2.82M7.918 11.326H4.882M4.076 2.465h3.625c.89 0 1.612.721 1.612 1.611v6.042" />
<path d="M9.313 4.882h1.775c.274 0 .53.14.677.37l1.447 2.25c.084.13.128.281.128.436v1.777a1.61 1.61 0 0 1-1.61 1.611h-1.008M9.313 7.701h3.95M2.465 4.882H5.89M.854 7.299h3.424" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h15v15H0z" />
</clipPath>
</defs>
</svg>
)
}
)
TruckFast.displayName = "TruckFast"
export default TruckFast

2
packages/design-system/toolbox/src/transformers/transform-svg.ts
View File

@@ -22,7 +22,7 @@ export async function transformSvg({
typescript: true,
replaceAttrValues: !fixed
? {
"#09090B": "{color}",
"#18181B": "{color}",
}
: undefined,
svgProps: {

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

@@ -124,9 +124,6 @@ export const theme = {
"DEFAULT": "var(--bg-subtle-pressed)"
}
},
"overlay": {
"DEFAULT": "var(--bg-overlay)"
},
"field": {
"component": {
"hover": {
@@ -168,6 +165,9 @@ export const theme = {
},
"disabled": {
"DEFAULT": "var(--bg-disabled)"
},
"overlay": {
"DEFAULT": "var(--bg-overlay)"
}
},
"border": {
@@ -199,17 +199,6 @@ export const theme = {
}
},
"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)"
@@ -231,15 +220,23 @@ export const theme = {
"subtle": {
"DEFAULT": "var(--contrast-bg-subtle)"
}
},
"border": {
"base": {
"DEFAULT": "var(--contrast-border-base)"
},
"bot": {
"DEFAULT": "var(--contrast-border-bot)"
},
"top": {
"DEFAULT": "var(--contrast-border-top)"
}
}
},
"fg": {
"disabled": {
"DEFAULT": "var(--fg-disabled)"
},
"base": {
"DEFAULT": "var(--fg-base)"
},
"muted": {
"DEFAULT": "var(--fg-muted)"
},
@@ -262,6 +259,9 @@ export const theme = {
},
"subtle": {
"DEFAULT": "var(--fg-subtle)"
},
"base": {
"DEFAULT": "var(--fg-base)"
}
},
"button": {

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

@@ -1,29 +1,19 @@
export const colors = {
"dark": {
"--button-danger-pressed": "rgba(225, 29, 72, 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)",
"--contrast-border-base": "rgba(82, 82, 91, 1)",
"--button-neutral": "rgba(255, 255, 255, 0.04)",
"--tag-orange-border": "rgba(124, 45, 18, 1)",
"--tag-blue-text": "rgba(147, 197, 253, 1)",
"--button-neutral-pressed": "rgba(82, 82, 91, 1)",
"--bg-highlight": "rgba(23, 37, 84, 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)",
@@ -32,44 +22,32 @@ export const colors = {
"--button-inverted": "rgba(82, 82, 91, 1)",
"--tag-orange-text": "rgba(253, 186, 116, 1)",
"--fg-base": "rgba(244, 244, 245, 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-field-component-hover": "rgba(9, 9, 11, 0.24)",
"--button-danger": "rgba(159, 18, 57, 1)",
"--tag-neutral-border": "rgba(255, 255, 255, 0.06)",
"--tag-blue-border": "rgba(30, 58, 138, 1)",
"--tag-neutral-text": "rgba(212, 212, 216, 1)",
"--fg-muted": "rgba(161, 161, 170, 1)",
"--tag-purple-border": "rgba(91, 33, 182, 1)",
"--tag-green-text": "rgba(52, 211, 153, 1)",
"--button-inverted-hover": "rgba(113, 113, 122, 1)",
"--bg-component-pressed": "rgba(255, 255, 255, 0.16)",
"--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)",
"--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-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)",
@@ -81,13 +59,35 @@ export const colors = {
"--bg-disabled": "rgba(39, 39, 42, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--border-menu-bot": "rgba(255, 255, 255, 0.08)",
"--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)"
"--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
"--border-menu-top": "rgba(33, 33, 36, 1)",
"--bg-base": "rgba(33, 33, 36, 1)",
"--contrast-border-top": "rgba(33, 33, 36, 1)",
"--bg-field-component": "rgba(33, 33, 36, 1)",
"--bg-subtle-hover": "rgba(33, 33, 36, 1)",
"--bg-subtle": "rgba(24, 24, 27, 1)",
"--fg-on-inverted": "rgba(24, 24, 27, 1)",
"--bg-overlay": "rgba(24, 24, 27, 0.72)",
"--button-transparent-hover": "rgba(255, 255, 255, 0.08)",
"--contrast-fg-secondary": "rgba(255, 255, 255, 0.56)",
"--contrast-border-base": "rgba(255, 255, 255, 0.16)",
"--contrast-bg-base-pressed": "rgba(82, 82, 91, 1)",
"--button-neutral-pressed": "rgba(255, 255, 255, 0.12)",
"--border-base": "rgba(255, 255, 255, 0.08)",
"--contrast-fg-primary": "rgba(255, 255, 255, 0.88)",
"--button-neutral-hover": "rgba(255, 255, 255, 0.08)",
"--contrast-bg-base": "rgba(39, 39, 42, 1)",
"--tag-neutral-bg-hover": "rgba(255, 255, 255, 0.12)",
"--contrast-bg-subtle": "rgba(255, 255, 255, 0.04)",
"--contrast-bg-base-hover": "rgba(63, 63, 70, 1)",
"--bg-field-component-hover": "rgba(39, 39, 42, 1)",
"--bg-subtle-pressed": "rgba(39, 39, 42, 1)",
"--button-transparent-pressed": "rgba(255, 255, 255, 0.12)",
"--fg-muted": "rgba(113, 113, 122, 1)"
},
"light": {
"--tag-neutral-border": "rgba(228, 228, 231, 1)",
@@ -96,8 +96,6 @@ export const colors = {
"--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)",
@@ -111,7 +109,6 @@ export const colors = {
"--contrast-border-base": "rgba(255, 255, 255, 0.15)",
"--bg-field": "rgba(250, 250, 250, 1)",
"--tag-blue-text": "rgba(30, 64, 175, 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)",
@@ -177,6 +174,9 @@ export const colors = {
"--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)"
"--tag-orange-bg": "rgba(255, 237, 213, 1)",
"--fg-base": "rgba(24, 24, 27, 1)",
"--contrast-border-top": "rgba(24, 24, 27, 1)",
"--bg-overlay": "rgba(24, 24, 27, 0.4)"
}
}

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

@@ -6,23 +6,23 @@ 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)",
"--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 -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)",
"--elevation-card-rest": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
"--elevation-tooltip": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
"--elevation-flyout": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
"--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)",
"--elevation-tooltip": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
"--elevation-flyout": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
"--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)",
"--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"
"--borders-base": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 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)",
"--elevation-card-hover": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
"--elevation-card-rest": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
"--buttons-neutral": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 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)",
"--elevation-code-block": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
"--buttons-neutral-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 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)",
"--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 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
"--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.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)"
},
"light": {
"--borders-interactive-with-active": "0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.2)",