From cc4c5c86e227a6693d53ea6b5b9e62d0a7c57fa2 Mon Sep 17 00:00:00 2001 From: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> Date: Mon, 17 Mar 2025 16:51:57 +0100 Subject: [PATCH] chore(ui-preset,icons,dashboard) (#11734) * update icons * update ui-preset * chore(ui-preset,icons): Sync with Figma 5/3/2025 * chore(ui-preset,icons): Sync with Figma --- .changeset/eight-numbers-know.md | 7 + .../order-receive-return-form.tsx | 4 +- .../ai-assistent-luminosity.spec.tsx | 17 + ...ow-right.spec.tsx => arrow-right.spec.tsx} | 6 +- .../__tests__/arrows-reduce-diagonal.spec.tsx | 17 + .../components/__tests__/brackets.spec.tsx | 17 + .../__tests__/circle-minus.spec.tsx | 17 + .../components/__tests__/code-commit.spec.tsx | 17 + .../components/__tests__/code-merge.spec.tsx | 17 + .../components/__tests__/drop-cap.spec.tsx | 17 + .../src/components/__tests__/expand.spec.tsx | 17 + .../src/components/__tests__/party.spec.tsx | 17 + .../src/components/__tests__/reduce.spec.tsx | 17 + .../components/ai-assistent-luminosity.tsx | 382 ++++++++++++++++++ .../icons/src/components/ai-assistent.tsx | 134 +++--- .../{arrrow-right.tsx => arrow-right.tsx} | 6 +- .../icons/src/components/arrow-up-tray.tsx | 2 +- .../src/components/arrows-reduce-diagonal.tsx | 26 ++ .../icons/src/components/bell-alert-done.tsx | 2 +- .../icons/src/components/brackets.tsx | 33 ++ .../icons/src/components/camera.tsx | 4 +- .../icons/src/components/circle-minus.tsx | 23 ++ .../icons/src/components/code-commit.tsx | 26 ++ .../icons/src/components/code-merge.tsx | 33 ++ .../icons/src/components/drop-cap.tsx | 26 ++ .../src/components/ellipse-grey-solid.tsx | 2 +- .../icons/src/components/expand.tsx | 26 ++ .../icons/src/components/featured-badge.tsx | 102 +---- .../icons/src/components/flying-box.tsx | 2 +- .../icons/src/components/index.ts | 12 +- .../icons/src/components/party.tsx | 37 ++ .../icons/src/components/reduce.tsx | 26 ++ .../src/components/sparkles-mini-solid.tsx | 2 +- .../src/components/square-grey-solid.tsx | 2 +- .../icons/src/components/tag-illustration.tsx | 4 +- .../icons/src/components/thumbnail-badge.tsx | 102 +---- .../icons/src/components/verified-badge.tsx | 108 ++--- .../ui-preset/src/theme/extension/theme.ts | 12 +- .../ui-preset/src/theme/tokens/colors.ts | 8 +- .../ui-preset/src/theme/tokens/effects.ts | 10 +- .../ui-preset/src/theme/tokens/typography.ts | 24 +- 41 files changed, 1007 insertions(+), 356 deletions(-) create mode 100644 .changeset/eight-numbers-know.md create mode 100644 packages/design-system/icons/src/components/__tests__/ai-assistent-luminosity.spec.tsx rename packages/design-system/icons/src/components/__tests__/{arrrow-right.spec.tsx => arrow-right.spec.tsx} (69%) create mode 100644 packages/design-system/icons/src/components/__tests__/arrows-reduce-diagonal.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/brackets.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-minus.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/code-commit.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/code-merge.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/drop-cap.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/expand.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/party.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/reduce.spec.tsx create mode 100644 packages/design-system/icons/src/components/ai-assistent-luminosity.tsx rename packages/design-system/icons/src/components/{arrrow-right.tsx => arrow-right.tsx} (80%) create mode 100644 packages/design-system/icons/src/components/arrows-reduce-diagonal.tsx create mode 100644 packages/design-system/icons/src/components/brackets.tsx create mode 100644 packages/design-system/icons/src/components/circle-minus.tsx create mode 100644 packages/design-system/icons/src/components/code-commit.tsx create mode 100644 packages/design-system/icons/src/components/code-merge.tsx create mode 100644 packages/design-system/icons/src/components/drop-cap.tsx create mode 100644 packages/design-system/icons/src/components/expand.tsx create mode 100644 packages/design-system/icons/src/components/party.tsx create mode 100644 packages/design-system/icons/src/components/reduce.tsx diff --git a/.changeset/eight-numbers-know.md b/.changeset/eight-numbers-know.md new file mode 100644 index 0000000000..bfaf5e2dff --- /dev/null +++ b/.changeset/eight-numbers-know.md @@ -0,0 +1,7 @@ +--- +"@medusajs/ui-preset": patch +"@medusajs/icons": patch +"@medusajs/dashboard": patch +--- + +chore(ui-preset,icons,dashboard): Sync with Figma, and update ArrowRight import diff --git a/packages/admin/dashboard/src/routes/orders/order-receive-return/components/order-receive-return-form/order-receive-return-form.tsx b/packages/admin/dashboard/src/routes/orders/order-receive-return/components/order-receive-return-form/order-receive-return-form.tsx index 40b6034ffc..b15efa548d 100644 --- a/packages/admin/dashboard/src/routes/orders/order-receive-return/components/order-receive-return-form/order-receive-return-form.tsx +++ b/packages/admin/dashboard/src/routes/orders/order-receive-return/components/order-receive-return-form/order-receive-return-form.tsx @@ -1,5 +1,5 @@ import { zodResolver } from "@hookform/resolvers/zod" -import { ArrrowRight } from "@medusajs/icons" +import { ArrowRight } from "@medusajs/icons" import { AdminOrder, AdminReturn } from "@medusajs/types" import { Alert, Button, Input, Switch, Text, toast } from "@medusajs/ui" import { useEffect, useMemo } from "react" @@ -219,7 +219,7 @@ export function OrderReceiveReturnForm({
{stock_location && (
- {" "} + {" "} {stock_location.name} diff --git a/packages/design-system/icons/src/components/__tests__/ai-assistent-luminosity.spec.tsx b/packages/design-system/icons/src/components/__tests__/ai-assistent-luminosity.spec.tsx new file mode 100644 index 0000000000..d163300a2a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ai-assistent-luminosity.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import AiAssistentLuminosity from "../ai-assistent-luminosity" + + describe("AiAssistentLuminosity", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-right.spec.tsx similarity index 69% rename from packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx rename to packages/design-system/icons/src/components/__tests__/arrow-right.spec.tsx index 73387d79e4..2e8bbf97c3 100644 --- a/packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx +++ b/packages/design-system/icons/src/components/__tests__/arrow-right.spec.tsx @@ -1,11 +1,11 @@ import * as React from "react" import { cleanup, render, screen } from "@testing-library/react" - import ArrrowRight from "../arrrow-right" + import ArrowRight from "../arrow-right" - describe("ArrrowRight", () => { + describe("ArrowRight", () => { it("should render the icon without errors", async () => { - render() + render() const svgElement = screen.getByTestId("icon") diff --git a/packages/design-system/icons/src/components/__tests__/arrows-reduce-diagonal.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrows-reduce-diagonal.spec.tsx new file mode 100644 index 0000000000..38781711fd --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrows-reduce-diagonal.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowsReduceDiagonal from "../arrows-reduce-diagonal" + + describe("ArrowsReduceDiagonal", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/brackets.spec.tsx b/packages/design-system/icons/src/components/__tests__/brackets.spec.tsx new file mode 100644 index 0000000000..f7134dc695 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/brackets.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Brackets from "../brackets" + + describe("Brackets", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-minus.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-minus.spec.tsx new file mode 100644 index 0000000000..3585698065 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-minus.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleMinus from "../circle-minus" + + describe("CircleMinus", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/code-commit.spec.tsx b/packages/design-system/icons/src/components/__tests__/code-commit.spec.tsx new file mode 100644 index 0000000000..b0decc2690 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/code-commit.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CodeCommit from "../code-commit" + + describe("CodeCommit", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/code-merge.spec.tsx b/packages/design-system/icons/src/components/__tests__/code-merge.spec.tsx new file mode 100644 index 0000000000..4660d58761 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/code-merge.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CodeMerge from "../code-merge" + + describe("CodeMerge", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/drop-cap.spec.tsx b/packages/design-system/icons/src/components/__tests__/drop-cap.spec.tsx new file mode 100644 index 0000000000..408cce8c5a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/drop-cap.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import DropCap from "../drop-cap" + + describe("DropCap", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/expand.spec.tsx b/packages/design-system/icons/src/components/__tests__/expand.spec.tsx new file mode 100644 index 0000000000..2b90f466ee --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/expand.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Expand from "../expand" + + describe("Expand", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/party.spec.tsx b/packages/design-system/icons/src/components/__tests__/party.spec.tsx new file mode 100644 index 0000000000..a9bcd63cb5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/party.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Party from "../party" + + describe("Party", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/reduce.spec.tsx b/packages/design-system/icons/src/components/__tests__/reduce.spec.tsx new file mode 100644 index 0000000000..ceef9f974d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/reduce.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Reduce from "../reduce" + + describe("Reduce", () => { + it("should render the icon without errors", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/ai-assistent-luminosity.tsx b/packages/design-system/icons/src/components/ai-assistent-luminosity.tsx new file mode 100644 index 0000000000..df030ca20f --- /dev/null +++ b/packages/design-system/icons/src/components/ai-assistent-luminosity.tsx @@ -0,0 +1,382 @@ +import * as React from "react" +import type { IconProps } from "../types" +const AiAssistentLuminosity = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + } +) +AiAssistentLuminosity.displayName = "AiAssistentLuminosity" +export default AiAssistentLuminosity diff --git a/packages/design-system/icons/src/components/ai-assistent.tsx b/packages/design-system/icons/src/components/ai-assistent.tsx index b5f6ae411c..df875c55c3 100644 --- a/packages/design-system/icons/src/components/ai-assistent.tsx +++ b/packages/design-system/icons/src/components/ai-assistent.tsx @@ -5,15 +5,15 @@ const AiAssistent = React.forwardRef( return ( - - + + ( mixBlendMode: "plus-lighter", }} > - - + + ( mixBlendMode: "plus-lighter", }} > - - + + ( style={{ mixBlendMode: "plus-lighter", }} - transform="matrix(-1.0428 0 0 1.0428 11.064 3.243)" + transform="matrix(-1 0 0 1 9 2.5)" > @@ -64,7 +52,7 @@ const AiAssistent = React.forwardRef( style={{ mixBlendMode: "plus-lighter", }} - transform="scale(1.0428 -1.0428)rotate(90 12.61 .5)" + transform="matrix(0 -1 -1 0 11.5 11.5)" > @@ -75,7 +63,7 @@ const AiAssistent = React.forwardRef( style={{ mixBlendMode: "plus-lighter", }} - transform="matrix(-1.0428 0 0 1.0428 13.67 6.893)" + transform="matrix(-1 0 0 1 11.5 6)" > @@ -83,10 +71,10 @@ const AiAssistent = React.forwardRef( @@ -94,10 +82,10 @@ const AiAssistent = React.forwardRef( @@ -105,10 +93,10 @@ const AiAssistent = React.forwardRef( @@ -116,10 +104,10 @@ const AiAssistent = React.forwardRef( @@ -127,10 +115,10 @@ const AiAssistent = React.forwardRef( @@ -138,10 +126,10 @@ const AiAssistent = React.forwardRef( @@ -215,10 +203,10 @@ const AiAssistent = React.forwardRef( @@ -228,8 +216,8 @@ const AiAssistent = React.forwardRef( result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" /> - - + + ( @@ -298,10 +286,10 @@ const AiAssistent = React.forwardRef( @@ -318,10 +306,10 @@ const AiAssistent = React.forwardRef( @@ -338,10 +326,10 @@ const AiAssistent = React.forwardRef( @@ -358,10 +346,10 @@ const AiAssistent = React.forwardRef( diff --git a/packages/design-system/icons/src/components/arrrow-right.tsx b/packages/design-system/icons/src/components/arrow-right.tsx similarity index 80% rename from packages/design-system/icons/src/components/arrrow-right.tsx rename to packages/design-system/icons/src/components/arrow-right.tsx index 6ca4dc6e2e..957bcfe8ab 100644 --- a/packages/design-system/icons/src/components/arrrow-right.tsx +++ b/packages/design-system/icons/src/components/arrow-right.tsx @@ -1,6 +1,6 @@ import * as React from "react" import type { IconProps } from "../types" -const ArrrowRight = React.forwardRef( +const ArrowRight = React.forwardRef( ({ color = "currentColor", ...props }, ref) => { return ( ( ) } ) -ArrrowRight.displayName = "ArrrowRight" -export default ArrrowRight +ArrowRight.displayName = "ArrowRight" +export default ArrowRight diff --git a/packages/design-system/icons/src/components/arrow-up-tray.tsx b/packages/design-system/icons/src/components/arrow-up-tray.tsx index dea54a4bd5..8b3fe06be8 100644 --- a/packages/design-system/icons/src/components/arrow-up-tray.tsx +++ b/packages/design-system/icons/src/components/arrow-up-tray.tsx @@ -16,7 +16,7 @@ const ArrowUpTray = React.forwardRef( strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} - d="M13.056 9.944v1.334c0 .982-.796 1.777-1.778 1.777H3.722a1.777 1.777 0 0 1-1.778-1.777V9.944M10.611 5.055 7.5 1.945l-3.111 3.11M7.5 1.944v6.667" + d="M13.056 9.944v1.334c0 .982-.796 1.778-1.778 1.778H3.722a1.777 1.777 0 0 1-1.778-1.778V9.944M10.611 5.056 7.5 1.944 4.389 5.056M7.5 1.944v6.667" /> ) diff --git a/packages/design-system/icons/src/components/arrows-reduce-diagonal.tsx b/packages/design-system/icons/src/components/arrows-reduce-diagonal.tsx new file mode 100644 index 0000000000..3a4e8f71f0 --- /dev/null +++ b/packages/design-system/icons/src/components/arrows-reduce-diagonal.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowsReduceDiagonal = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowsReduceDiagonal.displayName = "ArrowsReduceDiagonal" +export default ArrowsReduceDiagonal diff --git a/packages/design-system/icons/src/components/bell-alert-done.tsx b/packages/design-system/icons/src/components/bell-alert-done.tsx index 066514d8b3..bcb0146c12 100644 --- a/packages/design-system/icons/src/components/bell-alert-done.tsx +++ b/packages/design-system/icons/src/components/bell-alert-done.tsx @@ -12,7 +12,7 @@ const BellAlertDone = React.forwardRef( {...props} > - + ( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + + + + + ) + } +) +Brackets.displayName = "Brackets" +export default Brackets diff --git a/packages/design-system/icons/src/components/camera.tsx b/packages/design-system/icons/src/components/camera.tsx index b2a9e0a5f9..d1d0f5b4e9 100644 --- a/packages/design-system/icons/src/components/camera.tsx +++ b/packages/design-system/icons/src/components/camera.tsx @@ -14,12 +14,12 @@ const Camera = React.forwardRef( diff --git a/packages/design-system/icons/src/components/circle-minus.tsx b/packages/design-system/icons/src/components/circle-minus.tsx new file mode 100644 index 0000000000..87fde58b2a --- /dev/null +++ b/packages/design-system/icons/src/components/circle-minus.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleMinus = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CircleMinus.displayName = "CircleMinus" +export default CircleMinus diff --git a/packages/design-system/icons/src/components/code-commit.tsx b/packages/design-system/icons/src/components/code-commit.tsx new file mode 100644 index 0000000000..5bcfaa10d9 --- /dev/null +++ b/packages/design-system/icons/src/components/code-commit.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CodeCommit = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CodeCommit.displayName = "CodeCommit" +export default CodeCommit diff --git a/packages/design-system/icons/src/components/code-merge.tsx b/packages/design-system/icons/src/components/code-merge.tsx new file mode 100644 index 0000000000..adf73bc6e3 --- /dev/null +++ b/packages/design-system/icons/src/components/code-merge.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CodeMerge = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CodeMerge.displayName = "CodeMerge" +export default CodeMerge diff --git a/packages/design-system/icons/src/components/drop-cap.tsx b/packages/design-system/icons/src/components/drop-cap.tsx new file mode 100644 index 0000000000..4ff3445f0b --- /dev/null +++ b/packages/design-system/icons/src/components/drop-cap.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const DropCap = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +DropCap.displayName = "DropCap" +export default DropCap diff --git a/packages/design-system/icons/src/components/ellipse-grey-solid.tsx b/packages/design-system/icons/src/components/ellipse-grey-solid.tsx index 7d4458c227..c641e62135 100644 --- a/packages/design-system/icons/src/components/ellipse-grey-solid.tsx +++ b/packages/design-system/icons/src/components/ellipse-grey-solid.tsx @@ -13,7 +13,7 @@ const EllipseGreySolid = React.forwardRef( > - + diff --git a/packages/design-system/icons/src/components/expand.tsx b/packages/design-system/icons/src/components/expand.tsx new file mode 100644 index 0000000000..9848577b83 --- /dev/null +++ b/packages/design-system/icons/src/components/expand.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Expand = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Expand.displayName = "Expand" +export default Expand diff --git a/packages/design-system/icons/src/components/featured-badge.tsx b/packages/design-system/icons/src/components/featured-badge.tsx index 7660ab8409..9dc9ec2f52 100644 --- a/packages/design-system/icons/src/components/featured-badge.tsx +++ b/packages/design-system/icons/src/components/featured-badge.tsx @@ -5,103 +5,43 @@ const FeaturedBadge = React.forwardRef( return ( - - - - - - + + + + - - + + - - - - - - - - - - - - - - - - - - - - - - ) diff --git a/packages/design-system/icons/src/components/flying-box.tsx b/packages/design-system/icons/src/components/flying-box.tsx index aeeff37be7..e3ef6b4c8c 100644 --- a/packages/design-system/icons/src/components/flying-box.tsx +++ b/packages/design-system/icons/src/components/flying-box.tsx @@ -16,7 +16,7 @@ const FlyingBox = React.forwardRef( strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} - 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" + d="M7.5 1.5v5.333M11.278 4.167H3.722c-.982 0-1.778.796-1.778 1.777v5.334c0 .982.796 1.777 1.778 1.777h7.556c.982 0 1.778-.795 1.778-1.777V5.944c0-.981-.796-1.777-1.778-1.777" /> ( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + ) + } +) +Party.displayName = "Party" +export default Party diff --git a/packages/design-system/icons/src/components/reduce.tsx b/packages/design-system/icons/src/components/reduce.tsx new file mode 100644 index 0000000000..a08124c81a --- /dev/null +++ b/packages/design-system/icons/src/components/reduce.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Reduce = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Reduce.displayName = "Reduce" +export default Reduce diff --git a/packages/design-system/icons/src/components/sparkles-mini-solid.tsx b/packages/design-system/icons/src/components/sparkles-mini-solid.tsx index 8ab39859b4..1e7db29f55 100644 --- a/packages/design-system/icons/src/components/sparkles-mini-solid.tsx +++ b/packages/design-system/icons/src/components/sparkles-mini-solid.tsx @@ -13,7 +13,7 @@ const SparklesMiniSolid = React.forwardRef( > ) diff --git a/packages/design-system/icons/src/components/square-grey-solid.tsx b/packages/design-system/icons/src/components/square-grey-solid.tsx index 57447ddb2c..7975398e2f 100644 --- a/packages/design-system/icons/src/components/square-grey-solid.tsx +++ b/packages/design-system/icons/src/components/square-grey-solid.tsx @@ -11,7 +11,7 @@ const SquareGreySolid = React.forwardRef( ref={ref} {...props} > - + ( > ( /> ( return ( - - - - - - - + + + + + - - + + - - - - - - - - - - - - - - - - - - - - - - ) diff --git a/packages/design-system/icons/src/components/verified-badge.tsx b/packages/design-system/icons/src/components/verified-badge.tsx index 4515c4d5f3..f860f6fdaa 100644 --- a/packages/design-system/icons/src/components/verified-badge.tsx +++ b/packages/design-system/icons/src/components/verified-badge.tsx @@ -5,104 +5,50 @@ const VerifiedBadge = React.forwardRef( return ( - - - - - + + + - - - - - - - - - - - - - - - - - - - - - - ) diff --git a/packages/design-system/ui-preset/src/theme/extension/theme.ts b/packages/design-system/ui-preset/src/theme/extension/theme.ts index 9a3bd6e17d..f0c6f2a3a0 100644 --- a/packages/design-system/ui-preset/src/theme/extension/theme.ts +++ b/packages/design-system/ui-preset/src/theme/extension/theme.ts @@ -301,6 +301,14 @@ export const theme = { "muted": { "DEFAULT": "var(--fg-muted)" } + }, + "alpha": { + "250": { + "DEFAULT": "var(--alpha-250)" + }, + "400": { + "DEFAULT": "var(--alpha-400)" + } } } }, @@ -325,9 +333,9 @@ export const theme = { "elevation-flyout": "var(--elevation-flyout)", "elevation-tooltip": "var(--elevation-tooltip)", "elevation-modal": "var(--elevation-modal)", - "elevation-commandbar": "var(--elevation-commandbar)", "elevation-code-block": "var(--elevation-code-block)", - "buttons-inverted": "var(--buttons-inverted)" + "buttons-inverted": "var(--buttons-inverted)", + "elevation-commandbar": "var(--elevation-commandbar)" } } } \ No newline at end of file diff --git a/packages/design-system/ui-preset/src/theme/tokens/colors.ts b/packages/design-system/ui-preset/src/theme/tokens/colors.ts index 280e3a883e..210b2769b0 100644 --- a/packages/design-system/ui-preset/src/theme/tokens/colors.ts +++ b/packages/design-system/ui-preset/src/theme/tokens/colors.ts @@ -87,7 +87,9 @@ export const colors = { "--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)" + "--fg-muted": "rgba(113, 113, 122, 1)", + "--alpha-400": "rgba(255, 255, 255, 0.24)", + "--alpha-250": "rgba(255, 255, 255, 0.1)" }, "light": { "--tag-neutral-border": "rgba(228, 228, 231, 1)", @@ -177,6 +179,8 @@ export const colors = { "--contrast-border-top": "rgba(24, 24, 27, 1)", "--bg-overlay": "rgba(24, 24, 27, 0.4)", "--fg-disabled": "rgba(161, 161, 170, 1)", - "--fg-muted": "rgba(113, 113, 122, 1)" + "--fg-muted": "rgba(113, 113, 122, 1)", + "--alpha-400": "rgba(24, 24, 27, 0.24)", + "--alpha-250": "rgba(24, 24, 27, 0.1)" } } \ No newline at end of file diff --git a/packages/design-system/ui-preset/src/theme/tokens/effects.ts b/packages/design-system/ui-preset/src/theme/tokens/effects.ts index 1570f1c4d9..2ce5f5f457 100644 --- a/packages/design-system/ui-preset/src/theme/tokens/effects.ts +++ b/packages/design-system/ui-preset/src/theme/tokens/effects.ts @@ -11,7 +11,6 @@ export const effects = { "--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)", "--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-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-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)", @@ -21,8 +20,9 @@ export const effects = { "--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)" + "--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)", + "--elevation-commandbar": "0px 0px 0px 0.75px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.25px 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-tooltip": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 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)", @@ -45,8 +45,8 @@ export const effects = { "--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)", - "--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", - "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(24, 24, 27, 1)" + "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(24, 24, 27, 1)", + "--elevation-commandbar": "0px 0px 0px 0.75px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.25px 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)" } } \ No newline at end of file diff --git a/packages/design-system/ui-preset/src/theme/tokens/typography.ts b/packages/design-system/ui-preset/src/theme/tokens/typography.ts index 708ac23df3..4f1b91875a 100644 --- a/packages/design-system/ui-preset/src/theme/tokens/typography.ts +++ b/packages/design-system/ui-preset/src/theme/tokens/typography.ts @@ -137,24 +137,12 @@ export const typography = { "fontWeight": "500", "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" }, - ".code-label": { - "fontSize": "0.75rem", - "lineHeight": "1.25rem", - "fontWeight": "400", - "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" - }, ".h4-webs": { "fontSize": "1.5rem", "lineHeight": "1.875rem", "fontWeight": "500", "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" }, - ".code-body": { - "fontSize": "0.75rem", - "lineHeight": "1.125rem", - "fontWeight": "400", - "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" - }, ".h2-core": { "fontSize": "1rem", "lineHeight": "1.5rem", @@ -190,5 +178,17 @@ export const typography = { "lineHeight": "1.5rem", "fontWeight": "500", "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".code-body": { + "fontSize": "0.75rem", + "lineHeight": "1.125rem", + "fontWeight": "400", + "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" + }, + ".code-label": { + "fontSize": "0.75rem", + "lineHeight": "0.9375rem", + "fontWeight": "500", + "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" } } \ No newline at end of file