From 33b23d6dd470091c95fd91b1359197c057a2b00c Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 3 Sep 2024 16:11:24 +0200 Subject: [PATCH 01/62] wip: create Avatar component --- packages/admin-ui/package.json | 1 + .../admin-ui/src/Avatar/Avatar.stories.tsx | 22 ++++++ packages/admin-ui/src/Avatar/Avatar.tsx | 78 +++++++++++++++++++ packages/admin-ui/src/Avatar/index.ts | 1 + packages/admin-ui/src/index.ts | 1 + yarn.lock | 23 ++++++ 6 files changed, 126 insertions(+) create mode 100644 packages/admin-ui/src/Avatar/Avatar.stories.tsx create mode 100644 packages/admin-ui/src/Avatar/Avatar.tsx create mode 100644 packages/admin-ui/src/Avatar/index.ts diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index 2d4e9031976..45863768ab5 100644 --- a/packages/admin-ui/package.json +++ b/packages/admin-ui/package.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@material-design-icons/svg": "^0.14.3", + "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", diff --git a/packages/admin-ui/src/Avatar/Avatar.stories.tsx b/packages/admin-ui/src/Avatar/Avatar.stories.tsx new file mode 100644 index 00000000000..cc20faa78cf --- /dev/null +++ b/packages/admin-ui/src/Avatar/Avatar.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Avatar, AvatarImage } from "./Avatar"; +import * as React from "react"; + +const meta: Meta = { + title: "Components/Avatar", + component: Avatar, + tags: ["autodocs"], + argTypes: {} +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + image: , + fallback: "W" + } +}; diff --git a/packages/admin-ui/src/Avatar/Avatar.tsx b/packages/admin-ui/src/Avatar/Avatar.tsx new file mode 100644 index 00000000000..74e742a7455 --- /dev/null +++ b/packages/admin-ui/src/Avatar/Avatar.tsx @@ -0,0 +1,78 @@ +import * as React from "react"; +import * as AvatarPrimitive from "@radix-ui/react-avatar"; + +import { cn } from "~/utils"; +import { makeDecoratable } from "@webiny/react-composition"; + +const AvatarRootBase = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarRootBase.displayName = AvatarPrimitive.Root.displayName; + +const AvatarRoot = makeDecoratable("AvatarRoot", AvatarRootBase); + +const AvatarImageBase = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarImageBase.displayName = AvatarPrimitive.Image.displayName; + +const AvatarImage = makeDecoratable("AvatarImage", AvatarImageBase); + +interface AvatarFallbackProps + extends Omit< + React.ComponentPropsWithoutRef, + "content" | "children" + > { + content: React.ReactNode; +} + +const AvatarFallbackBase = React.forwardRef< + React.ElementRef, + AvatarFallbackProps +>(({ className, content, ...props }, ref) => ( + + {content} + +)); +AvatarFallbackBase.displayName = AvatarPrimitive.Fallback.displayName; + +const AvatarFallback = makeDecoratable("AvatarFallback", AvatarFallbackBase); + +interface AvatarProps { + image: React.ReactElement; + fallback?: string | React.ReactElement; +} + +const Avatar = (props: AvatarProps) => { + const { image, fallback } = props; + + return ( + + {image} + {typeof fallback === "string" ? : fallback} + + ); +}; + +export { Avatar, AvatarFallback, AvatarImage, type AvatarProps }; diff --git a/packages/admin-ui/src/Avatar/index.ts b/packages/admin-ui/src/Avatar/index.ts new file mode 100644 index 00000000000..8d3d546e778 --- /dev/null +++ b/packages/admin-ui/src/Avatar/index.ts @@ -0,0 +1 @@ +export * from "./Avatar"; diff --git a/packages/admin-ui/src/index.ts b/packages/admin-ui/src/index.ts index 6d49a83aba6..f93afe6442e 100644 --- a/packages/admin-ui/src/index.ts +++ b/packages/admin-ui/src/index.ts @@ -1,3 +1,4 @@ +export * from "./Avatar"; export * from "./Button"; export * from "./Card"; export * from "./Heading"; diff --git a/yarn.lock b/yarn.lock index a5fc76bf44f..340c08ec9bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12041,6 +12041,28 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-avatar@npm:^1.1.0": + version: 1.1.0 + resolution: "@radix-ui/react-avatar@npm:1.1.0" + dependencies: + "@radix-ui/react-context": 1.1.0 + "@radix-ui/react-primitive": 2.0.0 + "@radix-ui/react-use-callback-ref": 1.1.0 + "@radix-ui/react-use-layout-effect": 1.1.0 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 9f704dee499d34edcc66dca393568518b18d80cb63572291055f5137dc603f4c150bb02ed4799d3c35b8c614cdbb23be533a0f6cfcaefdb626fb4b31edc3fdd1 + languageName: node + linkType: hard + "@radix-ui/react-collection@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-collection@npm:1.1.0" @@ -16731,6 +16753,7 @@ __metadata: "@babel/preset-react": ^7.23.3 "@babel/preset-typescript": ^7.23.3 "@material-design-icons/svg": ^0.14.3 + "@radix-ui/react-avatar": ^1.1.0 "@radix-ui/react-label": ^2.1.0 "@radix-ui/react-slot": ^1.1.0 "@radix-ui/react-switch": ^1.1.0 From 936f83ebe492b2c43c7ec7f822844cdc42a998ee Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 5 Sep 2024 06:16:08 +0200 Subject: [PATCH 02/62] wip: create Avatar component --- packages/admin-ui/package.json | 1 + yarn.lock | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index e9e8e72498f..e9672c72728 100644 --- a/packages/admin-ui/package.json +++ b/packages/admin-ui/package.json @@ -11,6 +11,7 @@ "dependencies": { "@material-design-icons/svg": "^0.14.3", "@radix-ui/react-accessible-icon": "^1.1.0", + "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", diff --git a/yarn.lock b/yarn.lock index 8ad1d6c8f81..162e86e8e76 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12060,6 +12060,28 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-avatar@npm:^1.1.0": + version: 1.1.0 + resolution: "@radix-ui/react-avatar@npm:1.1.0" + dependencies: + "@radix-ui/react-context": 1.1.0 + "@radix-ui/react-primitive": 2.0.0 + "@radix-ui/react-use-callback-ref": 1.1.0 + "@radix-ui/react-use-layout-effect": 1.1.0 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 9f704dee499d34edcc66dca393568518b18d80cb63572291055f5137dc603f4c150bb02ed4799d3c35b8c614cdbb23be533a0f6cfcaefdb626fb4b31edc3fdd1 + languageName: node + linkType: hard + "@radix-ui/react-collection@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-collection@npm:1.1.0" @@ -16751,6 +16773,7 @@ __metadata: "@babel/preset-typescript": ^7.23.3 "@material-design-icons/svg": ^0.14.3 "@radix-ui/react-accessible-icon": ^1.1.0 + "@radix-ui/react-avatar": ^1.1.0 "@radix-ui/react-label": ^2.1.0 "@radix-ui/react-slot": ^1.1.0 "@radix-ui/react-switch": ^1.1.0 From 0abec5f45a4aa807f918da076c58ad067af0233d Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 5 Sep 2024 14:12:32 +0200 Subject: [PATCH 03/62] fix: remove needless `cn` usage --- packages/admin-ui/src/Icon/Icon.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/admin-ui/src/Icon/Icon.tsx b/packages/admin-ui/src/Icon/Icon.tsx index 4a44f8b47d1..b8952f37708 100644 --- a/packages/admin-ui/src/Icon/Icon.tsx +++ b/packages/admin-ui/src/Icon/Icon.tsx @@ -2,7 +2,6 @@ import React from "react"; import * as AccessibleIcon from "@radix-ui/react-accessible-icon"; import { makeDecoratable } from "@webiny/react-composition"; import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "~/utils"; const iconVariants = cva("", { variants: { @@ -37,7 +36,7 @@ const IconBase = React.forwardRef((props, ref) => { {React.cloneElement(icon, { ...rest, - className: cn(iconVariants({ color, size, className })), + className: iconVariants({ color, size, className }), ref })} From 1a550cb3f8ae6affbc317076f8a096f4e1ce6bb5 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 5 Sep 2024 14:13:00 +0200 Subject: [PATCH 04/62] wip: create Avatar component --- .../admin-ui/src/Avatar/Avatar.stories.tsx | 22 ++++++- packages/admin-ui/src/Avatar/Avatar.tsx | 60 +++++++++++++++---- 2 files changed, 67 insertions(+), 15 deletions(-) diff --git a/packages/admin-ui/src/Avatar/Avatar.stories.tsx b/packages/admin-ui/src/Avatar/Avatar.stories.tsx index cc20faa78cf..1c124980e96 100644 --- a/packages/admin-ui/src/Avatar/Avatar.stories.tsx +++ b/packages/admin-ui/src/Avatar/Avatar.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { Avatar, AvatarImage } from "./Avatar"; +import { Avatar, AvatarImage, AvatarFallback } from "./Avatar"; import * as React from "react"; const meta: Meta = { @@ -17,6 +17,24 @@ type Story = StoryObj; export const Default: Story = { args: { image: , - fallback: "W" + fallback: + }, + argTypes: { + size: { + control: "select", + options: ["sm", "md", "lg", "xl"] + }, + variant: { + control: "select", + options: ["image"] + } } }; + + +export const Sizes: Story = { + args: { + ...Default.args, + size: "lg" + } +}; \ No newline at end of file diff --git a/packages/admin-ui/src/Avatar/Avatar.tsx b/packages/admin-ui/src/Avatar/Avatar.tsx index 74e742a7455..248fa7fa971 100644 --- a/packages/admin-ui/src/Avatar/Avatar.tsx +++ b/packages/admin-ui/src/Avatar/Avatar.tsx @@ -1,16 +1,41 @@ import * as React from "react"; import * as AvatarPrimitive from "@radix-ui/react-avatar"; - -import { cn } from "~/utils"; import { makeDecoratable } from "@webiny/react-composition"; +import { cva, type VariantProps } from "class-variance-authority"; +import { cn } from "~/utils"; + +interface AvatarRootProps + extends React.ComponentPropsWithoutRef, + VariantProps {} + +const avatarRootVariants = cva("rounded", { + variants: { + size: { + sm: "w-6 h-6", + md: "w-8 h-8", + lg: "w-10 h-10", + xl: "w-12 h-12 rounded-lg" + }, + variant: { + image: "" + } + }, + defaultVariants: { + size: "md", + variant: "image" + } +}); const AvatarRootBase = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( + AvatarRootProps +>(({ className, size, variant, ...props }, ref) => ( )); @@ -18,9 +43,11 @@ AvatarRootBase.displayName = AvatarPrimitive.Root.displayName; const AvatarRoot = makeDecoratable("AvatarRoot", AvatarRootBase); +type AvatarImageProps = React.ComponentPropsWithoutRef; + const AvatarImageBase = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef + AvatarImageProps >(({ className, ...props }, ref) => ( ; - fallback?: string | React.ReactElement; +interface AvatarProps extends AvatarRootProps { + image: React.ReactElement; + fallback?: React.ReactElement; } const Avatar = (props: AvatarProps) => { - const { image, fallback } = props; + const { image, fallback, ...rest } = props; return ( - + {image} - {typeof fallback === "string" ? : fallback} + {fallback} ); }; -export { Avatar, AvatarFallback, AvatarImage, type AvatarProps }; +export { + Avatar, + AvatarFallback, + AvatarImage, + type AvatarProps, + type AvatarImageProps, + type AvatarFallbackProps +}; From a3ff7025fd5c42183acb9c141d18f2d7d69b598c Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 5 Sep 2024 15:00:25 +0200 Subject: [PATCH 05/62] wip: create Avatar component --- packages/admin-ui/src/Avatar/Avatar.tsx | 84 ++++++-------- packages/ui/src/Avatar/Avatar.tsx | 143 +++++++++++------------- packages/ui/src/Avatar/README.md | 11 -- 3 files changed, 103 insertions(+), 135 deletions(-) delete mode 100644 packages/ui/src/Avatar/README.md diff --git a/packages/admin-ui/src/Avatar/Avatar.tsx b/packages/admin-ui/src/Avatar/Avatar.tsx index 248fa7fa971..07f0bf6b30f 100644 --- a/packages/admin-ui/src/Avatar/Avatar.tsx +++ b/packages/admin-ui/src/Avatar/Avatar.tsx @@ -4,45 +4,6 @@ import { makeDecoratable } from "@webiny/react-composition"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "~/utils"; -interface AvatarRootProps - extends React.ComponentPropsWithoutRef, - VariantProps {} - -const avatarRootVariants = cva("rounded", { - variants: { - size: { - sm: "w-6 h-6", - md: "w-8 h-8", - lg: "w-10 h-10", - xl: "w-12 h-12 rounded-lg" - }, - variant: { - image: "" - } - }, - defaultVariants: { - size: "md", - variant: "image" - } -}); - -const AvatarRootBase = React.forwardRef< - React.ElementRef, - AvatarRootProps ->(({ className, size, variant, ...props }, ref) => ( - -)); -AvatarRootBase.displayName = AvatarPrimitive.Root.displayName; - -const AvatarRoot = makeDecoratable("AvatarRoot", AvatarRootBase); - type AvatarImageProps = React.ComponentPropsWithoutRef; const AvatarImageBase = React.forwardRef< @@ -86,21 +47,50 @@ AvatarFallbackBase.displayName = AvatarPrimitive.Fallback.displayName; const AvatarFallback = makeDecoratable("AvatarFallback", AvatarFallbackBase); -interface AvatarProps extends AvatarRootProps { +interface AvatarProps + extends React.ComponentPropsWithoutRef, + VariantProps { image: React.ReactElement; fallback?: React.ReactElement; } -const Avatar = (props: AvatarProps) => { - const { image, fallback, ...rest } = props; +const avatarVariants = cva("rounded", { + variants: { + size: { + sm: "w-6 h-6", + md: "w-8 h-8", + lg: "w-10 h-10", + xl: "w-12 h-12 rounded-lg" + }, + variant: { + image: "" + } + }, + defaultVariants: { + size: "md", + variant: "image" + } +}); - return ( - +const AvatarBase = React.forwardRef, AvatarProps>( + ({ image, fallback, className, size, variant, ...props }, ref) => ( + {image} {fallback} - - ); -}; + + ) +); + +AvatarBase.displayName = AvatarPrimitive.Root.displayName; + +const Avatar = makeDecoratable("Avatar", AvatarBase); export { Avatar, diff --git a/packages/ui/src/Avatar/Avatar.tsx b/packages/ui/src/Avatar/Avatar.tsx index 5a8dda42a01..661a7e6ca1e 100644 --- a/packages/ui/src/Avatar/Avatar.tsx +++ b/packages/ui/src/Avatar/Avatar.tsx @@ -1,38 +1,9 @@ import React from "react"; -import { css } from "emotion"; -import classNames from "classnames"; -const avatar = css({ - borderRadius: "50%", - display: "block", - //alignItems: "center", - //justifyContent: "center", - width: 38, - height: 38, - position: "relative", - top: -7, - right: 7, - overflow: "hidden", - background: "var(--mdc-theme-background)", - color: "var(--mdc-theme-text-secondary-on-background)", - div: { - textAlign: "center", - display: "flex", - alignContent: "center", - justifyContent: "center", - flexDirection: "column", - width: 38, - height: 38, - fontSize: "1rem", - span: { - paddingBottom: 2 - } - }, - img: { - width: "100% !important", - height: "100% !important", - objectFit: "cover" - } -}); +import { + Avatar as AdminUiAvatar, + AvatarFallback as AdminUiAvatarFallback, + AvatarImage as AdminUiAvatarImage +} from "@webiny/admin-ui"; export interface AvatarProps { /** @@ -48,7 +19,7 @@ export interface AvatarProps { /** * Avatar image source. */ - src?: string | null; + src?: string; /** * "alt" text. @@ -69,7 +40,7 @@ export interface AvatarProps { * Pass a custom image component to be rendered instead of a simple element. * @param props */ - renderImage?: (props: { src: string; alt?: string }) => React.ReactElement; + renderImage?: (props: { src?: string; alt?: string }) => React.ReactElement; /** * Text that will be shown when there is no image (usually user's initials). @@ -78,52 +49,70 @@ export interface AvatarProps { } /** - * Use Avatar component to display user's avatar. + * @deprecated This component is deprecated and will be removed in future releases. + * Please use the `Avatar` component from the `@webiny/admin-ui` package instead. */ export const Avatar = (props: AvatarProps) => { - const { - className, - width = 38, - height = 38, - src, - alt, - fallbackText, - renderImage, - ...rest - } = props; + const { className, style, src, alt, width, height, renderImage, fallbackText } = props; - let renderedImage; - const imageProps = { src, alt }; - if (src) { - if (typeof renderImage === "function") { - renderedImage = renderImage({ - ...imageProps, - src - }); - } else { - renderedImage = {alt}; - } + let renderedImage: React.ReactElement; + if (typeof renderImage === "function") { + renderedImage = renderImage({ src, alt }); + } else { + renderedImage = ; } return ( -
- {props.src ? ( - renderedImage - ) : ( -
- - {fallbackText - .split(" ") - .map(word => word.charAt(0)) - .join("") - .toUpperCase()} - -
- )} -
+ } + /> ); + // const { + // className, + // width = 38, + // height = 38, + // src, + // alt, + // fallbackText, + // renderImage, + // ...rest + // } = props; + // + // let renderedImage; + // const imageProps = { src, alt }; + // if (src) { + // if (typeof renderImage === "function") { + // renderedImage = renderImage({ + // ...imageProps, + // src + // }); + // } else { + // renderedImage = {alt}; + // } + // } + // + // return ( + //
+ // {props.src ? ( + // renderedImage + // ) : ( + //
+ // + // {fallbackText + // .split(" ") + // .map(word => word.charAt(0)) + // .join("") + // .toUpperCase()} + // + //
+ // )} + //
+ // ); }; diff --git a/packages/ui/src/Avatar/README.md b/packages/ui/src/Avatar/README.md deleted file mode 100644 index a481be2a0f7..00000000000 --- a/packages/ui/src/Avatar/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# Avatar - -### Description - -Use `Avatar` component to display an avatar. - -### Import - -```js -import { Avatar } from "@webiny/ui/Avatar"; -``` From d89b81e3a46f89a6c5b540b70af69fd781812dc5 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 5 Sep 2024 15:23:00 +0200 Subject: [PATCH 06/62] wip: create Avatar component --- packages/ui/src/Avatar/Avatar.tsx | 57 ++----------------------------- 1 file changed, 3 insertions(+), 54 deletions(-) diff --git a/packages/ui/src/Avatar/Avatar.tsx b/packages/ui/src/Avatar/Avatar.tsx index 661a7e6ca1e..63377f348c8 100644 --- a/packages/ui/src/Avatar/Avatar.tsx +++ b/packages/ui/src/Avatar/Avatar.tsx @@ -53,66 +53,15 @@ export interface AvatarProps { * Please use the `Avatar` component from the `@webiny/admin-ui` package instead. */ export const Avatar = (props: AvatarProps) => { - const { className, style, src, alt, width, height, renderImage, fallbackText } = props; - - let renderedImage: React.ReactElement; - if (typeof renderImage === "function") { - renderedImage = renderImage({ src, alt }); - } else { - renderedImage = ; - } + // Note that we're ignoring `renderImage` prop, as it's not supported in the new `Avatar` component. + const { className, style, src, alt, width, height, fallbackText } = props; return ( } fallback={} /> ); - // const { - // className, - // width = 38, - // height = 38, - // src, - // alt, - // fallbackText, - // renderImage, - // ...rest - // } = props; - // - // let renderedImage; - // const imageProps = { src, alt }; - // if (src) { - // if (typeof renderImage === "function") { - // renderedImage = renderImage({ - // ...imageProps, - // src - // }); - // } else { - // renderedImage = {alt}; - // } - // } - // - // return ( - //
- // {props.src ? ( - // renderedImage - // ) : ( - //
- // - // {fallbackText - // .split(" ") - // .map(word => word.charAt(0)) - // .join("") - // .toUpperCase()} - // - //
- // )} - //
- // ); }; From 04e7e9448cfea81af8a9c8c6a48391c814e5e2e1 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 9 Sep 2024 15:27:27 +0200 Subject: [PATCH 07/62] wip: create Avatar component --- packages/ui/src/Avatar/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/Avatar/Avatar.tsx b/packages/ui/src/Avatar/Avatar.tsx index 63377f348c8..5fe98a7ad8a 100644 --- a/packages/ui/src/Avatar/Avatar.tsx +++ b/packages/ui/src/Avatar/Avatar.tsx @@ -40,7 +40,7 @@ export interface AvatarProps { * Pass a custom image component to be rendered instead of a simple element. * @param props */ - renderImage?: (props: { src?: string; alt?: string }) => React.ReactElement; + renderImage?: (props: { src: string; alt: string }) => React.ReactElement; /** * Text that will be shown when there is no image (usually user's initials). From 3a6898a9ceaf437a893e15734cf1555a2ea88a71 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 9 Sep 2024 15:27:55 +0200 Subject: [PATCH 08/62] wip: create Avatar component --- packages/ui/src/Avatar/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/Avatar/Avatar.tsx b/packages/ui/src/Avatar/Avatar.tsx index 5fe98a7ad8a..3624ddf8ef4 100644 --- a/packages/ui/src/Avatar/Avatar.tsx +++ b/packages/ui/src/Avatar/Avatar.tsx @@ -40,7 +40,7 @@ export interface AvatarProps { * Pass a custom image component to be rendered instead of a simple element. * @param props */ - renderImage?: (props: { src: string; alt: string }) => React.ReactElement; + renderImage?: (props: { src: string; alt?: string }) => React.ReactElement; /** * Text that will be shown when there is no image (usually user's initials). From 83ad097a5a5fb9604d9d6062ff82b8ee021de86f Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 9 Sep 2024 16:12:49 +0200 Subject: [PATCH 09/62] wip: create Avatar component --- .../admin-ui/src/Avatar/Avatar.stories.tsx | 9 +++-- packages/admin-ui/src/Avatar/Avatar.tsx | 33 +++++++------------ packages/admin-ui/src/utils.ts | 8 +++++ packages/ui/src/Avatar/Avatar.tsx | 10 ++---- 4 files changed, 27 insertions(+), 33 deletions(-) diff --git a/packages/admin-ui/src/Avatar/Avatar.stories.tsx b/packages/admin-ui/src/Avatar/Avatar.stories.tsx index 1c124980e96..5c6ca9650fd 100644 --- a/packages/admin-ui/src/Avatar/Avatar.stories.tsx +++ b/packages/admin-ui/src/Avatar/Avatar.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { Avatar, AvatarImage, AvatarFallback } from "./Avatar"; +import { Avatar } from "./Avatar"; import * as React from "react"; const meta: Meta = { @@ -16,8 +16,8 @@ type Story = StoryObj; export const Default: Story = { args: { - image: , - fallback: + image: , + fallback: W }, argTypes: { size: { @@ -31,10 +31,9 @@ export const Default: Story = { } }; - export const Sizes: Story = { args: { ...Default.args, size: "lg" } -}; \ No newline at end of file +}; diff --git a/packages/admin-ui/src/Avatar/Avatar.tsx b/packages/admin-ui/src/Avatar/Avatar.tsx index 07f0bf6b30f..ff4c62ba67d 100644 --- a/packages/admin-ui/src/Avatar/Avatar.tsx +++ b/packages/admin-ui/src/Avatar/Avatar.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import * as AvatarPrimitive from "@radix-ui/react-avatar"; import { makeDecoratable } from "@webiny/react-composition"; import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "~/utils"; +import { withStaticProps, cn } from "~/utils"; type AvatarImageProps = React.ComponentPropsWithoutRef; @@ -20,18 +20,12 @@ AvatarImageBase.displayName = AvatarPrimitive.Image.displayName; const AvatarImage = makeDecoratable("AvatarImage", AvatarImageBase); -interface AvatarFallbackProps - extends Omit< - React.ComponentPropsWithoutRef, - "content" | "children" - > { - content: React.ReactNode; -} +type AvatarFallbackProps = React.ComponentPropsWithoutRef; const AvatarFallbackBase = React.forwardRef< React.ElementRef, AvatarFallbackProps ->(({ className, content, ...props }, ref) => ( +>(({ className, ...props }, ref) => ( - {content} - + /> )); + AvatarFallbackBase.displayName = AvatarPrimitive.Fallback.displayName; const AvatarFallback = makeDecoratable("AvatarFallback", AvatarFallbackBase); @@ -90,13 +83,11 @@ const AvatarBase = React.forwardRef { } return "wby-" + baseGenerateId(4); }; + +export const withStaticProps = , TProps>( + component: TComponent, + props: TProps +) => { + return Object.assign(component, props) as TComponent & TProps; +}; diff --git a/packages/ui/src/Avatar/Avatar.tsx b/packages/ui/src/Avatar/Avatar.tsx index 3624ddf8ef4..d59986640f4 100644 --- a/packages/ui/src/Avatar/Avatar.tsx +++ b/packages/ui/src/Avatar/Avatar.tsx @@ -1,9 +1,5 @@ import React from "react"; -import { - Avatar as AdminUiAvatar, - AvatarFallback as AdminUiAvatarFallback, - AvatarImage as AdminUiAvatarImage -} from "@webiny/admin-ui"; +import { Avatar as AdminUiAvatar } from "@webiny/admin-ui"; export interface AvatarProps { /** @@ -60,8 +56,8 @@ export const Avatar = (props: AvatarProps) => { } - fallback={} + image={} + fallback={} /> ); }; From a95a91463cdf10e7263b9c118524c5cafeddf0b0 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 10 Sep 2024 16:29:37 +0200 Subject: [PATCH 10/62] fix: update dependencies --- yarn.lock | 3417 ++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 2436 insertions(+), 981 deletions(-) diff --git a/yarn.lock b/yarn.lock index 36a732ee83e..4ba75da6722 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21,13 +21,6 @@ __metadata: languageName: node linkType: hard -"@adobe/css-tools@npm:^4.3.2": - version: 4.4.0 - resolution: "@adobe/css-tools@npm:4.4.0" - checksum: 1f08fb49bf17fc7f2d1a86d3e739f29ca80063d28168307f1b0a962ef37501c5667271f6771966578897f2e94e43c4770fd802728a6e6495b812da54112d506a - languageName: node - linkType: hard - "@alloc/quick-lru@npm:^5.2.0": version: 5.2.0 resolution: "@alloc/quick-lru@npm:5.2.0" @@ -130,6 +123,17 @@ __metadata: languageName: node linkType: hard +"@aw-web-design/x-default-browser@npm:1.4.126": + version: 1.4.126 + resolution: "@aw-web-design/x-default-browser@npm:1.4.126" + dependencies: + default-browser-id: 3.0.0 + bin: + x-default-browser: bin/x-default-browser.js + checksum: f63b68a0ff41c8fe478b1b4822e169cac0d26c61b123c0400d5e16a8a5987732b85795aff16d6b21936f9c955f0d32bffbfc166890d3446f74a72a7a2c9633ea + languageName: node + linkType: hard + "@aws-amplify/auth@npm:^5.1.9": version: 5.1.9 resolution: "@aws-amplify/auth@npm:5.1.9" @@ -2488,6 +2492,13 @@ __metadata: languageName: node linkType: hard +"@babel/compat-data@npm:^7.25.4": + version: 7.25.4 + resolution: "@babel/compat-data@npm:7.25.4" + checksum: b12a91d27c3731a4b0bdc9312a50b1911f41f7f728aaf0d4b32486e2257fd2cb2d3ea1a295e98449600c48f2c7883a3196ca77cda1cef7d97a10c2e83d037974 + languageName: node + linkType: hard + "@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3": version: 7.20.12 resolution: "@babel/core@npm:7.20.12" @@ -2511,7 +2522,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.24.4": +"@babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2": version: 7.25.2 resolution: "@babel/core@npm:7.25.2" dependencies: @@ -2640,6 +2651,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.23.0": + version: 7.25.6 + resolution: "@babel/generator@npm:7.25.6" + dependencies: + "@babel/types": ^7.25.6 + "@jridgewell/gen-mapping": ^0.3.5 + "@jridgewell/trace-mapping": ^0.3.25 + jsesc: ^2.5.1 + checksum: b55975cd664f5602304d868bb34f4ee3bed6f5c7ce8132cd92ff27a46a53a119def28a182d91992e86f75db904f63094a81247703c4dc96e4db0c03fd04bcd68 + languageName: node + linkType: hard + "@babel/generator@npm:^7.24.1": version: 7.24.1 resolution: "@babel/generator@npm:7.24.1" @@ -2889,6 +2912,23 @@ __metadata: languageName: node linkType: hard +"@babel/helper-create-class-features-plugin@npm:^7.25.4": + version: 7.25.4 + resolution: "@babel/helper-create-class-features-plugin@npm:7.25.4" + dependencies: + "@babel/helper-annotate-as-pure": ^7.24.7 + "@babel/helper-member-expression-to-functions": ^7.24.8 + "@babel/helper-optimise-call-expression": ^7.24.7 + "@babel/helper-replace-supers": ^7.25.0 + "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 + "@babel/traverse": ^7.25.4 + semver: ^6.3.1 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 4544ebda4516eb25efdebd47ca024bd7bdb1eb6e7cc3ad89688c8ef8e889734c2f4411ed78981899c641394f013f246f2af63d92a0e9270f6c453309b4cb89ba + languageName: node + linkType: hard + "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.20.5": version: 7.20.5 resolution: "@babel/helper-create-regexp-features-plugin@npm:7.20.5" @@ -2940,7 +2980,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-regexp-features-plugin@npm:^7.25.0": +"@babel/helper-create-regexp-features-plugin@npm:^7.25.0, @babel/helper-create-regexp-features-plugin@npm:^7.25.2": version: 7.25.2 resolution: "@babel/helper-create-regexp-features-plugin@npm:7.25.2" dependencies: @@ -2984,6 +3024,21 @@ __metadata: languageName: node linkType: hard +"@babel/helper-define-polyfill-provider@npm:^0.6.2": + version: 0.6.2 + resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2" + dependencies: + "@babel/helper-compilation-targets": ^7.22.6 + "@babel/helper-plugin-utils": ^7.22.5 + debug: ^4.1.1 + lodash.debounce: ^4.0.8 + resolve: ^1.14.2 + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: 2bba965ea9a4887ddf9c11d51d740ab473bd7597b787d042c325f6a45912dfe908c2d6bb1d837bf82f7e9fa51e6ad5150563c58131d2bb85515e63d971414a9c + languageName: node + linkType: hard + "@babel/helper-environment-visitor@npm:^7.18.9": version: 7.18.9 resolution: "@babel/helper-environment-visitor@npm:7.18.9" @@ -4653,17 +4708,17 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.25.0": - version: 7.25.0 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.25.0" +"@babel/plugin-transform-async-generator-functions@npm:^7.25.4": + version: 7.25.4 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.25.4" dependencies: "@babel/helper-plugin-utils": ^7.24.8 "@babel/helper-remap-async-to-generator": ^7.25.0 "@babel/plugin-syntax-async-generators": ^7.8.4 - "@babel/traverse": ^7.25.0 + "@babel/traverse": ^7.25.4 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: cce2bab70ad871ac11751bede006bd4861888f4c63bc9954be38620b14cc6890a4cbc633c1062b89c5fe288ce74b9d1974cc0d43c04baeeb2b13231a236fba85 + checksum: 4235444735a1946f8766fe56564a8134c2c36c73e6cf83b3f2ed5624ebc84ff5979506a6a5b39acdb23aa09d442a6af471710ed408ccce533a2c4d2990b9df6a languageName: node linkType: hard @@ -4807,6 +4862,18 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-class-properties@npm:^7.25.4": + version: 7.25.4 + resolution: "@babel/plugin-transform-class-properties@npm:7.25.4" + dependencies: + "@babel/helper-create-class-features-plugin": ^7.25.4 + "@babel/helper-plugin-utils": ^7.24.8 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: b73f7d968639c6c2dfc13f4c5a8fe45cefd260f0faa7890ae12e65d41211072544ff5e128c8b61a86887b29ffd3df8422dbdfbf61648488e71d4bb599c41f4a5 + languageName: node + linkType: hard + "@babel/plugin-transform-class-static-block@npm:^7.24.1": version: 7.24.1 resolution: "@babel/plugin-transform-class-static-block@npm:7.24.1" @@ -4888,19 +4955,19 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.25.0": - version: 7.25.0 - resolution: "@babel/plugin-transform-classes@npm:7.25.0" +"@babel/plugin-transform-classes@npm:^7.25.4": + version: 7.25.4 + resolution: "@babel/plugin-transform-classes@npm:7.25.4" dependencies: "@babel/helper-annotate-as-pure": ^7.24.7 - "@babel/helper-compilation-targets": ^7.24.8 + "@babel/helper-compilation-targets": ^7.25.2 "@babel/helper-plugin-utils": ^7.24.8 "@babel/helper-replace-supers": ^7.25.0 - "@babel/traverse": ^7.25.0 + "@babel/traverse": ^7.25.4 globals: ^11.1.0 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: ff97f168e6a18fa4e7bb439f1a170dc83c470973091c22c74674769350ab572be5af017cdb64fbd261fe99d068a4ee88f1b7fa7f5ab524d84c2f2833b116e577 + checksum: 0bf20e46eeb691bd60cee5d1b01950fc37accec88018ecace25099f7c8d8509c1ac54d11b8caf9f2157c6945969520642a3bc421159c1a14e80224dc9a7611de languageName: node linkType: hard @@ -5854,6 +5921,18 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-private-methods@npm:^7.25.4": + version: 7.25.4 + resolution: "@babel/plugin-transform-private-methods@npm:7.25.4" + dependencies: + "@babel/helper-create-class-features-plugin": ^7.25.4 + "@babel/helper-plugin-utils": ^7.24.8 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: cb1dabfc03e2977990263d65bc8f43a9037dffbb5d9a5f825c00d05447ff68015099408c1531d9dd88f18a41a90f5062dc48f3a1d52b415d2d2ee4827dedff09 + languageName: node + linkType: hard + "@babel/plugin-transform-private-property-in-object@npm:^7.24.1": version: 7.24.1 resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1" @@ -5948,6 +6027,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-display-name@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-react-display-name@npm:7.24.7" + dependencies: + "@babel/helper-plugin-utils": ^7.24.7 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: a05bf83bf5e7b31f7a3b56da1bf8e2eeec76ef52ae44435ceff66363a1717fcda45b7b4b931a2c115982175f481fc3f2d0fab23f0a43c44e6d983afc396858f0 + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx-development@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-transform-react-jsx-development@npm:7.18.6" @@ -5970,6 +6060,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx-development@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-react-jsx-development@npm:7.24.7" + dependencies: + "@babel/plugin-transform-react-jsx": ^7.24.7 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 653d32ea5accb12d016e324ec5a584b60a8f39e60c6a5101194b73553fdefbfa3c3f06ec2410216ec2033fddae181a2f146a1d6ed59f075c488fc4570cad2e7b + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx@npm:^7.18.6": version: 7.20.13 resolution: "@babel/plugin-transform-react-jsx@npm:7.20.13" @@ -6015,6 +6116,21 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx@npm:^7.24.7": + version: 7.25.2 + resolution: "@babel/plugin-transform-react-jsx@npm:7.25.2" + dependencies: + "@babel/helper-annotate-as-pure": ^7.24.7 + "@babel/helper-module-imports": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.8 + "@babel/plugin-syntax-jsx": ^7.24.7 + "@babel/types": ^7.25.2 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 44fbde046385916de19a88d77fed9121c6cc6e25b9cdc38a43d8e514a9b18cf391ed3de25e7d6a8996d3fe4c298e395edf856ee20efffaab3b70f8ce225fffa4 + languageName: node + linkType: hard + "@babel/plugin-transform-react-pure-annotations@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.18.6" @@ -6039,6 +6155,18 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-pure-annotations@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.7" + dependencies: + "@babel/helper-annotate-as-pure": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: d859ada3cbeb829fa3d9978a29b2d36657fcc9dcc1e4c3c3af84ec5a044a8f8db26ada406baa309e5d4d512aca53d07c520d991b891ff943bec7d8f01aae0419 + languageName: node + linkType: hard + "@babel/plugin-transform-regenerator@npm:^7.18.6": version: 7.20.5 resolution: "@babel/plugin-transform-regenerator@npm:7.20.5" @@ -6462,6 +6590,18 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-unicode-sets-regex@npm:^7.25.4": + version: 7.25.4 + resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.25.4" + dependencies: + "@babel/helper-create-regexp-features-plugin": ^7.25.2 + "@babel/helper-plugin-utils": ^7.24.8 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 6d1a7e9fdde4ffc9a81c0e3f261b96a9a0dfe65da282ec96fe63b36c597a7389feac638f1df2a8a4f8c9128337bba8e984f934e9f19077930f33abf1926759ea + languageName: node + linkType: hard + "@babel/polyfill@npm:^7.10.1, @babel/polyfill@npm:^7.4.4": version: 7.12.1 resolution: "@babel/polyfill@npm:7.12.1" @@ -6648,6 +6788,99 @@ __metadata: languageName: node linkType: hard +"@babel/preset-env@npm:^7.23.2": + version: 7.25.4 + resolution: "@babel/preset-env@npm:7.25.4" + dependencies: + "@babel/compat-data": ^7.25.4 + "@babel/helper-compilation-targets": ^7.25.2 + "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-validator-option": ^7.24.8 + "@babel/plugin-bugfix-firefox-class-in-computed-class-key": ^7.25.3 + "@babel/plugin-bugfix-safari-class-field-initializer-scope": ^7.25.0 + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.25.0 + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.24.7 + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": ^7.25.0 + "@babel/plugin-proposal-private-property-in-object": 7.21.0-placeholder-for-preset-env.2 + "@babel/plugin-syntax-async-generators": ^7.8.4 + "@babel/plugin-syntax-class-properties": ^7.12.13 + "@babel/plugin-syntax-class-static-block": ^7.14.5 + "@babel/plugin-syntax-dynamic-import": ^7.8.3 + "@babel/plugin-syntax-export-namespace-from": ^7.8.3 + "@babel/plugin-syntax-import-assertions": ^7.24.7 + "@babel/plugin-syntax-import-attributes": ^7.24.7 + "@babel/plugin-syntax-import-meta": ^7.10.4 + "@babel/plugin-syntax-json-strings": ^7.8.3 + "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4 + "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3 + "@babel/plugin-syntax-numeric-separator": ^7.10.4 + "@babel/plugin-syntax-object-rest-spread": ^7.8.3 + "@babel/plugin-syntax-optional-catch-binding": ^7.8.3 + "@babel/plugin-syntax-optional-chaining": ^7.8.3 + "@babel/plugin-syntax-private-property-in-object": ^7.14.5 + "@babel/plugin-syntax-top-level-await": ^7.14.5 + "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6 + "@babel/plugin-transform-arrow-functions": ^7.24.7 + "@babel/plugin-transform-async-generator-functions": ^7.25.4 + "@babel/plugin-transform-async-to-generator": ^7.24.7 + "@babel/plugin-transform-block-scoped-functions": ^7.24.7 + "@babel/plugin-transform-block-scoping": ^7.25.0 + "@babel/plugin-transform-class-properties": ^7.25.4 + "@babel/plugin-transform-class-static-block": ^7.24.7 + "@babel/plugin-transform-classes": ^7.25.4 + "@babel/plugin-transform-computed-properties": ^7.24.7 + "@babel/plugin-transform-destructuring": ^7.24.8 + "@babel/plugin-transform-dotall-regex": ^7.24.7 + "@babel/plugin-transform-duplicate-keys": ^7.24.7 + "@babel/plugin-transform-duplicate-named-capturing-groups-regex": ^7.25.0 + "@babel/plugin-transform-dynamic-import": ^7.24.7 + "@babel/plugin-transform-exponentiation-operator": ^7.24.7 + "@babel/plugin-transform-export-namespace-from": ^7.24.7 + "@babel/plugin-transform-for-of": ^7.24.7 + "@babel/plugin-transform-function-name": ^7.25.1 + "@babel/plugin-transform-json-strings": ^7.24.7 + "@babel/plugin-transform-literals": ^7.25.2 + "@babel/plugin-transform-logical-assignment-operators": ^7.24.7 + "@babel/plugin-transform-member-expression-literals": ^7.24.7 + "@babel/plugin-transform-modules-amd": ^7.24.7 + "@babel/plugin-transform-modules-commonjs": ^7.24.8 + "@babel/plugin-transform-modules-systemjs": ^7.25.0 + "@babel/plugin-transform-modules-umd": ^7.24.7 + "@babel/plugin-transform-named-capturing-groups-regex": ^7.24.7 + "@babel/plugin-transform-new-target": ^7.24.7 + "@babel/plugin-transform-nullish-coalescing-operator": ^7.24.7 + "@babel/plugin-transform-numeric-separator": ^7.24.7 + "@babel/plugin-transform-object-rest-spread": ^7.24.7 + "@babel/plugin-transform-object-super": ^7.24.7 + "@babel/plugin-transform-optional-catch-binding": ^7.24.7 + "@babel/plugin-transform-optional-chaining": ^7.24.8 + "@babel/plugin-transform-parameters": ^7.24.7 + "@babel/plugin-transform-private-methods": ^7.25.4 + "@babel/plugin-transform-private-property-in-object": ^7.24.7 + "@babel/plugin-transform-property-literals": ^7.24.7 + "@babel/plugin-transform-regenerator": ^7.24.7 + "@babel/plugin-transform-reserved-words": ^7.24.7 + "@babel/plugin-transform-shorthand-properties": ^7.24.7 + "@babel/plugin-transform-spread": ^7.24.7 + "@babel/plugin-transform-sticky-regex": ^7.24.7 + "@babel/plugin-transform-template-literals": ^7.24.7 + "@babel/plugin-transform-typeof-symbol": ^7.24.8 + "@babel/plugin-transform-unicode-escapes": ^7.24.7 + "@babel/plugin-transform-unicode-property-regex": ^7.24.7 + "@babel/plugin-transform-unicode-regex": ^7.24.7 + "@babel/plugin-transform-unicode-sets-regex": ^7.25.4 + "@babel/preset-modules": 0.1.6-no-external-plugins + babel-plugin-polyfill-corejs2: ^0.4.10 + babel-plugin-polyfill-corejs3: ^0.10.6 + babel-plugin-polyfill-regenerator: ^0.6.1 + core-js-compat: ^3.37.1 + semver: ^6.3.1 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 752be43f0b78a2eefe5007076aed3d21b505e1c09d134b61e7de8838f1bbb1e7af81023d39adb14b6eae23727fb5a9fd23f8115a44df043319be22319be17913 + languageName: node + linkType: hard + "@babel/preset-env@npm:^7.24.0": version: 7.24.3 resolution: "@babel/preset-env@npm:7.24.3" @@ -6738,99 +6971,6 @@ __metadata: languageName: node linkType: hard -"@babel/preset-env@npm:^7.24.4": - version: 7.25.3 - resolution: "@babel/preset-env@npm:7.25.3" - dependencies: - "@babel/compat-data": ^7.25.2 - "@babel/helper-compilation-targets": ^7.25.2 - "@babel/helper-plugin-utils": ^7.24.8 - "@babel/helper-validator-option": ^7.24.8 - "@babel/plugin-bugfix-firefox-class-in-computed-class-key": ^7.25.3 - "@babel/plugin-bugfix-safari-class-field-initializer-scope": ^7.25.0 - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.25.0 - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.24.7 - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": ^7.25.0 - "@babel/plugin-proposal-private-property-in-object": 7.21.0-placeholder-for-preset-env.2 - "@babel/plugin-syntax-async-generators": ^7.8.4 - "@babel/plugin-syntax-class-properties": ^7.12.13 - "@babel/plugin-syntax-class-static-block": ^7.14.5 - "@babel/plugin-syntax-dynamic-import": ^7.8.3 - "@babel/plugin-syntax-export-namespace-from": ^7.8.3 - "@babel/plugin-syntax-import-assertions": ^7.24.7 - "@babel/plugin-syntax-import-attributes": ^7.24.7 - "@babel/plugin-syntax-import-meta": ^7.10.4 - "@babel/plugin-syntax-json-strings": ^7.8.3 - "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4 - "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3 - "@babel/plugin-syntax-numeric-separator": ^7.10.4 - "@babel/plugin-syntax-object-rest-spread": ^7.8.3 - "@babel/plugin-syntax-optional-catch-binding": ^7.8.3 - "@babel/plugin-syntax-optional-chaining": ^7.8.3 - "@babel/plugin-syntax-private-property-in-object": ^7.14.5 - "@babel/plugin-syntax-top-level-await": ^7.14.5 - "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6 - "@babel/plugin-transform-arrow-functions": ^7.24.7 - "@babel/plugin-transform-async-generator-functions": ^7.25.0 - "@babel/plugin-transform-async-to-generator": ^7.24.7 - "@babel/plugin-transform-block-scoped-functions": ^7.24.7 - "@babel/plugin-transform-block-scoping": ^7.25.0 - "@babel/plugin-transform-class-properties": ^7.24.7 - "@babel/plugin-transform-class-static-block": ^7.24.7 - "@babel/plugin-transform-classes": ^7.25.0 - "@babel/plugin-transform-computed-properties": ^7.24.7 - "@babel/plugin-transform-destructuring": ^7.24.8 - "@babel/plugin-transform-dotall-regex": ^7.24.7 - "@babel/plugin-transform-duplicate-keys": ^7.24.7 - "@babel/plugin-transform-duplicate-named-capturing-groups-regex": ^7.25.0 - "@babel/plugin-transform-dynamic-import": ^7.24.7 - "@babel/plugin-transform-exponentiation-operator": ^7.24.7 - "@babel/plugin-transform-export-namespace-from": ^7.24.7 - "@babel/plugin-transform-for-of": ^7.24.7 - "@babel/plugin-transform-function-name": ^7.25.1 - "@babel/plugin-transform-json-strings": ^7.24.7 - "@babel/plugin-transform-literals": ^7.25.2 - "@babel/plugin-transform-logical-assignment-operators": ^7.24.7 - "@babel/plugin-transform-member-expression-literals": ^7.24.7 - "@babel/plugin-transform-modules-amd": ^7.24.7 - "@babel/plugin-transform-modules-commonjs": ^7.24.8 - "@babel/plugin-transform-modules-systemjs": ^7.25.0 - "@babel/plugin-transform-modules-umd": ^7.24.7 - "@babel/plugin-transform-named-capturing-groups-regex": ^7.24.7 - "@babel/plugin-transform-new-target": ^7.24.7 - "@babel/plugin-transform-nullish-coalescing-operator": ^7.24.7 - "@babel/plugin-transform-numeric-separator": ^7.24.7 - "@babel/plugin-transform-object-rest-spread": ^7.24.7 - "@babel/plugin-transform-object-super": ^7.24.7 - "@babel/plugin-transform-optional-catch-binding": ^7.24.7 - "@babel/plugin-transform-optional-chaining": ^7.24.8 - "@babel/plugin-transform-parameters": ^7.24.7 - "@babel/plugin-transform-private-methods": ^7.24.7 - "@babel/plugin-transform-private-property-in-object": ^7.24.7 - "@babel/plugin-transform-property-literals": ^7.24.7 - "@babel/plugin-transform-regenerator": ^7.24.7 - "@babel/plugin-transform-reserved-words": ^7.24.7 - "@babel/plugin-transform-shorthand-properties": ^7.24.7 - "@babel/plugin-transform-spread": ^7.24.7 - "@babel/plugin-transform-sticky-regex": ^7.24.7 - "@babel/plugin-transform-template-literals": ^7.24.7 - "@babel/plugin-transform-typeof-symbol": ^7.24.8 - "@babel/plugin-transform-unicode-escapes": ^7.24.7 - "@babel/plugin-transform-unicode-property-regex": ^7.24.7 - "@babel/plugin-transform-unicode-regex": ^7.24.7 - "@babel/plugin-transform-unicode-sets-regex": ^7.24.7 - "@babel/preset-modules": 0.1.6-no-external-plugins - babel-plugin-polyfill-corejs2: ^0.4.10 - babel-plugin-polyfill-corejs3: ^0.10.4 - babel-plugin-polyfill-regenerator: ^0.6.1 - core-js-compat: ^3.37.1 - semver: ^6.3.1 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 9735a44e557f7ef4ade87f59c0d69e4af3383432a23ae7a3cba33e3741bd7812f2d6403a0d94ebfda5f4bd9fdc6250a52c4a156407029f590fde511a792e64e2 - languageName: node - linkType: hard - "@babel/preset-flow@npm:^7.22.15": version: 7.24.7 resolution: "@babel/preset-flow@npm:7.24.7" @@ -6888,6 +7028,22 @@ __metadata: languageName: node linkType: hard +"@babel/preset-react@npm:^7.22.15": + version: 7.24.7 + resolution: "@babel/preset-react@npm:7.24.7" + dependencies: + "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-validator-option": ^7.24.7 + "@babel/plugin-transform-react-display-name": ^7.24.7 + "@babel/plugin-transform-react-jsx": ^7.24.7 + "@babel/plugin-transform-react-jsx-development": ^7.24.7 + "@babel/plugin-transform-react-pure-annotations": ^7.24.7 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 76d0365b6bca808be65c4ccb3f3384c0792084add15eb537f16b3e44184216b82fa37f945339b732ceee6f06e09ba1f39f75c45e69b9811ddcc479f05555ea9c + languageName: node + linkType: hard + "@babel/preset-react@npm:^7.23.3": version: 7.24.1 resolution: "@babel/preset-react@npm:7.24.1" @@ -7012,6 +7168,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.13.10": + version: 7.25.6 + resolution: "@babel/runtime@npm:7.25.6" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: ee1a69d3ac7802803f5ee6a96e652b78b8addc28c6a38c725a4ad7d61a059d9e6cb9f6550ed2f63cce67a1bd82e0b1ef66a1079d895be6bfb536a5cfbd9ccc32 + languageName: node + linkType: hard + "@babel/runtime@npm:^7.14.0": version: 7.23.9 resolution: "@babel/runtime@npm:7.23.9" @@ -7218,6 +7383,17 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.25.6": + version: 7.25.6 + resolution: "@babel/types@npm:7.25.6" + dependencies: + "@babel/helper-string-parser": ^7.24.8 + "@babel/helper-validator-identifier": ^7.24.7 + to-fast-properties: ^2.0.0 + checksum: 9b2f84ff3f874ad05b0b9bf06862c56f478b65781801f82296b4cc01bee39e79c20a7c0a06959fed0ee582c8267e1cb21638318655c5e070b0287242a844d1c9 + languageName: node + linkType: hard + "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -7968,6 +8144,13 @@ __metadata: languageName: node linkType: hard +"@discoveryjs/json-ext@npm:^0.5.3": + version: 0.5.7 + resolution: "@discoveryjs/json-ext@npm:0.5.7" + checksum: 2176d301cc258ea5c2324402997cf8134ebb212469c0d397591636cea8d3c02f2b3cf9fd58dcb748c7a0dade77ebdc1b10284fa63e608c033a1db52fddc69918 + languageName: node + linkType: hard + "@dnd-kit/accessibility@npm:^3.1.0": version: 3.1.0 resolution: "@dnd-kit/accessibility@npm:3.1.0" @@ -8402,163 +8585,156 @@ __metadata: languageName: node linkType: hard -"@esbuild/aix-ppc64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/aix-ppc64@npm:0.21.5" - conditions: os=aix & cpu=ppc64 - languageName: node - linkType: hard - -"@esbuild/android-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/android-arm64@npm:0.21.5" +"@esbuild/android-arm64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/android-arm64@npm:0.18.20" conditions: os=android & cpu=arm64 languageName: node linkType: hard -"@esbuild/android-arm@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/android-arm@npm:0.21.5" +"@esbuild/android-arm@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/android-arm@npm:0.18.20" conditions: os=android & cpu=arm languageName: node linkType: hard -"@esbuild/android-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/android-x64@npm:0.21.5" +"@esbuild/android-x64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/android-x64@npm:0.18.20" conditions: os=android & cpu=x64 languageName: node linkType: hard -"@esbuild/darwin-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/darwin-arm64@npm:0.21.5" +"@esbuild/darwin-arm64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/darwin-arm64@npm:0.18.20" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@esbuild/darwin-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/darwin-x64@npm:0.21.5" +"@esbuild/darwin-x64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/darwin-x64@npm:0.18.20" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@esbuild/freebsd-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/freebsd-arm64@npm:0.21.5" +"@esbuild/freebsd-arm64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/freebsd-arm64@npm:0.18.20" conditions: os=freebsd & cpu=arm64 languageName: node linkType: hard -"@esbuild/freebsd-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/freebsd-x64@npm:0.21.5" +"@esbuild/freebsd-x64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/freebsd-x64@npm:0.18.20" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard -"@esbuild/linux-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-arm64@npm:0.21.5" +"@esbuild/linux-arm64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/linux-arm64@npm:0.18.20" conditions: os=linux & cpu=arm64 languageName: node linkType: hard -"@esbuild/linux-arm@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-arm@npm:0.21.5" +"@esbuild/linux-arm@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/linux-arm@npm:0.18.20" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@esbuild/linux-ia32@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-ia32@npm:0.21.5" +"@esbuild/linux-ia32@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/linux-ia32@npm:0.18.20" conditions: os=linux & cpu=ia32 languageName: node linkType: hard -"@esbuild/linux-loong64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-loong64@npm:0.21.5" +"@esbuild/linux-loong64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/linux-loong64@npm:0.18.20" conditions: os=linux & cpu=loong64 languageName: node linkType: hard -"@esbuild/linux-mips64el@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-mips64el@npm:0.21.5" +"@esbuild/linux-mips64el@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/linux-mips64el@npm:0.18.20" conditions: os=linux & cpu=mips64el languageName: node linkType: hard -"@esbuild/linux-ppc64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-ppc64@npm:0.21.5" +"@esbuild/linux-ppc64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/linux-ppc64@npm:0.18.20" conditions: os=linux & cpu=ppc64 languageName: node linkType: hard -"@esbuild/linux-riscv64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-riscv64@npm:0.21.5" +"@esbuild/linux-riscv64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/linux-riscv64@npm:0.18.20" conditions: os=linux & cpu=riscv64 languageName: node linkType: hard -"@esbuild/linux-s390x@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-s390x@npm:0.21.5" +"@esbuild/linux-s390x@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/linux-s390x@npm:0.18.20" conditions: os=linux & cpu=s390x languageName: node linkType: hard -"@esbuild/linux-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-x64@npm:0.21.5" +"@esbuild/linux-x64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/linux-x64@npm:0.18.20" conditions: os=linux & cpu=x64 languageName: node linkType: hard -"@esbuild/netbsd-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/netbsd-x64@npm:0.21.5" +"@esbuild/netbsd-x64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/netbsd-x64@npm:0.18.20" conditions: os=netbsd & cpu=x64 languageName: node linkType: hard -"@esbuild/openbsd-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/openbsd-x64@npm:0.21.5" +"@esbuild/openbsd-x64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/openbsd-x64@npm:0.18.20" conditions: os=openbsd & cpu=x64 languageName: node linkType: hard -"@esbuild/sunos-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/sunos-x64@npm:0.21.5" +"@esbuild/sunos-x64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/sunos-x64@npm:0.18.20" conditions: os=sunos & cpu=x64 languageName: node linkType: hard -"@esbuild/win32-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/win32-arm64@npm:0.21.5" +"@esbuild/win32-arm64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/win32-arm64@npm:0.18.20" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@esbuild/win32-ia32@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/win32-ia32@npm:0.21.5" +"@esbuild/win32-ia32@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/win32-ia32@npm:0.18.20" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@esbuild/win32-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/win32-x64@npm:0.21.5" +"@esbuild/win32-x64@npm:0.18.20": + version: 0.18.20 + resolution: "@esbuild/win32-x64@npm:0.18.20" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -8612,6 +8788,13 @@ __metadata: languageName: node linkType: hard +"@fal-works/esbuild-plugin-global-externals@npm:^2.1.2": + version: 2.1.2 + resolution: "@fal-works/esbuild-plugin-global-externals@npm:2.1.2" + checksum: c59715902b9062aa7ff38973f298b509499fd146dbf564dc338b3f9e896da5bffb4ca676c27587fde79b3586003e24d65960acb62f009bca43dca34c76f8cbf7 + languageName: node + linkType: hard + "@fastify/accept-negotiator@npm:^1.0.0": version: 1.1.0 resolution: "@fastify/accept-negotiator@npm:1.1.0" @@ -9150,7 +9333,7 @@ __metadata: languageName: node linkType: hard -"@jest/transform@npm:^29.7.0": +"@jest/transform@npm:^29.3.1, @jest/transform@npm:^29.7.0": version: 29.7.0 resolution: "@jest/transform@npm:29.7.0" dependencies: @@ -9360,6 +9543,13 @@ __metadata: languageName: node linkType: hard +"@juggle/resize-observer@npm:^3.3.1": + version: 3.4.0 + resolution: "@juggle/resize-observer@npm:3.4.0" + checksum: 2505028c05cc2e17639fcad06218b1c4b60f932a4ebb4b41ab546ef8c157031ae377e3f560903801f6d01706dbefd4943b6c4704bf19ed86dfa1c62f1473a570 + languageName: node + linkType: hard + "@leichtgewicht/ip-codec@npm:^2.0.1": version: 2.0.5 resolution: "@leichtgewicht/ip-codec@npm:2.0.5" @@ -10513,15 +10703,15 @@ __metadata: languageName: node linkType: hard -"@mdx-js/react@npm:^3.0.0": - version: 3.0.1 - resolution: "@mdx-js/react@npm:3.0.1" +"@mdx-js/react@npm:^2.1.5": + version: 2.3.0 + resolution: "@mdx-js/react@npm:2.3.0" dependencies: "@types/mdx": ^2.0.0 - peerDependencies: "@types/react": ">=16" + peerDependencies: react: ">=16" - checksum: 1063a597264f6a8840aa13274a99beef8983a88dd45b0c5b8e48e6216bc23d33e247da8e2d95d6e1874483f8b4e0903b166ce5046874aa7ffa2b1333057dcddf + checksum: f45fe779556e6cd9a787f711274480e0638b63c460f192ebdcd77cc07ffa61e23c98cb46dd46e577093e1cb4997a232a848d1fb0ba850ae204422cf603add524 languageName: node linkType: hard @@ -10540,6 +10730,17 @@ __metadata: languageName: node linkType: hard +"@ndelangen/get-tarball@npm:^3.0.7": + version: 3.0.9 + resolution: "@ndelangen/get-tarball@npm:3.0.9" + dependencies: + gunzip-maybe: ^1.4.2 + pump: ^3.0.0 + tar-fs: ^2.1.1 + checksum: 7fa8ac40b4e85738a4ee6bf891bc27fce2445b65b4477e0ec86aed0fa62ab18bdf5d193ce04553ad9bfa639e1eef33b8b30da4ef3e7218f12bf95f24c8786e5b + languageName: node + linkType: hard + "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3": version: 2.1.8-no-fsevents.3 resolution: "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3" @@ -11780,6 +11981,43 @@ __metadata: languageName: node linkType: hard +"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11": + version: 0.5.15 + resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.15" + dependencies: + ansi-html: ^0.0.9 + core-js-pure: ^3.23.3 + error-stack-parser: ^2.0.6 + html-entities: ^2.1.0 + loader-utils: ^2.0.4 + schema-utils: ^4.2.0 + source-map: ^0.7.3 + peerDependencies: + "@types/webpack": 4.x || 5.x + react-refresh: ">=0.10.0 <1.0.0" + sockjs-client: ^1.4.0 + type-fest: ">=0.17.0 <5.0.0" + webpack: ">=4.43.0 <6.0.0" + webpack-dev-server: 3.x || 4.x || 5.x + webpack-hot-middleware: 2.x + webpack-plugin-serve: 0.x || 1.x + peerDependenciesMeta: + "@types/webpack": + optional: true + sockjs-client: + optional: true + type-fest: + optional: true + webpack-dev-server: + optional: true + webpack-hot-middleware: + optional: true + webpack-plugin-serve: + optional: true + checksum: 82df6244146209d63a12f0ca2e70b05274ee058c7e6d6eb4ced1228afde3b039a7f3f3cc0c76f1bb4b28deadbcf08bc2821c814f0bfee06979128578300fff3d + languageName: node + linkType: hard + "@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.3": version: 0.5.10 resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.10" @@ -12015,6 +12253,24 @@ __metadata: languageName: node linkType: hard +"@radix-ui/number@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/number@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + checksum: 621ea8b7d4195d1a65a9c0aee918e8335e7f198088eec91577512c89c2ba3a3bab4a767cfb872a2b9c3092a78ff41cad9a924845a939f6bb87fe9356241ea0ea + languageName: node + linkType: hard + +"@radix-ui/primitive@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/primitive@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + checksum: 2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1 + languageName: node + linkType: hard + "@radix-ui/primitive@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/primitive@npm:1.1.0" @@ -12041,6 +12297,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-arrow@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-arrow@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-primitive": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 8cca086f0dbb33360e3c0142adf72f99fc96352d7086d6c2356dbb2ea5944cfb720a87d526fc48087741c602cd8162ca02b0af5e6fdf5f56d20fddb44db8b4c3 + languageName: node + linkType: hard + "@radix-ui/react-arrow@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-arrow@npm:1.1.0" @@ -12082,6 +12358,29 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-collection@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-collection@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-slot": 1.0.2 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: acfbc9b0b2c553d343c22f02c9f098bc5cfa99e6e48df91c0d671855013f8b877ade9c657b7420a7aa523b5aceadea32a60dd72c23b1291f415684fb45d00cff + languageName: node + linkType: hard + "@radix-ui/react-collection@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-collection@npm:1.1.0" @@ -12104,6 +12403,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-compose-refs@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-compose-refs@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8 + languageName: node + linkType: hard + "@radix-ui/react-compose-refs@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-compose-refs@npm:1.1.0" @@ -12117,6 +12431,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-context@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-context@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 60e9b81d364f40c91a6213ec953f7c64fcd9d75721205a494a5815b3e5ae0719193429b62ee6c7002cd6aaf70f8c0e2f08bdbaba9ffcc233044d32b56d2127d1 + languageName: node + linkType: hard + "@radix-ui/react-context@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-context@npm:1.1.0" @@ -12130,6 +12459,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-direction@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-direction@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 5336a8b0d4f1cde585d5c2b4448af7b3d948bb63a1aadb37c77771b0e5902dc6266e409cf35fd0edaca7f33e26424be19e64fb8f9d7f7be2d6f1714ea2764210 + languageName: node + linkType: hard + "@radix-ui/react-direction@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-direction@npm:1.1.0" @@ -12143,6 +12487,30 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-dismissable-layer@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-dismissable-layer@npm:1.0.4" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-escape-keydown": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: ea86004ed56a10609dd84eef39dc1e57b400d687a35be41bb4aaa06dc7ad6dbd0a8da281e08c8c077fdbd523122e4d860cb7438a60c664f024f77c8b41299ec6 + languageName: node + linkType: hard + "@radix-ui/react-dismissable-layer@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-dismissable-layer@npm:1.1.0" @@ -12166,6 +12534,59 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-focus-guards@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-focus-guards@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7 + languageName: node + linkType: hard + +"@radix-ui/react-focus-scope@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-focus-scope@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: e5b1a089071fbe77aca11124a4ad9623fc2bcaf4c019759b0cd044bf0878ecc924131ee09c6a22d38a3f094684ef68ed18fa65c8d891918412e0afc685a464e0 + languageName: node + linkType: hard + +"@radix-ui/react-id@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-id@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-use-layout-effect": 1.0.1 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe + languageName: node + linkType: hard + "@radix-ui/react-id@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-id@npm:1.1.0" @@ -12200,6 +12621,35 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-popper@npm:1.1.2": + version: 1.1.2 + resolution: "@radix-ui/react-popper@npm:1.1.2" + dependencies: + "@babel/runtime": ^7.13.10 + "@floating-ui/react-dom": ^2.0.0 + "@radix-ui/react-arrow": 1.0.3 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-layout-effect": 1.0.1 + "@radix-ui/react-use-rect": 1.0.1 + "@radix-ui/react-use-size": 1.0.1 + "@radix-ui/rect": 1.0.1 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 4929daa0d1cccada3cff50de0e00c0d186ffea97a5f28545c77fa85ff9bc5c105a54dddac400c2e2dcac631f0f7ea88e59f2e5ad0f80bb2cb7b62cc7cd30400f + languageName: node + linkType: hard + "@radix-ui/react-popper@npm:1.2.0": version: 1.2.0 resolution: "@radix-ui/react-popper@npm:1.2.0" @@ -12228,6 +12678,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-portal@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-portal@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-primitive": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: d352bcd6ad65eb43c9e0d72d0755c2aae85e03fb287770866262be3a2d5302b2885aee3cd99f2bbf62ecd14fcb1460703f1dcdc40351f77ad887b931c6f0012a + languageName: node + linkType: hard + "@radix-ui/react-portal@npm:1.1.1": version: 1.1.1 resolution: "@radix-ui/react-portal@npm:1.1.1" @@ -12268,6 +12738,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-primitive@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-primitive@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-slot": 1.0.2 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 9402bc22923c8e5c479051974a721c301535c36521c0237b83e5fa213d013174e77f3ad7905e6d60ef07e14f88ec7f4ea69891dc7a2b39047f8d3640e8f8d713 + languageName: node + linkType: hard + "@radix-ui/react-primitive@npm:2.0.0": version: 2.0.0 resolution: "@radix-ui/react-primitive@npm:2.0.0" @@ -12314,6 +12804,81 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-select@npm:^1.2.2": + version: 1.2.2 + resolution: "@radix-ui/react-select@npm:1.2.2" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/number": 1.0.1 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-collection": 1.0.3 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-direction": 1.0.1 + "@radix-ui/react-dismissable-layer": 1.0.4 + "@radix-ui/react-focus-guards": 1.0.1 + "@radix-ui/react-focus-scope": 1.0.3 + "@radix-ui/react-id": 1.0.1 + "@radix-ui/react-popper": 1.1.2 + "@radix-ui/react-portal": 1.0.3 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-slot": 1.0.2 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-controllable-state": 1.0.1 + "@radix-ui/react-use-layout-effect": 1.0.1 + "@radix-ui/react-use-previous": 1.0.1 + "@radix-ui/react-visually-hidden": 1.0.3 + aria-hidden: ^1.1.1 + react-remove-scroll: 2.5.5 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: af7b63cc9e2c6006ec08163392d244941e9e03534e7add1b7c5a86059d0eb8a0398d4f3e80d43ff22126874a02b985e44f1722d1de9218922f7aa653d09412e3 + languageName: node + linkType: hard + +"@radix-ui/react-separator@npm:1.1.0": + version: 1.1.0 + resolution: "@radix-ui/react-separator@npm:1.1.0" + dependencies: + "@radix-ui/react-primitive": 2.0.0 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: a7c3445603a45075dcf3559eb8f2f2e8545afeae253e67d0bde736c66b293c601974a1d6f9d7be1802d83869933dc120a7389ab98189ceb9a24659737dde0162 + languageName: node + linkType: hard + +"@radix-ui/react-slot@npm:1.0.2": + version: 1.0.2 + resolution: "@radix-ui/react-slot@npm:1.0.2" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-compose-refs": 1.0.1 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: edf5edf435ff594bea7e198bf16d46caf81b6fb559493acad4fa8c308218896136acb16f9b7238c788fd13e94a904f2fd0b6d834e530e4cae94522cdb8f77ce9 + languageName: node + linkType: hard + "@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.1.0": version: 1.1.0 resolution: "@radix-ui/react-slot@npm:1.1.0" @@ -12380,6 +12945,77 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-toggle-group@npm:1.1.0": + version: 1.1.0 + resolution: "@radix-ui/react-toggle-group@npm:1.1.0" + dependencies: + "@radix-ui/primitive": 1.1.0 + "@radix-ui/react-context": 1.1.0 + "@radix-ui/react-direction": 1.1.0 + "@radix-ui/react-primitive": 2.0.0 + "@radix-ui/react-roving-focus": 1.1.0 + "@radix-ui/react-toggle": 1.1.0 + "@radix-ui/react-use-controllable-state": 1.1.0 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: c665a38b01fc3fc816a63c9d8d689814d17803c4075f3e383182d7613e6552b5bbf0584f68c6e98af8efd738ceba9869ef5b29419f76a80b64e3a7d61b2b41ef + languageName: node + linkType: hard + +"@radix-ui/react-toggle@npm:1.1.0": + version: 1.1.0 + resolution: "@radix-ui/react-toggle@npm:1.1.0" + dependencies: + "@radix-ui/primitive": 1.1.0 + "@radix-ui/react-primitive": 2.0.0 + "@radix-ui/react-use-controllable-state": 1.1.0 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 556818c9d57c024cca0533c859464ee101b69c527d2f2791fa97175fdabea4320eb0078e84bb73f2c5d5794a8a0069666bbdcfe07067fe02ebe4950917ca8e3a + languageName: node + linkType: hard + +"@radix-ui/react-toolbar@npm:^1.0.4": + version: 1.1.0 + resolution: "@radix-ui/react-toolbar@npm:1.1.0" + dependencies: + "@radix-ui/primitive": 1.1.0 + "@radix-ui/react-context": 1.1.0 + "@radix-ui/react-direction": 1.1.0 + "@radix-ui/react-primitive": 2.0.0 + "@radix-ui/react-roving-focus": 1.1.0 + "@radix-ui/react-separator": 1.1.0 + "@radix-ui/react-toggle-group": 1.1.0 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 5453bdfd697bf5bf4ec3f86d976799d2a9e39c6a57b9d614aca7077df0f8031efb6f59ac993503152aa4e5e7988c0818212340ea764c0a92ceb204e630b58709 + languageName: node + linkType: hard + "@radix-ui/react-tooltip@npm:^1.1.2": version: 1.1.2 resolution: "@radix-ui/react-tooltip@npm:1.1.2" @@ -12410,6 +13046,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-callback-ref@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c + languageName: node + linkType: hard + "@radix-ui/react-use-callback-ref@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-use-callback-ref@npm:1.1.0" @@ -12423,6 +13074,22 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-controllable-state@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-use-callback-ref": 1.0.1 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9 + languageName: node + linkType: hard + "@radix-ui/react-use-controllable-state@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-use-controllable-state@npm:1.1.0" @@ -12438,6 +13105,22 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-escape-keydown@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-use-callback-ref": 1.0.1 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8 + languageName: node + linkType: hard + "@radix-ui/react-use-escape-keydown@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-use-escape-keydown@npm:1.1.0" @@ -12453,6 +13136,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-layout-effect@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5 + languageName: node + linkType: hard + "@radix-ui/react-use-layout-effect@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-use-layout-effect@npm:1.1.0" @@ -12466,6 +13164,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-previous@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-previous@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 66b4312e857c58b75f3bf62a2048ef090b79a159e9da06c19a468c93e62336969c33dbef60ff16969f00b20386cc25d138f6a353f1658b35baac0a6eff4761b9 + languageName: node + linkType: hard + "@radix-ui/react-use-previous@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-use-previous@npm:1.1.0" @@ -12479,6 +13192,22 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-rect@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-rect@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/rect": 1.0.1 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 433f07e61e04eb222349825bb05f3591fca131313a1d03709565d6226d8660bd1d0423635553f95ee4fcc25c8f2050972d848808d753c388e2a9ae191ebf17f3 + languageName: node + linkType: hard + "@radix-ui/react-use-rect@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-use-rect@npm:1.1.0" @@ -12494,6 +13223,22 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-size@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-size@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-use-layout-effect": 1.0.1 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 6cc150ad1e9fa85019c225c5a5d50a0af6cdc4653dad0c21b4b40cd2121f36ee076db326c43e6bc91a69766ccff5a84e917d27970176b592577deea3c85a3e26 + languageName: node + linkType: hard + "@radix-ui/react-use-size@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-use-size@npm:1.1.0" @@ -12509,6 +13254,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-visually-hidden@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-visually-hidden@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-primitive": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 2e9d0c8253f97e7d6ffb2e52a5cfd40ba719f813b39c3e2e42c496d54408abd09ef66b5aec4af9b8ab0553215e32452a5d0934597a49c51dd90dc39181ed0d57 + languageName: node + linkType: hard + "@radix-ui/react-visually-hidden@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-visually-hidden@npm:1.1.0" @@ -12528,6 +13293,15 @@ __metadata: languageName: node linkType: hard +"@radix-ui/rect@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/rect@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + checksum: aeec13b234a946052512d05239067d2d63422f9ec70bf2fe7acfd6b9196693fc33fbaf43c2667c167f777d90a095c6604eb487e0bce79e230b6df0f6cacd6a55 + languageName: node + linkType: hard + "@radix-ui/rect@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/rect@npm:1.1.0" @@ -13189,13 +13963,6 @@ __metadata: languageName: node linkType: hard -"@sindresorhus/merge-streams@npm:^2.1.0": - version: 2.3.0 - resolution: "@sindresorhus/merge-streams@npm:2.3.0" - checksum: e989d53dee68d7e49b4ac02ae49178d561c461144cea83f66fa91ff012d981ad0ad2340cbd13f2fdb57989197f5c987ca22a74eb56478626f04e79df84291159 - languageName: node - linkType: hard - "@sindresorhus/merge-streams@npm:^4.0.0": version: 4.0.0 resolution: "@sindresorhus/merge-streams@npm:4.0.0" @@ -13923,223 +14690,234 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-a11y@npm:^8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-a11y@npm:8.2.9" +"@storybook/addon-a11y@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-a11y@npm:7.6.20" dependencies: - "@storybook/addon-highlight": 8.2.9 + "@storybook/addon-highlight": 7.6.20 axe-core: ^4.2.0 - peerDependencies: - storybook: ^8.2.9 - checksum: ccef3d51f276df8ebf7982df45090d0af1f976550ff85d69df271df6d5bb10dece230e60b7c944306fef0ec935423359adccdd2a09891d853aa6b0deefc7726c + checksum: 89ce3eba360312c6e777e6a5ea00ec6c7cdcf5d1e7704aee70d4665d1dd41e5785e5a4f8c856242af6336a72c636ac832cdae49d06f1bce4e19819f29e62d09d languageName: node linkType: hard -"@storybook/addon-actions@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-actions@npm:8.2.9" +"@storybook/addon-actions@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-actions@npm:7.6.20" dependencies: + "@storybook/core-events": 7.6.20 "@storybook/global": ^5.0.0 "@types/uuid": ^9.0.1 dequal: ^2.0.2 polished: ^4.2.2 uuid: ^9.0.0 - peerDependencies: - storybook: ^8.2.9 - checksum: 3d9cdc9bcfb4fe2cfc9baece1e29ec77fefbcb92c0c77edd9fcc54db506e55dba419e5b8cb2fe49073108a00e0e808e0d55eceb6772071ed9add864cc9b34fbf + checksum: df1eac09e3d99778e23db7745f5125f0a8463c14ae28d8e3dfc90c8fcbf7ac527b2ac6f95b1e95f0faadfa257553daf4d339abd1cc34b3acc26a2a9f8cc84d17 languageName: node linkType: hard -"@storybook/addon-backgrounds@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-backgrounds@npm:8.2.9" +"@storybook/addon-backgrounds@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-backgrounds@npm:7.6.20" dependencies: "@storybook/global": ^5.0.0 memoizerific: ^1.11.3 ts-dedent: ^2.0.0 - peerDependencies: - storybook: ^8.2.9 - checksum: c1ad9c1b1b14dc20be0a36d90821d68d0c8e43cf7621bac5d2216bb20f855ae0824dd8259fb7188cafe8ea5eaf35e08dfa0d5deeb332e29db000fb514c7ff718 + checksum: ee05315b44edc9e91db4cfd426250f7ddd37f103b9adc7661de8a38272bfa6b2396dd9fc50e592f1b04c4613efb1a3a372844a89b03717b59bc29cbad912de17 languageName: node linkType: hard -"@storybook/addon-controls@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-controls@npm:8.2.9" +"@storybook/addon-controls@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-controls@npm:7.6.20" dependencies: - dequal: ^2.0.2 + "@storybook/blocks": 7.6.20 lodash: ^4.17.21 ts-dedent: ^2.0.0 - peerDependencies: - storybook: ^8.2.9 - checksum: 0834692a06a09e5795f5e909081f3c7f8b070afbee4c19c3bba291f7d07c88a93f399146499242f533effa31b237937748a4758c072e44262728e4bbbe3cb243 + checksum: cfc6f14933c131c961ee96b4cdaf7339479dd18d152b08b476c7f43dace9e0ba30668f77e190c0282350cd642ed6a2544f68d1cb421503ceff2f290166154763 languageName: node linkType: hard -"@storybook/addon-docs@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-docs@npm:8.2.9" +"@storybook/addon-docs@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-docs@npm:7.6.20" dependencies: - "@babel/core": ^7.24.4 - "@mdx-js/react": ^3.0.0 - "@storybook/blocks": 8.2.9 - "@storybook/csf-plugin": 8.2.9 + "@jest/transform": ^29.3.1 + "@mdx-js/react": ^2.1.5 + "@storybook/blocks": 7.6.20 + "@storybook/client-logger": 7.6.20 + "@storybook/components": 7.6.20 + "@storybook/csf-plugin": 7.6.20 + "@storybook/csf-tools": 7.6.20 "@storybook/global": ^5.0.0 - "@storybook/react-dom-shim": 8.2.9 - "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + "@storybook/mdx2-csf": ^1.0.0 + "@storybook/node-logger": 7.6.20 + "@storybook/postinstall": 7.6.20 + "@storybook/preview-api": 7.6.20 + "@storybook/react-dom-shim": 7.6.20 + "@storybook/theming": 7.6.20 + "@storybook/types": 7.6.20 fs-extra: ^11.1.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - rehype-external-links: ^3.0.0 - rehype-slug: ^6.0.0 + remark-external-links: ^8.0.0 + remark-slug: ^6.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.2.9 - checksum: 40eb37c287df1b89ced0bee511146bccaf4279001f4460947bd852d14f5e41d21b80ebd00881b571b2a7024b89bbfde002f099c47b5f41a8b7164b554830d3fb - languageName: node - linkType: hard - -"@storybook/addon-essentials@npm:^8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-essentials@npm:8.2.9" - dependencies: - "@storybook/addon-actions": 8.2.9 - "@storybook/addon-backgrounds": 8.2.9 - "@storybook/addon-controls": 8.2.9 - "@storybook/addon-docs": 8.2.9 - "@storybook/addon-highlight": 8.2.9 - "@storybook/addon-measure": 8.2.9 - "@storybook/addon-outline": 8.2.9 - "@storybook/addon-toolbars": 8.2.9 - "@storybook/addon-viewport": 8.2.9 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: c7a439215dc363bc40570797aedcee1e91ab6e1a72c41878abe8da7526d9cc5eb22aafe1def189d0a64db5f6e679c5ad307f7ca2a34fded7975d602238377df4 + languageName: node + linkType: hard + +"@storybook/addon-essentials@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-essentials@npm:7.6.20" + dependencies: + "@storybook/addon-actions": 7.6.20 + "@storybook/addon-backgrounds": 7.6.20 + "@storybook/addon-controls": 7.6.20 + "@storybook/addon-docs": 7.6.20 + "@storybook/addon-highlight": 7.6.20 + "@storybook/addon-measure": 7.6.20 + "@storybook/addon-outline": 7.6.20 + "@storybook/addon-toolbars": 7.6.20 + "@storybook/addon-viewport": 7.6.20 + "@storybook/core-common": 7.6.20 + "@storybook/manager-api": 7.6.20 + "@storybook/node-logger": 7.6.20 + "@storybook/preview-api": 7.6.20 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.2.9 - checksum: 70cc46b9188cf61a30af578fa79d15135e6c51e9406f9d044668fd395c4c93b9a408481039da6dc824100016dd76da711daef79897252e982382d2262292103d + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: caa019515d0cf6b628a13611d231145254ca4c69aa01de78f597aef32425cdd1b227ec916f45e56ccf30790503e552adc931d44cb1e76e11a24a19378638bfdd languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-highlight@npm:8.2.9" +"@storybook/addon-highlight@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-highlight@npm:7.6.20" dependencies: "@storybook/global": ^5.0.0 - peerDependencies: - storybook: ^8.2.9 - checksum: 119623ff7396473ea052691c8a8924065347bc1bd6b43d75491b0751f6ebaec4f129b764765079c03a9b5105a44bab5d08f65a0a8d6b9c527667f7273cb0881b + checksum: f4dabe540d26685bea5b44261ea3863a0f8a0a5828bf832ca4361d7567432dc70e2f865e1d48cd2467aa4844aae4d27ed0e10b26147bf09c39b7a454ac8b66da languageName: node linkType: hard -"@storybook/addon-measure@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-measure@npm:8.2.9" +"@storybook/addon-measure@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-measure@npm:7.6.20" dependencies: "@storybook/global": ^5.0.0 tiny-invariant: ^1.3.1 - peerDependencies: - storybook: ^8.2.9 - checksum: 71c16380a0fce731a588d5341726bb4ab592e499d1e48b16b2a652bf7908cc41fa8eb6a20aec961bf3ac7a65821bb3a33e9967a39a66f888791a5c6bebc50f08 + checksum: 68de17dff3e8ce891d8c3bb09ab977014b6f6ef04118fc44ee4847b1449097f4bae60024c20790c9b4e56e608aafe397f9cd61b2818359e17bfe2d90cf667425 languageName: node linkType: hard -"@storybook/addon-outline@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-outline@npm:8.2.9" +"@storybook/addon-outline@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-outline@npm:7.6.20" dependencies: "@storybook/global": ^5.0.0 ts-dedent: ^2.0.0 - peerDependencies: - storybook: ^8.2.9 - checksum: e1a60d7ededadf7dd9a9e0c20945c18416889e2b0607cb92cb4a09a7f97ceeafa74de5d387d781a88a4422e2e3052c51b2a9a157879c381eaf82ffd1116edc31 + checksum: 74fc9bcc7280f8d9014a90d1136aaa6466d8f271178e6ab51dc222b638101459aed947dbb387bdd8efbb54d9d3177018bd73f2eca91a55ff5a138d6496a4137b languageName: node linkType: hard -"@storybook/addon-styling-webpack@npm:^1.0.0": - version: 1.0.0 - resolution: "@storybook/addon-styling-webpack@npm:1.0.0" - dependencies: - "@storybook/node-logger": ^8.0.0-alpha.10 - peerDependencies: - webpack: ^5.0.0 - checksum: fa907064a42b255fad274ae898b48cb1ce53d969cf79b48e8e0d761ae05500ab9e486d54b2aac625f57c78347daa51828a864497955cd4b0b650e67e8196a341 +"@storybook/addon-toolbars@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-toolbars@npm:7.6.20" + checksum: aa2c057ceb2db93a2d6d57ded399a2978af0547aa69b57f26dcb51d6d0168073c5c910191fc5517a3505cf67d87bd7840cc659ebe50971ef6496877ca92344e8 languageName: node linkType: hard -"@storybook/addon-toolbars@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-toolbars@npm:8.2.9" - peerDependencies: - storybook: ^8.2.9 - checksum: fd77ce2087c88c518ac3b740f45bdcaf2ea42f766116f572c0edc02fa33531930de71623791a791121142dcde78c0d3d2b4549d0d22d099a8728cf4b8434a1e2 - languageName: node - linkType: hard - -"@storybook/addon-viewport@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/addon-viewport@npm:8.2.9" +"@storybook/addon-viewport@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/addon-viewport@npm:7.6.20" dependencies: memoizerific: ^1.11.3 - peerDependencies: - storybook: ^8.2.9 - checksum: a7817d4c643d351da6a43f432cf03c91625dccf56b57d597550c7d5669f1d461944e93b7f4a9d00cfbdccaf3fb41cfa986b91c06477d00dbbf9dd9e86930bec3 + checksum: 474e5ec3dd05f9ba1a2b0ca0eaac2f641eab765a80b3e1e25b4984db3557a251de0c663ac3b8c6bd007f581bc45fd610e619dfb7e6b3089669de1b9123e71207 languageName: node linkType: hard -"@storybook/addon-webpack5-compiler-swc@npm:^1.0.4": - version: 1.0.5 - resolution: "@storybook/addon-webpack5-compiler-swc@npm:1.0.5" +"@storybook/blocks@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/blocks@npm:7.6.20" dependencies: - "@swc/core": ^1.7.3 - swc-loader: ^0.2.3 - checksum: ed3177427f528cb1842bc57c9bc32501140c9a5bdf14926959cba024d38e5d6a24bccb6c977666e3a0a58dc7890feb92c616ec1f43bed33e691cbb1c5a575bd0 - languageName: node - linkType: hard - -"@storybook/blocks@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/blocks@npm:8.2.9" - dependencies: - "@storybook/csf": 0.1.11 + "@storybook/channels": 7.6.20 + "@storybook/client-logger": 7.6.20 + "@storybook/components": 7.6.20 + "@storybook/core-events": 7.6.20 + "@storybook/csf": ^0.1.2 + "@storybook/docs-tools": 7.6.20 "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.2.5 + "@storybook/manager-api": 7.6.20 + "@storybook/preview-api": 7.6.20 + "@storybook/theming": 7.6.20 + "@storybook/types": 7.6.20 "@types/lodash": ^4.14.167 color-convert: ^2.0.1 dequal: ^2.0.2 lodash: ^4.17.21 - markdown-to-jsx: ^7.4.5 + markdown-to-jsx: ^7.1.8 memoizerific: ^1.11.3 polished: ^4.2.2 react-colorful: ^5.1.2 telejson: ^7.2.0 + tocbot: ^4.20.1 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.9 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: 6d55597046905aabd6af95180a66ccb3944f872d0d3f624e5e33f2f939dbf040b0ad2921d44d1612e31e24afaa4f1000a805573854916137d9212b35e7249f16 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 328e35d0507241239a563f4a6096725cbda0ffc39829850d74b1855671b54a474de13960be717c63e0a5441522083dfd4fb93e26c4d120ed617e329ef7c67363 + languageName: node + linkType: hard + +"@storybook/builder-manager@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/builder-manager@npm:7.6.20" + dependencies: + "@fal-works/esbuild-plugin-global-externals": ^2.1.2 + "@storybook/core-common": 7.6.20 + "@storybook/manager": 7.6.20 + "@storybook/node-logger": 7.6.20 + "@types/ejs": ^3.1.1 + "@types/find-cache-dir": ^3.2.1 + "@yarnpkg/esbuild-plugin-pnp": ^3.0.0-rc.10 + browser-assert: ^1.2.1 + ejs: ^3.1.8 + esbuild: ^0.18.0 + esbuild-plugin-alias: ^0.2.1 + express: ^4.17.3 + find-cache-dir: ^3.0.0 + fs-extra: ^11.1.0 + process: ^0.11.10 + util: ^0.12.4 + checksum: 3a0129e8e29d85c2e6cb4ec3c832e59a0d66075b8a48cab30bc3aa997ac019fc4fecaca5c12ad0758a66fd6dfc52c3e993cb15911ac949fae74ec21dcbc3f84e languageName: node linkType: hard -"@storybook/builder-webpack5@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/builder-webpack5@npm:8.2.9" +"@storybook/builder-webpack5@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/builder-webpack5@npm:7.6.20" dependencies: - "@storybook/core-webpack": 8.2.9 + "@babel/core": ^7.23.2 + "@storybook/channels": 7.6.20 + "@storybook/client-logger": 7.6.20 + "@storybook/core-common": 7.6.20 + "@storybook/core-events": 7.6.20 + "@storybook/core-webpack": 7.6.20 + "@storybook/node-logger": 7.6.20 + "@storybook/preview": 7.6.20 + "@storybook/preview-api": 7.6.20 + "@swc/core": ^1.3.82 "@types/node": ^18.0.0 "@types/semver": ^7.3.4 + babel-loader: ^9.0.0 browser-assert: ^1.2.1 case-sensitive-paths-webpack-plugin: ^2.4.0 cjs-module-lexer: ^1.2.3 constants-browserify: ^1.0.0 css-loader: ^6.7.1 - es-module-lexer: ^1.5.0 - express: ^4.19.2 + es-module-lexer: ^1.4.1 + express: ^4.17.3 fork-ts-checker-webpack-plugin: ^8.0.0 fs-extra: ^11.1.0 html-webpack-plugin: ^5.5.0 @@ -14148,97 +14926,279 @@ __metadata: process: ^0.11.10 semver: ^7.3.7 style-loader: ^3.3.1 + swc-loader: ^0.2.3 terser-webpack-plugin: ^5.3.1 ts-dedent: ^2.0.0 url: ^0.11.0 util: ^0.12.4 util-deprecate: ^1.0.2 webpack: 5 - webpack-dev-middleware: ^6.1.2 + webpack-dev-middleware: ^6.1.1 webpack-hot-middleware: ^2.25.1 - webpack-virtual-modules: ^0.6.0 - peerDependencies: - storybook: ^8.2.9 + webpack-virtual-modules: ^0.5.0 peerDependenciesMeta: typescript: optional: true - checksum: 042329eb967d32117dee755eae1ac5291ecbc0a0b961c280a59c3d430f8c41a844cbcd7db1ff8c3d18b539684c37f21cb00c849e2b76999fdef87f2a077e38e5 + checksum: 0f3becb68c05de9cba850f449ec5364fa86dce72a04acee1eb90123066795016213bc4dd0c0bca8eb6d0a2fe41298648fc9774b280012e3bb75fa017972bf209 languageName: node linkType: hard -"@storybook/codemod@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/codemod@npm:8.2.9" +"@storybook/channels@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/channels@npm:7.6.20" dependencies: - "@babel/core": ^7.24.4 - "@babel/preset-env": ^7.24.4 - "@babel/types": ^7.24.0 - "@storybook/core": 8.2.9 - "@storybook/csf": 0.1.11 + "@storybook/client-logger": 7.6.20 + "@storybook/core-events": 7.6.20 + "@storybook/global": ^5.0.0 + qs: ^6.10.0 + telejson: ^7.2.0 + tiny-invariant: ^1.3.1 + checksum: e600949b77b8ae2c865eab8e2f4022893843932c76f9f49f2ef6d8a8f62114f979d38fe93fed2d8899fa892bb1dcd353c81e292515a7bd8fbc944629939574b0 + languageName: node + linkType: hard + +"@storybook/cli@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/cli@npm:7.6.20" + dependencies: + "@babel/core": ^7.23.2 + "@babel/preset-env": ^7.23.2 + "@babel/types": ^7.23.0 + "@ndelangen/get-tarball": ^3.0.7 + "@storybook/codemod": 7.6.20 + "@storybook/core-common": 7.6.20 + "@storybook/core-events": 7.6.20 + "@storybook/core-server": 7.6.20 + "@storybook/csf-tools": 7.6.20 + "@storybook/node-logger": 7.6.20 + "@storybook/telemetry": 7.6.20 + "@storybook/types": 7.6.20 + "@types/semver": ^7.3.4 + "@yarnpkg/fslib": 2.10.3 + "@yarnpkg/libzip": 2.3.0 + chalk: ^4.1.0 + commander: ^6.2.1 + cross-spawn: ^7.0.3 + detect-indent: ^6.1.0 + envinfo: ^7.7.3 + execa: ^5.0.0 + express: ^4.17.3 + find-up: ^5.0.0 + fs-extra: ^11.1.0 + get-npm-tarball-url: ^2.0.3 + get-port: ^5.1.1 + giget: ^1.0.0 + globby: ^11.0.2 + jscodeshift: ^0.15.1 + leven: ^3.1.0 + ora: ^5.4.1 + prettier: ^2.8.0 + prompts: ^2.4.0 + puppeteer-core: ^2.1.1 + read-pkg-up: ^7.0.1 + semver: ^7.3.7 + strip-json-comments: ^3.0.1 + tempy: ^1.0.1 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + bin: + getstorybook: ./bin/index.js + sb: ./bin/index.js + checksum: a3e0334c9521ae78783de3f161e9a05def1fa0b4fbf38818b1cd5ae5083e0bf050171ba16b786168ea86af5bd0e57d156213527654cdfc649b3fb4fcffeda052 + languageName: node + linkType: hard + +"@storybook/client-logger@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/client-logger@npm:7.6.20" + dependencies: + "@storybook/global": ^5.0.0 + checksum: 98bf603df918a74bc5b34f344ba70356d8e2b889d8a5cbfb7a03c23dcf409029800319e5d3e0ff7e95545a2d4a989a53c2097eb7a36de808d287d466d4d92573 + languageName: node + linkType: hard + +"@storybook/codemod@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/codemod@npm:7.6.20" + dependencies: + "@babel/core": ^7.23.2 + "@babel/preset-env": ^7.23.2 + "@babel/types": ^7.23.0 + "@storybook/csf": ^0.1.2 + "@storybook/csf-tools": 7.6.20 + "@storybook/node-logger": 7.6.20 + "@storybook/types": 7.6.20 "@types/cross-spawn": ^6.0.2 cross-spawn: ^7.0.3 - globby: ^14.0.1 + globby: ^11.0.2 jscodeshift: ^0.15.1 lodash: ^4.17.21 - prettier: ^3.1.1 - recast: ^0.23.5 - tiny-invariant: ^1.3.1 - checksum: 447d8bac0943e503f1ed9f437f48ca79adc596197bd1fb118387813a64ce86587065a4745bd69c652177f5a1bf55da9a9ea98cb51d259adab8bab093014d2b47 + prettier: ^2.8.0 + recast: ^0.23.1 + checksum: e8a507ea29764d0b73ca39046b8f47518ebfed1fcd8e3c572d1cc16d285a60f50d950bc177bbd9215df2a36abcaafb536f228b419218a47720154c4ab27db20b languageName: node linkType: hard -"@storybook/components@npm:^8.2.9": - version: 8.2.9 - resolution: "@storybook/components@npm:8.2.9" +"@storybook/components@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/components@npm:7.6.20" + dependencies: + "@radix-ui/react-select": ^1.2.2 + "@radix-ui/react-toolbar": ^1.0.4 + "@storybook/client-logger": 7.6.20 + "@storybook/csf": ^0.1.2 + "@storybook/global": ^5.0.0 + "@storybook/theming": 7.6.20 + "@storybook/types": 7.6.20 + memoizerific: ^1.11.3 + use-resize-observer: ^9.1.0 + util-deprecate: ^1.0.2 peerDependencies: - storybook: ^8.2.9 - checksum: 32153df19777ea751d1adb33da6e92b5647d19fd924753b2ca1c80bcc102ee0489eac7b02914a2e56406233940f6eca7f1aa3ba0c441a164cabc954679a67869 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 8f8bae3fb7a4d60b91c7d1e68126bea3684158991bc935618f06e9f196c57081e6a143cf540ead58ec4e8633cb5b723c56c87dd60f77958a00db2ab789e87388 + languageName: node + linkType: hard + +"@storybook/core-client@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/core-client@npm:7.6.20" + dependencies: + "@storybook/client-logger": 7.6.20 + "@storybook/preview-api": 7.6.20 + checksum: 04533bd5ad741d6a2b5cbb5107c5eae0fc7faa2d9e801bcac3f2d1cb2544cd6728bad2dd389ec9762101d75576739493fcbe901bbf65b152ec201caf8829a1d6 languageName: node linkType: hard -"@storybook/core-webpack@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/core-webpack@npm:8.2.9" +"@storybook/core-common@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/core-common@npm:7.6.20" dependencies: + "@storybook/core-events": 7.6.20 + "@storybook/node-logger": 7.6.20 + "@storybook/types": 7.6.20 + "@types/find-cache-dir": ^3.2.1 "@types/node": ^18.0.0 + "@types/node-fetch": ^2.6.4 + "@types/pretty-hrtime": ^1.0.0 + chalk: ^4.1.0 + esbuild: ^0.18.0 + esbuild-register: ^3.5.0 + file-system-cache: 2.3.0 + find-cache-dir: ^3.0.0 + find-up: ^5.0.0 + fs-extra: ^11.1.0 + glob: ^10.0.0 + handlebars: ^4.7.7 + lazy-universal-dotenv: ^4.0.0 + node-fetch: ^2.0.0 + picomatch: ^2.3.0 + pkg-dir: ^5.0.0 + pretty-hrtime: ^1.0.3 + resolve-from: ^5.0.0 ts-dedent: ^2.0.0 - peerDependencies: - storybook: ^8.2.9 - checksum: 792478f8c124c635840769b42158d70692a0debbac77014bf54729c454b7c305fdec53c35cf6390766948185cabb1845a6c7a09b475809e4b5864511ca5e032e + checksum: 0ca2e61a41128561e17f5363fed97146fa3b8817bc72997aa1bb6fceb60611b6c259f93d20475d479af6bbfa5f1a37a5fdae32cbf740995a558f6c6b8feeb3df languageName: node linkType: hard -"@storybook/core@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/core@npm:8.2.9" +"@storybook/core-events@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/core-events@npm:7.6.20" dependencies: - "@storybook/csf": 0.1.11 - "@types/express": ^4.17.21 + ts-dedent: ^2.0.0 + checksum: 284f4df326200dc0bdfc74472dccab3bbed38cf8515baebe467830b562f9ace06fb6e5640b155b4ae462288b9f3257233c6b5212fcb9b2d3024f9e4d08d28457 + languageName: node + linkType: hard + +"@storybook/core-server@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/core-server@npm:7.6.20" + dependencies: + "@aw-web-design/x-default-browser": 1.4.126 + "@discoveryjs/json-ext": ^0.5.3 + "@storybook/builder-manager": 7.6.20 + "@storybook/channels": 7.6.20 + "@storybook/core-common": 7.6.20 + "@storybook/core-events": 7.6.20 + "@storybook/csf": ^0.1.2 + "@storybook/csf-tools": 7.6.20 + "@storybook/docs-mdx": ^0.1.0 + "@storybook/global": ^5.0.0 + "@storybook/manager": 7.6.20 + "@storybook/node-logger": 7.6.20 + "@storybook/preview-api": 7.6.20 + "@storybook/telemetry": 7.6.20 + "@storybook/types": 7.6.20 + "@types/detect-port": ^1.3.0 "@types/node": ^18.0.0 - browser-assert: ^1.2.1 - esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 - esbuild-register: ^3.5.0 - express: ^4.19.2 - process: ^0.11.10 - recast: ^0.23.5 + "@types/pretty-hrtime": ^1.0.0 + "@types/semver": ^7.3.4 + better-opn: ^3.0.2 + chalk: ^4.1.0 + cli-table3: ^0.6.1 + compression: ^1.7.4 + detect-port: ^1.3.0 + express: ^4.17.3 + fs-extra: ^11.1.0 + globby: ^11.0.2 + lodash: ^4.17.21 + open: ^8.4.0 + pretty-hrtime: ^1.0.3 + prompts: ^2.4.0 + read-pkg-up: ^7.0.1 + semver: ^7.3.7 + telejson: ^7.2.0 + tiny-invariant: ^1.3.1 + ts-dedent: ^2.0.0 util: ^0.12.4 + util-deprecate: ^1.0.2 + watchpack: ^2.2.0 ws: ^8.2.3 - checksum: 52836a0763f192fad7dd1811621a362695889fb03dd4d1b931435a52fee440178db9c28f0de9fd56bb241683c0ff028272f180ccc7e8c748977382b2b3cc63d8 + checksum: 85ca3c14f03adc94d64f4769fbc09b1339fa29e89d24667e5be098a0bdd1fc4291c31ecc6078224aa717cd01a3e11e9389cf69ae340d2e609fbb42130ee19aed + languageName: node + linkType: hard + +"@storybook/core-webpack@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/core-webpack@npm:7.6.20" + dependencies: + "@storybook/core-common": 7.6.20 + "@storybook/node-logger": 7.6.20 + "@storybook/types": 7.6.20 + "@types/node": ^18.0.0 + ts-dedent: ^2.0.0 + checksum: 4f48bc1561b6911d495961925ad5ac8c0e5af5b2a6901c3446a81963cb6ece756004ca5c0a148deffb9cef9cbd74bd725ac6278806194b97fd0920e626814bcf languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/csf-plugin@npm:8.2.9" +"@storybook/csf-plugin@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/csf-plugin@npm:7.6.20" dependencies: + "@storybook/csf-tools": 7.6.20 unplugin: ^1.3.1 - peerDependencies: - storybook: ^8.2.9 - checksum: 514171f66a4e71849ee7a4efacc3051de0714fda56dfdb7581f5d08a268d5a9d0bee6264404bd766f631f2ab8a0358b4c226ecfcee8965d8560d1afc5d17c1b9 + checksum: 0f40b4968e9abb0abf6657548fc6338755133b2c8bb788caf55b101b4558c9c55c428e357659723e06ab385a22fa96ba14059149c4473dd3d0190d6d21088a90 + languageName: node + linkType: hard + +"@storybook/csf-tools@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/csf-tools@npm:7.6.20" + dependencies: + "@babel/generator": ^7.23.0 + "@babel/parser": ^7.23.0 + "@babel/traverse": ^7.23.2 + "@babel/types": ^7.23.0 + "@storybook/csf": ^0.1.2 + "@storybook/types": 7.6.20 + fs-extra: ^11.1.0 + recast: ^0.23.1 + ts-dedent: ^2.0.0 + checksum: 5f3ac318ae106b8bfa13297916fcf23b0c17d2d58195c2966139dbdc4bf1c8a331bf57cff60599c371bcffc19b34a0c5653eee2ec1ae1b4683df9401a9830cd0 languageName: node linkType: hard -"@storybook/csf@npm:0.1.11": +"@storybook/csf@npm:^0.1.2": version: 0.1.11 resolution: "@storybook/csf@npm:0.1.11" dependencies: @@ -14247,6 +15207,28 @@ __metadata: languageName: node linkType: hard +"@storybook/docs-mdx@npm:^0.1.0": + version: 0.1.0 + resolution: "@storybook/docs-mdx@npm:0.1.0" + checksum: a7770842c3947a761bcbe776a9c4fd35163d30c3274fca034169f69ff614242eaa4cacaa2c95fd215827081ef9a43f4774d521a6f43a4d063ea5f4ea14b1d69a + languageName: node + linkType: hard + +"@storybook/docs-tools@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/docs-tools@npm:7.6.20" + dependencies: + "@storybook/core-common": 7.6.20 + "@storybook/preview-api": 7.6.20 + "@storybook/types": 7.6.20 + "@types/doctrine": ^0.0.3 + assert: ^2.1.0 + doctrine: ^3.0.0 + lodash: ^4.17.21 + checksum: 540943fc4c223238f3b023c747c02c3451543c73808ef0cf32e0ed47887d25d3d0335036ed19a870d0f4878fee203ea435905513a86db1d62781d9daec82a29b + languageName: node + linkType: hard + "@storybook/global@npm:^5.0.0": version: 5.0.0 resolution: "@storybook/global@npm:5.0.0" @@ -14254,81 +15236,116 @@ __metadata: languageName: node linkType: hard -"@storybook/icons@npm:^1.2.5": - version: 1.2.10 - resolution: "@storybook/icons@npm:1.2.10" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: c5e91be08a422da5db1d2e4c43e77d9d8233ce395fc04298918e0f959b7174a3f613525d5b67f92aa97ec8c72b29bc800989df1579b4c198df5959a260c32e08 +"@storybook/manager-api@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/manager-api@npm:7.6.20" + dependencies: + "@storybook/channels": 7.6.20 + "@storybook/client-logger": 7.6.20 + "@storybook/core-events": 7.6.20 + "@storybook/csf": ^0.1.2 + "@storybook/global": ^5.0.0 + "@storybook/router": 7.6.20 + "@storybook/theming": 7.6.20 + "@storybook/types": 7.6.20 + dequal: ^2.0.2 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + store2: ^2.14.2 + telejson: ^7.2.0 + ts-dedent: ^2.0.0 + checksum: 01a35e757b0e673570a6868fa64b9a3a258011b6c16afe6e0164ae8406896eeaf53d9a069db6862cbd4b10b64546f0c78ed96872c036a02869b2f530603e9dec languageName: node linkType: hard -"@storybook/instrumenter@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/instrumenter@npm:8.2.9" - dependencies: - "@storybook/global": ^5.0.0 - "@vitest/utils": ^1.3.1 - util: ^0.12.4 - peerDependencies: - storybook: ^8.2.9 - checksum: 4c834c2ee700d1521bc59da826f67777554ac3fc216bac25238693624fdae6cfabf31e127495cfb2f9e22d7c29e74e816f89b3c5ec98a34d56968cbf701f4eb8 +"@storybook/manager@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/manager@npm:7.6.20" + checksum: 4596149367e9dfb7154cc48ec1552514664628136373c832cb41284c24a143324701249961b716d971b688d00f84393935c1c49a123187a784da5f4ae10ecc41 languageName: node linkType: hard -"@storybook/manager-api@npm:^8.2.9": - version: 8.2.9 - resolution: "@storybook/manager-api@npm:8.2.9" - peerDependencies: - storybook: ^8.2.9 - checksum: 5ee66ebdc88f886c05425acff2c362681a6f778e2f27023a43c6c36767ef265175c58b8f23f74684dba64477b26b310fad7cf1761e6643325325a8724f53d93c +"@storybook/mdx2-csf@npm:^1.0.0": + version: 1.1.0 + resolution: "@storybook/mdx2-csf@npm:1.1.0" + checksum: 5ccdb13f4e59b989499f76e54ffaffb96b5710a696346efe19989b3373f375703adf516780894b270fa64a7e765b55274dc18575fc4a84e7fa92b844a4467c5d languageName: node linkType: hard -"@storybook/node-logger@npm:^8.0.0-alpha.10": - version: 8.2.8 - resolution: "@storybook/node-logger@npm:8.2.8" - peerDependencies: - storybook: ^8.2.8 - checksum: beaa607e817c665e1c5c34b12c25553f5fcf4ec58424177c1735a1f87410be6afbb4f66c0d0233076e2c982cc1c3cef78b22473e5097fefd4767ba1dbe87ff7c +"@storybook/node-logger@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/node-logger@npm:7.6.20" + checksum: e5ae41db47857d9ffe4b99d86454bb2c8e6326358beeae8741b46180f46d423a46a359c18ff719e934523f4c5276283518c4e8e84ce646a1977b17cf7db6412a + languageName: node + linkType: hard + +"@storybook/postinstall@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/postinstall@npm:7.6.20" + checksum: c720b2f6f545f7b66ac084eca6f6c1cf2440d10b4b7b6a8dd67dfc021c0661be938e897a1bfbce0c6f05c91cc683635cc576777966ce9e79324ce7b04c7afd83 languageName: node linkType: hard -"@storybook/preset-react-webpack@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/preset-react-webpack@npm:8.2.9" +"@storybook/preset-react-webpack@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/preset-react-webpack@npm:7.6.20" dependencies: - "@storybook/core-webpack": 8.2.9 - "@storybook/react": 8.2.9 + "@babel/preset-flow": ^7.22.15 + "@babel/preset-react": ^7.22.15 + "@pmmmwh/react-refresh-webpack-plugin": ^0.5.11 + "@storybook/core-webpack": 7.6.20 + "@storybook/docs-tools": 7.6.20 + "@storybook/node-logger": 7.6.20 + "@storybook/react": 7.6.20 "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 "@types/node": ^18.0.0 "@types/semver": ^7.3.4 - find-up: ^5.0.0 + babel-plugin-add-react-displayname: ^0.0.5 fs-extra: ^11.1.0 magic-string: ^0.30.5 react-docgen: ^7.0.0 - resolve: ^1.22.8 + react-refresh: ^0.14.0 semver: ^7.3.7 - tsconfig-paths: ^4.2.0 webpack: 5 peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.9 + "@babel/core": ^7.22.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: + "@babel/core": + optional: true typescript: optional: true - checksum: 01f8fe1de13a5d9033eddaf0c31e3467657c7467d7c641473d33d221f8e9c94d0f5c3620b3f7003a50b5e5570f3ddaa27eb57e439b1f07192ad1775029ccacd2 + checksum: e57099c6c2674622d078542c3779afa16dd1427e09871e491bd09d6ac24f928a19ce63bc16eeb1441669e2ca193b148cc4f072d09ac13aa45b23f99047f8c076 languageName: node linkType: hard -"@storybook/preview-api@npm:^8.2.9": - version: 8.2.9 - resolution: "@storybook/preview-api@npm:8.2.9" - peerDependencies: - storybook: ^8.2.9 - checksum: 4973ca3ede45e363a54071a200ee1aeeea9c735ee1e6ba93d46c756bae905057a0e6c30882964aee14fb1631029c5f86b2a4cb8deaee4a80aa5770bf63a00eb3 +"@storybook/preview-api@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/preview-api@npm:7.6.20" + dependencies: + "@storybook/channels": 7.6.20 + "@storybook/client-logger": 7.6.20 + "@storybook/core-events": 7.6.20 + "@storybook/csf": ^0.1.2 + "@storybook/global": ^5.0.0 + "@storybook/types": 7.6.20 + "@types/qs": ^6.9.5 + dequal: ^2.0.2 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + qs: ^6.10.0 + synchronous-promise: ^2.0.15 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + checksum: 704d11503cdf078f10423d2e6b91016b8e66d43d16f9d5ddd06d2170af717a773425ff1f3eb3f2e0521a8660bf06e4321fab8019c9b2ec480c481d62967a85ce + languageName: node + linkType: hard + +"@storybook/preview@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/preview@npm:7.6.20" + checksum: 999fdb1dea0b3360a0df2c7c1a22637c2cb64d7093d82bcec27b561bfafedd41f7d63555c0abc14b8966be3f359daf0cdad003df38d1cdb2f62ed851e1bab3d2 languageName: node linkType: hard @@ -14350,47 +15367,49 @@ __metadata: languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.2.9": - version: 8.2.9 - resolution: "@storybook/react-dom-shim@npm:8.2.9" +"@storybook/react-dom-shim@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/react-dom-shim@npm:7.6.20" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.9 - checksum: 85ecef5aa9af253aae6edb78eaac0e9135f8aa7b58e8a00b7913c13f7a023d7fb8585c459b15900148671236a0d38872d3fee34a48e9c04674ff9adbdede3827 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: e85a7ebe37ca26d30396c95ef67b9dc79a7c2d66f65a95eee1100d83ac0969958a1717f7dd22f817dff185f610b01513ea5a05c5a4fd55187bac8fbdcefc4cb8 languageName: node linkType: hard -"@storybook/react-webpack5@npm:^8.2.9": - version: 8.2.9 - resolution: "@storybook/react-webpack5@npm:8.2.9" +"@storybook/react-webpack5@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/react-webpack5@npm:7.6.20" dependencies: - "@storybook/builder-webpack5": 8.2.9 - "@storybook/preset-react-webpack": 8.2.9 - "@storybook/react": 8.2.9 + "@storybook/builder-webpack5": 7.6.20 + "@storybook/preset-react-webpack": 7.6.20 + "@storybook/react": 7.6.20 "@types/node": ^18.0.0 peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.9 - typescript: ">= 4.2.x" + "@babel/core": ^7.22.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + typescript: "*" peerDependenciesMeta: + "@babel/core": + optional: true typescript: optional: true - checksum: ae8f15b3207b4f3c848ac1b7b248e30fc75502b14d44307cd4ec0c4f36a241f960107828d0c1c2dd18195baea03f22a1b5819ff6275a0dce8a2e7d857ab01cc7 + checksum: 1c08ab5cbd74da2f30e849cafded6769d1dabb7168ed0e874d22d9e1e4dcb1251a70bc2dcc90853fa34b009a29205a4bcab10174aa3c29927519d1a97ea9abf9 languageName: node linkType: hard -"@storybook/react@npm:8.2.9, @storybook/react@npm:^8.2.9": - version: 8.2.9 - resolution: "@storybook/react@npm:8.2.9" +"@storybook/react@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/react@npm:7.6.20" dependencies: - "@storybook/components": ^8.2.9 + "@storybook/client-logger": 7.6.20 + "@storybook/core-client": 7.6.20 + "@storybook/docs-tools": 7.6.20 "@storybook/global": ^5.0.0 - "@storybook/manager-api": ^8.2.9 - "@storybook/preview-api": ^8.2.9 - "@storybook/react-dom-shim": 8.2.9 - "@storybook/theming": ^8.2.9 + "@storybook/preview-api": 7.6.20 + "@storybook/react-dom-shim": 7.6.20 + "@storybook/types": 7.6.20 "@types/escodegen": ^0.0.6 "@types/estree": ^0.0.51 "@types/node": ^18.0.0 @@ -14402,46 +15421,71 @@ __metadata: lodash: ^4.17.21 prop-types: ^15.7.2 react-element-to-jsx-string: ^15.0.0 - semver: ^7.3.7 ts-dedent: ^2.0.0 type-fest: ~2.19 util-deprecate: ^1.0.2 peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.9 - typescript: ">= 4.2.x" + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + typescript: "*" peerDependenciesMeta: typescript: optional: true - checksum: 87a6091eccf049e7ba6408b3de47b729ab444de59cc423a2f349fcfd936f2bdf0c258297725516947803063a44ff080ff71e6606f8f3d28a12e667ccef82a760 + checksum: 3f13a49b239f0f82cdc83ce78f93b738fd5cd9270e99cec3ca04ce871d7806d455ad632a0cb2ca58bc21cb815c9abfda61d2d15dafbd6eee4bb500802fd1b021 languageName: node linkType: hard -"@storybook/test@npm:^8.2.9": - version: 8.2.9 - resolution: "@storybook/test@npm:8.2.9" +"@storybook/router@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/router@npm:7.6.20" dependencies: - "@storybook/csf": 0.1.11 - "@storybook/instrumenter": 8.2.9 - "@testing-library/dom": 10.1.0 - "@testing-library/jest-dom": 6.4.5 - "@testing-library/user-event": 14.5.2 - "@vitest/expect": 1.6.0 - "@vitest/spy": 1.6.0 - util: ^0.12.4 - peerDependencies: - storybook: ^8.2.9 - checksum: 58809d15fa16772cc8036868e4c6271bafd45de488e6a9a4419c8f2afd380ba4b64cd4783fb1a2c069edf5b02a907246e0cae852ac0e5fd8c6116f24186e6daa + "@storybook/client-logger": 7.6.20 + memoizerific: ^1.11.3 + qs: ^6.10.0 + checksum: 67af15f4144e674dcd957fc8ae2ed6e7cbd3845c8fb1343760ec67bebf04eeb54b7088db701208c976026641373dc2287f6908dbc7e3d96da9a1c910054ba942 languageName: node linkType: hard -"@storybook/theming@npm:^8.2.9": - version: 8.2.9 - resolution: "@storybook/theming@npm:8.2.9" +"@storybook/telemetry@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/telemetry@npm:7.6.20" + dependencies: + "@storybook/client-logger": 7.6.20 + "@storybook/core-common": 7.6.20 + "@storybook/csf-tools": 7.6.20 + chalk: ^4.1.0 + detect-package-manager: ^2.0.1 + fetch-retry: ^5.0.2 + fs-extra: ^11.1.0 + read-pkg-up: ^7.0.1 + checksum: 546f2da99858f995d61943e9c62de87bb95df506c75192bbd357b0174b2c0e23d3a61bc4b6ea1c1c9de99b982b7a7cacc2884758ce91314edf389a466daf1291 + languageName: node + linkType: hard + +"@storybook/theming@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/theming@npm:7.6.20" + dependencies: + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@storybook/client-logger": 7.6.20 + "@storybook/global": ^5.0.0 + memoizerific: ^1.11.3 peerDependencies: - storybook: ^8.2.9 - checksum: 13d71e1b69fb254d5de6349c60c7ac0518cbaec0c26a591c820752dd5b25fe66d8a32e4b081bd9470c0b07648e478eb88ab628d10196918ee2806c9640c2ee2f + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 2c3cbac759d300fb471acf4e01514f7728c48533c6e24c37b0351d9f0fcc9240dbdcf50067a81c3ff73b27a1da4227debb55a48ab2920368099871d1f49252ea + languageName: node + linkType: hard + +"@storybook/types@npm:7.6.20": + version: 7.6.20 + resolution: "@storybook/types@npm:7.6.20" + dependencies: + "@storybook/channels": 7.6.20 + "@types/babel__core": ^7.0.0 + "@types/express": ^4.7.0 + file-system-cache: 2.3.0 + checksum: 1e0ae196c63ace6a9a0f06a42c7294cfc840665d1ff7ae6d9fd2466ed3d78387672951aa7a9064a719384938c57d8eb25c8089657710d95c546344fbc28d8df6 languageName: node linkType: hard @@ -14601,90 +15645,90 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-darwin-arm64@npm:1.7.6" +"@swc/core-darwin-arm64@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-darwin-arm64@npm:1.7.24" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-darwin-x64@npm:1.7.6" +"@swc/core-darwin-x64@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-darwin-x64@npm:1.7.24" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.7.6" +"@swc/core-linux-arm-gnueabihf@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.7.24" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-linux-arm64-gnu@npm:1.7.6" +"@swc/core-linux-arm64-gnu@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-linux-arm64-gnu@npm:1.7.24" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-linux-arm64-musl@npm:1.7.6" +"@swc/core-linux-arm64-musl@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-linux-arm64-musl@npm:1.7.24" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-linux-x64-gnu@npm:1.7.6" +"@swc/core-linux-x64-gnu@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-linux-x64-gnu@npm:1.7.24" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-linux-x64-musl@npm:1.7.6" +"@swc/core-linux-x64-musl@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-linux-x64-musl@npm:1.7.24" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-win32-arm64-msvc@npm:1.7.6" +"@swc/core-win32-arm64-msvc@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-win32-arm64-msvc@npm:1.7.24" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-win32-ia32-msvc@npm:1.7.6" +"@swc/core-win32-ia32-msvc@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-win32-ia32-msvc@npm:1.7.24" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.7.6": - version: 1.7.6 - resolution: "@swc/core-win32-x64-msvc@npm:1.7.6" +"@swc/core-win32-x64-msvc@npm:1.7.24": + version: 1.7.24 + resolution: "@swc/core-win32-x64-msvc@npm:1.7.24" conditions: os=win32 & cpu=x64 languageName: node linkType: hard -"@swc/core@npm:^1.7.3": - version: 1.7.6 - resolution: "@swc/core@npm:1.7.6" +"@swc/core@npm:^1.3.82": + version: 1.7.24 + resolution: "@swc/core@npm:1.7.24" dependencies: - "@swc/core-darwin-arm64": 1.7.6 - "@swc/core-darwin-x64": 1.7.6 - "@swc/core-linux-arm-gnueabihf": 1.7.6 - "@swc/core-linux-arm64-gnu": 1.7.6 - "@swc/core-linux-arm64-musl": 1.7.6 - "@swc/core-linux-x64-gnu": 1.7.6 - "@swc/core-linux-x64-musl": 1.7.6 - "@swc/core-win32-arm64-msvc": 1.7.6 - "@swc/core-win32-ia32-msvc": 1.7.6 - "@swc/core-win32-x64-msvc": 1.7.6 + "@swc/core-darwin-arm64": 1.7.24 + "@swc/core-darwin-x64": 1.7.24 + "@swc/core-linux-arm-gnueabihf": 1.7.24 + "@swc/core-linux-arm64-gnu": 1.7.24 + "@swc/core-linux-arm64-musl": 1.7.24 + "@swc/core-linux-x64-gnu": 1.7.24 + "@swc/core-linux-x64-musl": 1.7.24 + "@swc/core-win32-arm64-msvc": 1.7.24 + "@swc/core-win32-ia32-msvc": 1.7.24 + "@swc/core-win32-x64-msvc": 1.7.24 "@swc/counter": ^0.1.3 "@swc/types": ^0.1.12 peerDependencies: @@ -14713,7 +15757,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: 6ecc0d5721458c35ee236ffeb8ac6c909aaf28155f9dbcdf796111ed28bc6273629bd2156547dff70368dff0bf43c6aae7e2cafbb507b31f9ab6e3aed879cd03 + checksum: d46f58a43c8a5067459fec37e9df61f821e0315269165d05c7c173ad2039ca819986d1397b967f17163082c6333cb31293a1870e9b68dd09e03c2fc21d48b723 languageName: node linkType: hard @@ -14773,7 +15817,7 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:10.1.0, @testing-library/dom@npm:^10.0.0": +"@testing-library/dom@npm:^10.0.0": version: 10.1.0 resolution: "@testing-library/dom@npm:10.1.0" dependencies: @@ -14805,39 +15849,6 @@ __metadata: languageName: node linkType: hard -"@testing-library/jest-dom@npm:6.4.5": - version: 6.4.5 - resolution: "@testing-library/jest-dom@npm:6.4.5" - dependencies: - "@adobe/css-tools": ^4.3.2 - "@babel/runtime": ^7.9.2 - aria-query: ^5.0.0 - chalk: ^3.0.0 - css.escape: ^1.5.1 - dom-accessibility-api: ^0.6.3 - lodash: ^4.17.21 - redent: ^3.0.0 - peerDependencies: - "@jest/globals": ">= 28" - "@types/bun": "*" - "@types/jest": ">= 28" - jest: ">= 28" - vitest: ">= 0.32" - peerDependenciesMeta: - "@jest/globals": - optional: true - "@types/bun": - optional: true - "@types/jest": - optional: true - jest: - optional: true - vitest: - optional: true - checksum: 95bd94f1f4ba2110eaaa15174207f74d46481f0f168a4d58c30f92a9285f797f9949c166aa8401bcb46e16edbf14a097013204d65801e9d1361892757e525bd6 - languageName: node - linkType: hard - "@testing-library/react@npm:^15.0.7": version: 15.0.7 resolution: "@testing-library/react@npm:15.0.7" @@ -14856,7 +15867,7 @@ __metadata: languageName: node linkType: hard -"@testing-library/user-event@npm:14.5.2, @testing-library/user-event@npm:^14.5.2": +"@testing-library/user-event@npm:^14.5.2": version: 14.5.2 resolution: "@testing-library/user-event@npm:14.5.2" peerDependencies: @@ -15018,29 +16029,29 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7.1.14": - version: 7.20.0 - resolution: "@types/babel__core@npm:7.20.0" +"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.18.0": + version: 7.20.5 + resolution: "@types/babel__core@npm:7.20.5" dependencies: "@babel/parser": ^7.20.7 "@babel/types": ^7.20.7 "@types/babel__generator": "*" "@types/babel__template": "*" "@types/babel__traverse": "*" - checksum: 49b601a0a7637f1f387442c8156bd086cfd10ff4b82b0e1994e73a6396643b5435366fb33d6b604eade8467cca594ef97adcbc412aede90bb112ebe88d0ad6df + checksum: a3226f7930b635ee7a5e72c8d51a357e799d19cbf9d445710fa39ab13804f79ab1a54b72ea7d8e504659c7dfc50675db974b526142c754398d7413aa4bc30845 languageName: node linkType: hard -"@types/babel__core@npm:^7.18.0": - version: 7.20.5 - resolution: "@types/babel__core@npm:7.20.5" +"@types/babel__core@npm:^7.1.14": + version: 7.20.0 + resolution: "@types/babel__core@npm:7.20.0" dependencies: "@babel/parser": ^7.20.7 "@babel/types": ^7.20.7 "@types/babel__generator": "*" "@types/babel__template": "*" "@types/babel__traverse": "*" - checksum: a3226f7930b635ee7a5e72c8d51a357e799d19cbf9d445710fa39ab13804f79ab1a54b72ea7d8e504659c7dfc50675db974b526142c754398d7413aa4bc30845 + checksum: 49b601a0a7637f1f387442c8156bd086cfd10ff4b82b0e1994e73a6396643b5435366fb33d6b604eade8467cca594ef97adcbc412aede90bb112ebe88d0ad6df languageName: node linkType: hard @@ -15175,6 +16186,20 @@ __metadata: languageName: node linkType: hard +"@types/detect-port@npm:^1.3.0": + version: 1.3.5 + resolution: "@types/detect-port@npm:1.3.5" + checksum: 923cf04c6a05af59090743baeb9948f1938ceb98c1f7ea93db7ac310210426b385aa00005d23039ebb8019a9d13e141f5246e9c733b290885018d722a4787921 + languageName: node + linkType: hard + +"@types/doctrine@npm:^0.0.3": + version: 0.0.3 + resolution: "@types/doctrine@npm:0.0.3" + checksum: 7ca9c8ff4d2da437785151c9eef0dd80b8fa12e0ff0fcb988458a78de4b6f0fc92727ba5bbee446e1df615a91f03053c5783b30b7c21ab6ceab6a42557e93e50 + languageName: node + linkType: hard + "@types/doctrine@npm:^0.0.9": version: 0.0.9 resolution: "@types/doctrine@npm:0.0.9" @@ -15182,6 +16207,13 @@ __metadata: languageName: node linkType: hard +"@types/ejs@npm:^3.1.1": + version: 3.1.5 + resolution: "@types/ejs@npm:3.1.5" + checksum: e142266283051f27a7f79329871b311687dede19ae20268d882e4de218c65e1311d28a300b85579ca67157a8d601b7234daa50c2f99b252b121d27b4e5b21468 + languageName: node + linkType: hard + "@types/emscripten@npm:^1.39.6": version: 1.39.13 resolution: "@types/emscripten@npm:1.39.13" @@ -15230,7 +16262,7 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:^1.0.0, @types/estree@npm:^1.0.5": +"@types/estree@npm:^1.0.5": version: 1.0.5 resolution: "@types/estree@npm:1.0.5" checksum: dd8b5bed28e6213b7acd0fb665a84e693554d850b0df423ac8076cc3ad5823a6bc26b0251d080bdc545af83179ede51dd3f6fa78cad2c46ed1f29624ddf3e41a @@ -15258,7 +16290,7 @@ __metadata: languageName: node linkType: hard -"@types/express@npm:*, @types/express@npm:^4.17.13, @types/express@npm:^4.17.21": +"@types/express@npm:*, @types/express@npm:^4.17.13, @types/express@npm:^4.7.0": version: 4.17.21 resolution: "@types/express@npm:4.17.21" dependencies: @@ -15284,6 +16316,13 @@ __metadata: languageName: node linkType: hard +"@types/find-cache-dir@npm:^3.2.1": + version: 3.2.1 + resolution: "@types/find-cache-dir@npm:3.2.1" + checksum: bf5c4e96da40247cd9e6327f54dfccda961a0fb2d70e3c71bd05def94de4c2e6fb310fe8ecb0f04ecf5dbc52214e184b55a2337b0f87250d4ae1e2e7d58321e4 + languageName: node + linkType: hard + "@types/folder-hash@npm:^4.0.2": version: 4.0.2 resolution: "@types/folder-hash@npm:4.0.2" @@ -15352,15 +16391,6 @@ __metadata: languageName: node linkType: hard -"@types/hast@npm:^3.0.0": - version: 3.0.4 - resolution: "@types/hast@npm:3.0.4" - dependencies: - "@types/unist": "*" - checksum: 7a973e8d16fcdf3936090fa2280f408fb2b6a4f13b42edeb5fbd614efe042b82eac68e298e556d50f6b4ad585a3a93c353e9c826feccdc77af59de8dd400d044 - languageName: node - linkType: hard - "@types/hoist-non-react-statics@npm:^3.3.5": version: 3.3.5 resolution: "@types/hoist-non-react-statics@npm:3.3.5" @@ -15605,6 +16635,13 @@ __metadata: languageName: node linkType: hard +"@types/mime-types@npm:^2.1.0": + version: 2.1.4 + resolution: "@types/mime-types@npm:2.1.4" + checksum: f8c521c54ee0c0b9f90a65356a80b1413ed27ccdc94f5c7ebb3de5d63cedb559cd2610ea55b4100805c7349606a920d96e54f2d16b2f0afa6b7cd5253967ccc9 + languageName: node + linkType: hard + "@types/mime@npm:*": version: 3.0.4 resolution: "@types/mime@npm:3.0.4" @@ -15666,6 +16703,16 @@ __metadata: languageName: node linkType: hard +"@types/node-fetch@npm:^2.6.4": + version: 2.6.11 + resolution: "@types/node-fetch@npm:2.6.11" + dependencies: + "@types/node": "*" + form-data: ^4.0.0 + checksum: 180e4d44c432839bdf8a25251ef8c47d51e37355ddd78c64695225de8bc5dc2b50b7bb855956d471c026bb84bd7295688a0960085e7158cbbba803053492568b + languageName: node + linkType: hard + "@types/node-forge@npm:^1.3.0": version: 1.3.11 resolution: "@types/node-forge@npm:1.3.11" @@ -15781,6 +16828,13 @@ __metadata: languageName: node linkType: hard +"@types/pretty-hrtime@npm:^1.0.0": + version: 1.0.3 + resolution: "@types/pretty-hrtime@npm:1.0.3" + checksum: 288061dff992c8107d5c7b5a1277bbb0a314a27eb10087dea628a08fa37694a655191a69e25a212c95e61e498363c48ad9e281d23964a448f6c14100a6be0910 + languageName: node + linkType: hard + "@types/prismjs@npm:^1.26.4": version: 1.26.4 resolution: "@types/prismjs@npm:1.26.4" @@ -15820,6 +16874,13 @@ __metadata: languageName: node linkType: hard +"@types/qs@npm:^6.9.5": + version: 6.9.15 + resolution: "@types/qs@npm:6.9.15" + checksum: 97d8208c2b82013b618e7a9fc14df6bd40a73e1385ac479b6896bafc7949a46201c15f42afd06e86a05e914f146f495f606b6fb65610cc60cf2e0ff743ec38a2 + languageName: node + linkType: hard + "@types/range-parser@npm:*": version: 1.2.7 resolution: "@types/range-parser@npm:1.2.7" @@ -16122,10 +17183,10 @@ __metadata: languageName: node linkType: hard -"@types/unist@npm:*, @types/unist@npm:^3.0.0": - version: 3.0.2 - resolution: "@types/unist@npm:3.0.2" - checksum: 3d04d0be69316e5f14599a0d993a208606c12818cf631fd399243d1dc7a9bd8a3917d6066baa6abc290814afbd744621484756803c80cba892c39cd4b4a85616 +"@types/unist@npm:^2.0.0": + version: 2.0.11 + resolution: "@types/unist@npm:2.0.11" + checksum: 6d436e832bc35c6dde9f056ac515ebf2b3384a1d7f63679d12358766f9b313368077402e9c1126a14d827f10370a5485e628bf61aa91117cf4fc882423191a4e languageName: node linkType: hard @@ -16339,7 +17400,7 @@ __metadata: languageName: node linkType: hard -"@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0": +"@ungap/structured-clone@npm:^1.2.0": version: 1.2.0 resolution: "@ungap/structured-clone@npm:1.2.0" checksum: 4f656b7b4672f2ce6e272f2427d8b0824ed11546a601d8d5412b9d7704e83db38a8d9f402ecdf2b9063fc164af842ad0ec4a55819f621ed7e7ea4d1efcc74524 @@ -16540,38 +17601,6 @@ __metadata: languageName: node linkType: hard -"@vitest/expect@npm:1.6.0": - version: 1.6.0 - resolution: "@vitest/expect@npm:1.6.0" - dependencies: - "@vitest/spy": 1.6.0 - "@vitest/utils": 1.6.0 - chai: ^4.3.10 - checksum: f3a9959ea387622297efed9e3689fd405044a813df5d5923302eaaea831e250d8d6a0ccd44fb387a95c19963242695ed803afc7c46ae06c48a8e06f194951984 - languageName: node - linkType: hard - -"@vitest/spy@npm:1.6.0": - version: 1.6.0 - resolution: "@vitest/spy@npm:1.6.0" - dependencies: - tinyspy: ^2.2.0 - checksum: 0201975232255e1197f70fc6b23a1ff5e606138a5b96598fff06077d5b747705391013ee98f951affcfd8f54322e4ae1416200393248bb6a9c794f4ef663a066 - languageName: node - linkType: hard - -"@vitest/utils@npm:1.6.0, @vitest/utils@npm:^1.3.1": - version: 1.6.0 - resolution: "@vitest/utils@npm:1.6.0" - dependencies: - diff-sequences: ^29.6.3 - estree-walker: ^3.0.3 - loupe: ^2.3.7 - pretty-format: ^29.7.0 - checksum: a4749533a48e7e4bbc8eafee0fee0e9a0d4eaa4910fbdb490d34e16f8ebcce59a2b38529b9e6b4578e3b4510ea67b29384c93165712b0a19f2e71946922d2c56 - languageName: node - linkType: hard - "@webassemblyjs/ast@npm:1.12.1, @webassemblyjs/ast@npm:^1.12.1": version: 1.12.1 resolution: "@webassemblyjs/ast@npm:1.12.1" @@ -16779,15 +17808,11 @@ __metadata: "@radix-ui/react-switch": ^1.1.0 "@radix-ui/react-tabs": ^1.1.0 "@radix-ui/react-tooltip": ^1.1.2 - "@storybook/addon-a11y": ^8.2.9 - "@storybook/addon-essentials": ^8.2.9 - "@storybook/addon-styling-webpack": ^1.0.0 - "@storybook/addon-webpack5-compiler-swc": ^1.0.4 - "@storybook/manager-api": ^8.2.9 - "@storybook/react": ^8.2.9 - "@storybook/react-webpack5": ^8.2.9 - "@storybook/test": ^8.2.9 - "@storybook/theming": ^8.2.9 + "@storybook/addon-a11y": 7.6.20 + "@storybook/addon-essentials": 7.6.20 + "@storybook/react": 7.6.20 + "@storybook/react-webpack5": 7.6.20 + "@storybook/theming": 7.6.20 "@svgr/webpack": ^6.1.1 "@types/react": 18.2.79 "@webiny/cli": 0.0.0 @@ -16802,7 +17827,7 @@ __metadata: react: 18.2.0 rimraf: ^5.0.5 sass: 1.44.0 - storybook: ^8.2.9 + storybook: 7.6.20 tailwind-merge: ^2.4.0 tailwindcss: ^3.4.6 tailwindcss-animate: ^1.0.7 @@ -21719,6 +22744,17 @@ __metadata: languageName: node linkType: hard +"@yarnpkg/esbuild-plugin-pnp@npm:^3.0.0-rc.10": + version: 3.0.0-rc.15 + resolution: "@yarnpkg/esbuild-plugin-pnp@npm:3.0.0-rc.15" + dependencies: + tslib: ^2.4.0 + peerDependencies: + esbuild: ">=0.10.0" + checksum: 04da15355a99773b441742814ba4d0f3453a83df47aa07e215f167e156f109ab8e971489c8b1a4ddf3c79d568d35213f496ad52e97298228597e1aacc22680aa + languageName: node + linkType: hard + "@yarnpkg/fslib@npm:2.10.3": version: 2.10.3 resolution: "@yarnpkg/fslib@npm:2.10.3" @@ -22038,6 +23074,13 @@ __metadata: languageName: unknown linkType: soft +"agent-base@npm:5": + version: 5.1.1 + resolution: "agent-base@npm:5.1.1" + checksum: 61ae789f3019f1dc10e8cba6d3ae9826949299a4e54aaa1cfa2fa37c95a108e70e95423b963bb987d7891a703fd9a5c383a506f4901819f3ee56f3147c0aa8ab + languageName: node + linkType: hard + "agent-base@npm:6, agent-base@npm:^6.0.2": version: 6.0.2 resolution: "agent-base@npm:6.0.2" @@ -22227,6 +23270,15 @@ __metadata: languageName: node linkType: hard +"ansi-html@npm:^0.0.9": + version: 0.0.9 + resolution: "ansi-html@npm:0.0.9" + bin: + ansi-html: bin/ansi-html + checksum: a03754d6f66bae33938ed8bb3dd98174b7f4895ebe45226185036ed4a1388a7aaf2f2b9581608f0626432ba7add92cfc590aa6475a78bbb90d9d1e1d1af8cbe6 + languageName: node + linkType: hard + "ansi-regex@npm:^2.0.0": version: 2.1.1 resolution: "ansi-regex@npm:2.1.1" @@ -22743,6 +23795,13 @@ __metadata: languageName: node linkType: hard +"app-root-dir@npm:^1.0.2": + version: 1.0.2 + resolution: "app-root-dir@npm:1.0.2" + checksum: d4b1653fc60b6465b982bf5a88b12051ed2d807d70609386a809306e1c636496f53522d61fa30f9f98c71aaae34f34e1651889cf17d81a44e3dafd2859d495ad + languageName: node + linkType: hard + "aproba@npm:^1.0.3 || ^2.0.0": version: 2.0.0 resolution: "aproba@npm:2.0.0" @@ -22848,6 +23907,15 @@ __metadata: languageName: node linkType: hard +"aria-hidden@npm:^1.1.1": + version: 1.2.4 + resolution: "aria-hidden@npm:1.2.4" + dependencies: + tslib: ^2.0.0 + checksum: 2ac90b70d29c6349d86d90e022cf01f4885f9be193932d943a14127cf28560dd0baf068a6625f084163437a4be0578f513cf7892f4cc63bfe91aa41dce27c6b2 + languageName: node + linkType: hard + "aria-query@npm:5.1.3": version: 5.1.3 resolution: "aria-query@npm:5.1.3" @@ -22857,7 +23925,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:5.3.0, aria-query@npm:^5.0.0": +"aria-query@npm:5.3.0": version: 5.3.0 resolution: "aria-query@npm:5.3.0" dependencies: @@ -23060,10 +24128,16 @@ __metadata: languageName: node linkType: hard -"assertion-error@npm:^1.1.0": - version: 1.1.0 - resolution: "assertion-error@npm:1.1.0" - checksum: fd9429d3a3d4fd61782eb3962ae76b6d08aa7383123fca0596020013b3ebd6647891a85b05ce821c47d1471ed1271f00b0545cf6a4326cf2fc91efcc3b0fbecf +"assert@npm:^2.1.0": + version: 2.1.0 + resolution: "assert@npm:2.1.0" + dependencies: + call-bind: ^1.0.2 + is-nan: ^1.3.2 + object-is: ^1.1.5 + object.assign: ^4.1.4 + util: ^0.12.5 + checksum: 1ed1cabba9abe55f4109b3f7292b4e4f3cf2953aad8dc148c0b3c3bd676675c31b1abb32ef563b7d5a19d1715bf90d1e5f09fad2a4ee655199468902da80f7c2 languageName: node linkType: hard @@ -23092,6 +24166,13 @@ __metadata: languageName: node linkType: hard +"async-limiter@npm:~1.0.0": + version: 1.0.1 + resolution: "async-limiter@npm:1.0.1" + checksum: 2b849695b465d93ad44c116220dee29a5aeb63adac16c1088983c339b0de57d76e82533e8e364a93a9f997f28bbfc6a92948cefc120652bd07f3b59f8d75cf2b + languageName: node + linkType: hard + "async-listener@npm:^0.6.0": version: 0.6.10 resolution: "async-listener@npm:0.6.10" @@ -23322,6 +24403,26 @@ __metadata: languageName: node linkType: hard +"babel-loader@npm:^9.0.0": + version: 9.1.3 + resolution: "babel-loader@npm:9.1.3" + dependencies: + find-cache-dir: ^4.0.0 + schema-utils: ^4.0.0 + peerDependencies: + "@babel/core": ^7.12.0 + webpack: ">=5" + checksum: b168dde5b8cf11206513371a79f86bb3faa7c714e6ec9fffd420876b61f3d7f5f4b976431095ef6a14bc4d324505126deb91045fd41e312ba49f4deaa166fe28 + languageName: node + linkType: hard + +"babel-plugin-add-react-displayname@npm:^0.0.5": + version: 0.0.5 + resolution: "babel-plugin-add-react-displayname@npm:0.0.5" + checksum: a5b52aa14327b1fa2949f32140cd1b0b283b2035881453d71dcedc825a7378aa3a578bff5f76d1632875eedb40612dc4e71585852ce5cb3c2869c180643fd001 + languageName: node + linkType: hard + "babel-plugin-dynamic-import-node@npm:2.3.3": version: 2.3.3 resolution: "babel-plugin-dynamic-import-node@npm:2.3.3" @@ -23456,6 +24557,18 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-corejs3@npm:^0.10.6": + version: 0.10.6 + resolution: "babel-plugin-polyfill-corejs3@npm:0.10.6" + dependencies: + "@babel/helper-define-polyfill-provider": ^0.6.2 + core-js-compat: ^3.38.0 + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: f762f29f7acca576897c63149c850f0a72babd3fb9ea436a2e36f0c339161c4b912a77828541d8188ce8a91e50965c6687120cf36071eabb1b7aa92f279e2164 + languageName: node + linkType: hard + "babel-plugin-polyfill-corejs3@npm:^0.6.0": version: 0.6.0 resolution: "babel-plugin-polyfill-corejs3@npm:0.6.0" @@ -23632,6 +24745,22 @@ __metadata: languageName: node linkType: hard +"better-opn@npm:^3.0.2": + version: 3.0.2 + resolution: "better-opn@npm:3.0.2" + dependencies: + open: ^8.0.4 + checksum: 1471552fa7f733561e7f49e812be074b421153006ca744de985fb6d38939807959fc5fe9cb819cf09f864782e294704fd3b31711ea14c115baf3330a2f1135de + languageName: node + linkType: hard + +"big-integer@npm:^1.6.44": + version: 1.6.52 + resolution: "big-integer@npm:1.6.52" + checksum: 6e86885787a20fed96521958ae9086960e4e4b5e74d04f3ef7513d4d0ad631a9f3bde2730fc8aaa4b00419fc865f6ec573e5320234531ef37505da7da192c40b + languageName: node + linkType: hard + "big.js@npm:^5.2.2": version: 5.2.2 resolution: "big.js@npm:5.2.2" @@ -23820,6 +24949,15 @@ __metadata: languageName: node linkType: hard +"bplist-parser@npm:^0.2.0": + version: 0.2.0 + resolution: "bplist-parser@npm:0.2.0" + dependencies: + big-integer: ^1.6.44 + checksum: d5339dd16afc51de6c88f88f58a45b72ed6a06aa31f5557d09877575f220b7c1d3fbe375da0b62e6a10d4b8ed80523567e351f24014f5bc886ad523758142cdd + languageName: node + linkType: hard + "brace-expansion@npm:^1.1.7": version: 1.1.11 resolution: "brace-expansion@npm:1.1.11" @@ -23934,6 +25072,15 @@ __metadata: languageName: node linkType: hard +"browserify-zlib@npm:^0.1.4": + version: 0.1.4 + resolution: "browserify-zlib@npm:0.1.4" + dependencies: + pako: ~0.2.0 + checksum: abee4cb4349e8a21391fd874564f41b113fe691372913980e6fa06a777e4ea2aad4e942af14ab99bce190d5ac8f5328201432f4ef0eae48c6d02208bc212976f + languageName: node + linkType: hard + "browserslist@npm:^4.0.0, browserslist@npm:^4.18.1, browserslist@npm:^4.21.3, browserslist@npm:^4.21.4": version: 4.21.5 resolution: "browserslist@npm:4.21.5" @@ -24291,6 +25438,19 @@ __metadata: languageName: node linkType: hard +"call-bind@npm:^1.0.7": + version: 1.0.7 + resolution: "call-bind@npm:1.0.7" + dependencies: + es-define-property: ^1.0.0 + es-errors: ^1.3.0 + function-bind: ^1.1.2 + get-intrinsic: ^1.2.4 + set-function-length: ^1.2.1 + checksum: 295c0c62b90dd6522e6db3b0ab1ce26bdf9e7404215bda13cfee25b626b5ff1a7761324d58d38b1ef1607fc65aca2d06e44d2e18d0dfc6c14b465b00d8660029 + languageName: node + linkType: hard + "caller-callsite@npm:^2.0.0": version: 2.0.0 resolution: "caller-callsite@npm:2.0.0" @@ -24436,21 +25596,6 @@ __metadata: languageName: node linkType: hard -"chai@npm:^4.3.10": - version: 4.5.0 - resolution: "chai@npm:4.5.0" - dependencies: - assertion-error: ^1.1.0 - check-error: ^1.0.3 - deep-eql: ^4.1.3 - get-func-name: ^2.0.2 - loupe: ^2.3.6 - pathval: ^1.1.1 - type-detect: ^4.1.0 - checksum: 70e5a8418a39e577e66a441cc0ce4f71fd551a650a71de30dd4e3e31e75ed1f5aa7119cf4baf4a2cb5e85c0c6befdb4d8a05811fad8738c1a6f3aa6a23803821 - languageName: node - linkType: hard - "chalk@npm:3.0.0, chalk@npm:^3.0.0, chalk@npm:~3.0.0": version: 3.0.0 resolution: "chalk@npm:3.0.0" @@ -24547,15 +25692,6 @@ __metadata: languageName: node linkType: hard -"check-error@npm:^1.0.3": - version: 1.0.3 - resolution: "check-error@npm:1.0.3" - dependencies: - get-func-name: ^2.0.2 - checksum: e2131025cf059b21080f4813e55b3c480419256914601750b0fee3bd9b2b8315b531e551ef12560419b8b6d92a3636511322752b1ce905703239e7cc451b6399 - languageName: node - linkType: hard - "check-more-types@npm:^2.24.0": version: 2.24.0 resolution: "check-more-types@npm:2.24.0" @@ -24812,6 +25948,19 @@ __metadata: languageName: node linkType: hard +"cli-table3@npm:^0.6.1": + version: 0.6.5 + resolution: "cli-table3@npm:0.6.5" + dependencies: + "@colors/colors": 1.5.0 + string-width: ^4.2.0 + dependenciesMeta: + "@colors/colors": + optional: true + checksum: ab7afbf4f8597f1c631f3ee6bb3481d0bfeac8a3b81cffb5a578f145df5c88003b6cfff46046a7acae86596fdd03db382bfa67f20973b6b57425505abc47e42c + languageName: node + linkType: hard + "cli-table3@npm:~0.6.1": version: 0.6.3 resolution: "cli-table3@npm:0.6.3" @@ -25628,6 +26777,15 @@ __metadata: languageName: node linkType: hard +"core-js-compat@npm:^3.38.0": + version: 3.38.1 + resolution: "core-js-compat@npm:3.38.1" + dependencies: + browserslist: ^4.23.3 + checksum: a0a5673bcd59f588f0cd0b59cdacd4712b82909738a87406d334dd412eb3d273ae72b275bdd8e8fef63fca9ef12b42ed651be139c7c44c8a1acb423c8906992e + languageName: node + linkType: hard + "core-js-pure@npm:^3.10.2, core-js-pure@npm:^3.23.3, core-js-pure@npm:^3.25.1": version: 3.27.2 resolution: "core-js-pure@npm:3.27.2" @@ -25962,12 +27120,10 @@ __metadata: languageName: node linkType: hard -"crypto-random-string@npm:^4.0.0": - version: 4.0.0 - resolution: "crypto-random-string@npm:4.0.0" - dependencies: - type-fest: ^1.0.1 - checksum: 91f148f27bcc8582798f0fb3e75a09d9174557f39c3c40a89dd1bd70fb5a14a02548245aa26fa7d663c426ac5026f4729841231c84f9e30e8c8ece5e38656741 +"crypto-random-string@npm:^2.0.0": + version: 2.0.0 + resolution: "crypto-random-string@npm:2.0.0" + checksum: 0283879f55e7c16fdceacc181f87a0a65c53bc16ffe1d58b9d19a6277adcd71900d02bb2c4843dd55e78c51e30e89b0fec618a7f170ebcc95b33182c28f05fd6 languageName: node linkType: hard @@ -26727,15 +27883,6 @@ __metadata: languageName: node linkType: hard -"deep-eql@npm:^4.1.3": - version: 4.1.4 - resolution: "deep-eql@npm:4.1.4" - dependencies: - type-detect: ^4.0.0 - checksum: 01c3ca78ff40d79003621b157054871411f94228ceb9b2cab78da913c606631c46e8aa79efc4aa0faf3ace3092acd5221255aab3ef0e8e7b438834f0ca9a16c7 - languageName: node - linkType: hard - "deep-equal@npm:^2.0.5": version: 2.2.0 resolution: "deep-equal@npm:2.2.0" @@ -26815,6 +27962,16 @@ __metadata: languageName: node linkType: hard +"default-browser-id@npm:3.0.0": + version: 3.0.0 + resolution: "default-browser-id@npm:3.0.0" + dependencies: + bplist-parser: ^0.2.0 + untildify: ^4.0.0 + checksum: 279c7ad492542e5556336b6c254a4eaf31b2c63a5433265655ae6e47301197b6cfb15c595a6fdc6463b2ff8e1a1a1ed3cba56038a60e1527ba4ab1628c6b9941 + languageName: node + linkType: hard + "default-gateway@npm:^6.0.3": version: 6.0.3 resolution: "default-gateway@npm:6.0.3" @@ -26861,6 +28018,17 @@ __metadata: languageName: node linkType: hard +"define-data-property@npm:^1.1.4": + version: 1.1.4 + resolution: "define-data-property@npm:1.1.4" + dependencies: + es-define-property: ^1.0.0 + es-errors: ^1.3.0 + gopd: ^1.0.1 + checksum: 8068ee6cab694d409ac25936eb861eea704b7763f7f342adbdfe337fc27c78d7ae0eff2364b2917b58c508d723c7a074326d068eef2e45c4edcd85cf94d0313b + languageName: node + linkType: hard + "define-lazy-prop@npm:^2.0.0": version: 2.0.0 resolution: "define-lazy-prop@npm:2.0.0" @@ -27016,6 +28184,13 @@ __metadata: languageName: node linkType: hard +"detect-node-es@npm:^1.1.0": + version: 1.1.0 + resolution: "detect-node-es@npm:1.1.0" + checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449 + languageName: node + linkType: hard + "detect-node@npm:^2.0.4": version: 2.1.0 resolution: "detect-node@npm:2.1.0" @@ -27023,6 +28198,15 @@ __metadata: languageName: node linkType: hard +"detect-package-manager@npm:^2.0.1": + version: 2.0.1 + resolution: "detect-package-manager@npm:2.0.1" + dependencies: + execa: ^5.1.1 + checksum: e72b910182d5ad479198d4235be206ac64a479257b32201bb06f3c842cc34c65ea851d46f72cc1d4bf535bcc6c4b44b5b86bb29fe1192b8c9c07b46883672f28 + languageName: node + linkType: hard + "detect-port-alt@npm:^1.1.6": version: 1.1.6 resolution: "detect-port-alt@npm:1.1.6" @@ -27036,6 +28220,19 @@ __metadata: languageName: node linkType: hard +"detect-port@npm:^1.3.0": + version: 1.6.1 + resolution: "detect-port@npm:1.6.1" + dependencies: + address: ^1.0.1 + debug: 4 + bin: + detect: bin/detect-port.js + detect-port: bin/detect-port.js + checksum: 0429fa423abb15fc453face64e6ffa406e375f51f5b4421a7886962e680dc05824eae9b6ee4594ba273685c3add415ad00982b5da54802ac3de6f846173284c3 + languageName: node + linkType: hard + "devtools-protocol@npm:0.0.1262051": version: 0.0.1262051 resolution: "devtools-protocol@npm:0.0.1262051" @@ -27197,13 +28394,6 @@ __metadata: languageName: node linkType: hard -"dom-accessibility-api@npm:^0.6.3": - version: 0.6.3 - resolution: "dom-accessibility-api@npm:0.6.3" - checksum: c325b5144bb406df23f4affecffc117dbaec9af03daad9ee6b510c5be647b14d28ef0a4ea5ca06d696d8ab40bb777e5fed98b985976fdef9d8790178fa1d573f - languageName: node - linkType: hard - "dom-align@npm:^1.7.0": version: 1.12.4 resolution: "dom-align@npm:1.12.4" @@ -27409,13 +28599,20 @@ __metadata: languageName: node linkType: hard -"dotenv-expand@npm:~10.0.0": +"dotenv-expand@npm:^10.0.0, dotenv-expand@npm:~10.0.0": version: 10.0.0 resolution: "dotenv-expand@npm:10.0.0" checksum: 2a38b470efe0abcb1ac8490421a55e1d764dc9440fd220942bce40965074f3fb00b585f4346020cb0f0f219966ee6b4ee5023458b3e2953fe5b3214de1b314ee languageName: node linkType: hard +"dotenv@npm:^16.0.0": + version: 16.4.5 + resolution: "dotenv@npm:16.4.5" + checksum: 301a12c3d44fd49888b74eb9ccf9f07a1f5df43f489e7fcb89647a2edcd84c42d6bc349dc8df099cd18f07c35c7b04685c1a4f3e6a6a9e6b30f8d48c15b7f49c + languageName: node + linkType: hard + "dotenv@npm:^8.2.0": version: 8.6.0 resolution: "dotenv@npm:8.6.0" @@ -27470,7 +28667,7 @@ __metadata: languageName: node linkType: hard -"duplexify@npm:^3.5.0": +"duplexify@npm:^3.5.0, duplexify@npm:^3.6.0": version: 3.7.1 resolution: "duplexify@npm:3.7.1" dependencies: @@ -27964,6 +29161,22 @@ __metadata: languageName: node linkType: hard +"es-define-property@npm:^1.0.0": + version: 1.0.0 + resolution: "es-define-property@npm:1.0.0" + dependencies: + get-intrinsic: ^1.2.4 + checksum: f66ece0a887b6dca71848fa71f70461357c0e4e7249696f81bad0a1f347eed7b31262af4a29f5d726dc026426f085483b6b90301855e647aa8e21936f07293c6 + languageName: node + linkType: hard + +"es-errors@npm:^1.3.0": + version: 1.3.0 + resolution: "es-errors@npm:1.3.0" + checksum: ec1414527a0ccacd7f15f4a3bc66e215f04f595ba23ca75cdae0927af099b5ec865f9f4d33e9d7e86f512f252876ac77d4281a7871531a50678132429b1271b5 + languageName: node + linkType: hard + "es-get-iterator@npm:^1.1.2, es-get-iterator@npm:^1.1.3": version: 1.1.3 resolution: "es-get-iterator@npm:1.1.3" @@ -27988,7 +29201,7 @@ __metadata: languageName: node linkType: hard -"es-module-lexer@npm:^1.5.0": +"es-module-lexer@npm:^1.4.1": version: 1.5.4 resolution: "es-module-lexer@npm:1.5.4" checksum: a0cf04fb92d052647ac7d818d1913b98d3d3d0f5b9d88f0eafb993436e4c3e2c958599db68839d57f2dfa281fdf0f60e18d448eb78fc292c33c0f25635b6854f @@ -28033,6 +29246,13 @@ __metadata: languageName: node linkType: hard +"esbuild-plugin-alias@npm:^0.2.1": + version: 0.2.1 + resolution: "esbuild-plugin-alias@npm:0.2.1" + checksum: afe2d2c8b5f09d5321cb8d9c0825e8a9f6e03c2d50df92f953a291d4620cc29eddb3da9e33b238f6d8f77738e0277bdcb831f127399449fecf78fb84c04e5da9 + languageName: node + linkType: hard + "esbuild-register@npm:^3.5.0": version: 3.6.0 resolution: "esbuild-register@npm:3.6.0" @@ -28044,36 +29264,33 @@ __metadata: languageName: node linkType: hard -"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0": - version: 0.21.5 - resolution: "esbuild@npm:0.21.5" - dependencies: - "@esbuild/aix-ppc64": 0.21.5 - "@esbuild/android-arm": 0.21.5 - "@esbuild/android-arm64": 0.21.5 - "@esbuild/android-x64": 0.21.5 - "@esbuild/darwin-arm64": 0.21.5 - "@esbuild/darwin-x64": 0.21.5 - "@esbuild/freebsd-arm64": 0.21.5 - "@esbuild/freebsd-x64": 0.21.5 - "@esbuild/linux-arm": 0.21.5 - "@esbuild/linux-arm64": 0.21.5 - "@esbuild/linux-ia32": 0.21.5 - "@esbuild/linux-loong64": 0.21.5 - "@esbuild/linux-mips64el": 0.21.5 - "@esbuild/linux-ppc64": 0.21.5 - "@esbuild/linux-riscv64": 0.21.5 - "@esbuild/linux-s390x": 0.21.5 - "@esbuild/linux-x64": 0.21.5 - "@esbuild/netbsd-x64": 0.21.5 - "@esbuild/openbsd-x64": 0.21.5 - "@esbuild/sunos-x64": 0.21.5 - "@esbuild/win32-arm64": 0.21.5 - "@esbuild/win32-ia32": 0.21.5 - "@esbuild/win32-x64": 0.21.5 +"esbuild@npm:^0.18.0": + version: 0.18.20 + resolution: "esbuild@npm:0.18.20" + dependencies: + "@esbuild/android-arm": 0.18.20 + "@esbuild/android-arm64": 0.18.20 + "@esbuild/android-x64": 0.18.20 + "@esbuild/darwin-arm64": 0.18.20 + "@esbuild/darwin-x64": 0.18.20 + "@esbuild/freebsd-arm64": 0.18.20 + "@esbuild/freebsd-x64": 0.18.20 + "@esbuild/linux-arm": 0.18.20 + "@esbuild/linux-arm64": 0.18.20 + "@esbuild/linux-ia32": 0.18.20 + "@esbuild/linux-loong64": 0.18.20 + "@esbuild/linux-mips64el": 0.18.20 + "@esbuild/linux-ppc64": 0.18.20 + "@esbuild/linux-riscv64": 0.18.20 + "@esbuild/linux-s390x": 0.18.20 + "@esbuild/linux-x64": 0.18.20 + "@esbuild/netbsd-x64": 0.18.20 + "@esbuild/openbsd-x64": 0.18.20 + "@esbuild/sunos-x64": 0.18.20 + "@esbuild/win32-arm64": 0.18.20 + "@esbuild/win32-ia32": 0.18.20 + "@esbuild/win32-x64": 0.18.20 dependenciesMeta: - "@esbuild/aix-ppc64": - optional: true "@esbuild/android-arm": optional: true "@esbuild/android-arm64": @@ -28120,7 +29337,7 @@ __metadata: optional: true bin: esbuild: bin/esbuild - checksum: 2911c7b50b23a9df59a7d6d4cdd3a4f85855787f374dce751148dbb13305e0ce7e880dde1608c2ab7a927fc6cec3587b80995f7fc87a64b455f8b70b55fd8ec1 + checksum: 5d253614e50cdb6ec22095afd0c414f15688e7278a7eb4f3720a6dd1306b0909cf431e7b9437a90d065a31b1c57be60130f63fe3e8d0083b588571f31ee6ec7b languageName: node linkType: hard @@ -28567,15 +29784,6 @@ __metadata: languageName: node linkType: hard -"estree-walker@npm:^3.0.3": - version: 3.0.3 - resolution: "estree-walker@npm:3.0.3" - dependencies: - "@types/estree": ^1.0.0 - checksum: a65728d5727b71de172c5df323385755a16c0fdab8234dc756c3854cfee343261ddfbb72a809a5660fac8c75d960bb3e21aa898c2d7e9b19bb298482ca58a3af - languageName: node - linkType: hard - "esutils@npm:^2.0.2": version: 2.0.3 resolution: "esutils@npm:2.0.3" @@ -28892,7 +30100,7 @@ __metadata: languageName: node linkType: hard -"extend@npm:~3.0.2": +"extend@npm:^3.0.0, extend@npm:~3.0.2": version: 3.0.2 resolution: "extend@npm:3.0.2" checksum: a50a8309ca65ea5d426382ff09f33586527882cf532931cb08ca786ea3146c0553310bda688710ff61d7668eba9f96b923fe1420cdf56a2c3eaf30fcab87b515 @@ -28945,7 +30153,7 @@ __metadata: languageName: node linkType: hard -"extract-zip@npm:^1.6.7": +"extract-zip@npm:^1.6.6, extract-zip@npm:^1.6.7": version: 1.7.0 resolution: "extract-zip@npm:1.7.0" dependencies: @@ -29024,7 +30232,7 @@ __metadata: languageName: node linkType: hard -"fast-glob@npm:^3.2.11, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2": +"fast-glob@npm:^3.2.11, fast-glob@npm:^3.3.0": version: 3.3.2 resolution: "fast-glob@npm:3.3.2" dependencies: @@ -29214,15 +30422,6 @@ __metadata: languageName: node linkType: hard -"fd-package-json@npm:^1.2.0": - version: 1.2.0 - resolution: "fd-package-json@npm:1.2.0" - dependencies: - walk-up-path: ^3.0.1 - checksum: 043a9b5bbec41d2e452b6c81943b235f0f89358acb1f0fbcfa7ecba80df53434f8e1d663d964c919447fbd0c6f8f8e7dc477fd31a1dd1d7217bfaeeae14fcbb0 - languageName: node - linkType: hard - "fd-slicer@npm:~1.1.0": version: 1.1.0 resolution: "fd-slicer@npm:1.1.0" @@ -29251,6 +30450,13 @@ __metadata: languageName: node linkType: hard +"fetch-retry@npm:^5.0.2": + version: 5.0.6 + resolution: "fetch-retry@npm:5.0.6" + checksum: 4ad8bca6ec7a7b1212e636bb422a9ae8bb9dce38df0b441c9eb77a29af99b368029d6248ff69427da67e3d43c53808b121135ea395e7fe4f8f383e0ad65b4f27 + languageName: node + linkType: hard + "figures@npm:3.2.0, figures@npm:^3.0.0, figures@npm:^3.2.0": version: 3.2.0 resolution: "figures@npm:3.2.0" @@ -29309,6 +30515,16 @@ __metadata: languageName: node linkType: hard +"file-system-cache@npm:2.3.0": + version: 2.3.0 + resolution: "file-system-cache@npm:2.3.0" + dependencies: + fs-extra: 11.1.1 + ramda: 0.29.0 + checksum: 74afa2870a062500643d41e02d1fbd47a3f30100f9e153dec5233d59f05545f4c8ada6085629d624e043479ac28c0cafc31824f7b49a3f997efab8cc5d05bfee + languageName: node + linkType: hard + "file-type@npm:^3.8.0": version: 3.9.0 resolution: "file-type@npm:3.9.0" @@ -29391,7 +30607,7 @@ __metadata: languageName: node linkType: hard -"find-cache-dir@npm:^3.3.1, find-cache-dir@npm:^3.3.2": +"find-cache-dir@npm:^3.0.0, find-cache-dir@npm:^3.3.1, find-cache-dir@npm:^3.3.2": version: 3.3.2 resolution: "find-cache-dir@npm:3.3.2" dependencies: @@ -29402,6 +30618,16 @@ __metadata: languageName: node linkType: hard +"find-cache-dir@npm:^4.0.0": + version: 4.0.0 + resolution: "find-cache-dir@npm:4.0.0" + dependencies: + common-path-prefix: ^3.0.0 + pkg-dir: ^7.0.0 + checksum: 52a456a80deeb27daa3af6e06059b63bdb9cc4af4d845fc6d6229887e505ba913cd56000349caa60bc3aa59dacdb5b4c37903d4ba34c75102d83cab330b70d2f + languageName: node + linkType: hard + "find-my-way@npm:^2.2.2": version: 2.2.5 resolution: "find-my-way@npm:2.2.5" @@ -29735,6 +30961,17 @@ __metadata: languageName: node linkType: hard +"fs-extra@npm:11.1.1": + version: 11.1.1 + resolution: "fs-extra@npm:11.1.1" + dependencies: + graceful-fs: ^4.2.0 + jsonfile: ^6.0.1 + universalify: ^2.0.0 + checksum: fb883c68245b2d777fbc1f2082c9efb084eaa2bbf9fddaa366130d196c03608eebef7fb490541276429ee1ca99f317e2d73e96f5ca0999eefedf5a624ae1edfd + languageName: node + linkType: hard + "fs-extra@npm:^10.0.0": version: 10.1.0 resolution: "fs-extra@npm:10.1.0" @@ -29929,13 +31166,6 @@ __metadata: languageName: node linkType: hard -"get-func-name@npm:^2.0.1, get-func-name@npm:^2.0.2": - version: 2.0.2 - resolution: "get-func-name@npm:2.0.2" - checksum: 3f62f4c23647de9d46e6f76d2b3eafe58933a9b3830c60669e4180d6c601ce1b4aa310ba8366143f55e52b139f992087a9f0647274e8745621fa2af7e0acf13b - languageName: node - linkType: hard - "get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0": version: 1.2.0 resolution: "get-intrinsic@npm:1.2.0" @@ -29959,6 +31189,33 @@ __metadata: languageName: node linkType: hard +"get-intrinsic@npm:^1.2.4": + version: 1.2.4 + resolution: "get-intrinsic@npm:1.2.4" + dependencies: + es-errors: ^1.3.0 + function-bind: ^1.1.2 + has-proto: ^1.0.1 + has-symbols: ^1.0.3 + hasown: ^2.0.0 + checksum: 414e3cdf2c203d1b9d7d33111df746a4512a1aa622770b361dadddf8ed0b5aeb26c560f49ca077e24bfafb0acb55ca908d1f709216ccba33ffc548ec8a79a951 + languageName: node + linkType: hard + +"get-nonce@npm:^1.0.0": + version: 1.0.1 + resolution: "get-nonce@npm:1.0.1" + checksum: e2614e43b4694c78277bb61b0f04583d45786881289285c73770b07ded246a98be7e1f78b940c80cbe6f2b07f55f0b724e6db6fd6f1bcbd1e8bdac16521074ed + languageName: node + linkType: hard + +"get-npm-tarball-url@npm:^2.0.3": + version: 2.1.0 + resolution: "get-npm-tarball-url@npm:2.1.0" + checksum: 02b96993ad5a04cbd0ef0577ac3cc9e2e78a7c60db6bb5e6c8fe78950fc1fc3d093314987629a2fda3083228d91a93670bde321767ca2cf89ce7f463c9e44071 + languageName: node + linkType: hard + "get-package-type@npm:^0.1.0": version: 0.1.0 resolution: "get-package-type@npm:0.1.0" @@ -29980,7 +31237,7 @@ __metadata: languageName: node linkType: hard -"get-port@npm:5.1.1": +"get-port@npm:5.1.1, get-port@npm:^5.1.1": version: 5.1.1 resolution: "get-port@npm:5.1.1" checksum: 0162663ffe5c09e748cd79d97b74cd70e5a5c84b760a475ce5767b357fb2a57cb821cee412d646aa8a156ed39b78aab88974eddaa9e5ee926173c036c0713787 @@ -30265,10 +31522,10 @@ __metadata: languageName: node linkType: hard -"github-slugger@npm:^2.0.0": - version: 2.0.0 - resolution: "github-slugger@npm:2.0.0" - checksum: 250375cde2058f21454872c2c79f72c4637340c30c51ff158ca4ec71cbc478f33d54477d787a662f9207aeb095a2060f155bc01f15329ba8a5fb6698e0fc81f8 +"github-slugger@npm:^1.0.0": + version: 1.5.0 + resolution: "github-slugger@npm:1.5.0" + checksum: c70988224578b3bdaa25df65973ffc8c24594a77a28550c3636e495e49d17aef5cdb04c04fa3f1744babef98c61eecc6a43299a13ea7f3cc33d680bf9053ffbe languageName: node linkType: hard @@ -30442,7 +31699,7 @@ __metadata: languageName: node linkType: hard -"globby@npm:11.1.0, globby@npm:^11.0.1, globby@npm:^11.0.4, globby@npm:^11.1.0": +"globby@npm:11.1.0, globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.0.4, globby@npm:^11.1.0": version: 11.1.0 resolution: "globby@npm:11.1.0" dependencies: @@ -30456,20 +31713,6 @@ __metadata: languageName: node linkType: hard -"globby@npm:^14.0.1": - version: 14.0.2 - resolution: "globby@npm:14.0.2" - dependencies: - "@sindresorhus/merge-streams": ^2.1.0 - fast-glob: ^3.3.2 - ignore: ^5.2.4 - path-type: ^5.0.0 - slash: ^5.1.0 - unicorn-magic: ^0.1.0 - checksum: 2cee79efefca4383a825fc2fcbdb37e5706728f2d39d4b63851927c128fff62e6334ef7d4d467949d411409ad62767dc2d214e0f837a0f6d4b7290b6711d485c - languageName: node - linkType: hard - "glur@npm:^1.1.2": version: 1.1.2 resolution: "glur@npm:1.1.2" @@ -30598,6 +31841,22 @@ __metadata: languageName: node linkType: hard +"gunzip-maybe@npm:^1.4.2": + version: 1.4.2 + resolution: "gunzip-maybe@npm:1.4.2" + dependencies: + browserify-zlib: ^0.1.4 + is-deflate: ^1.0.0 + is-gzip: ^1.0.0 + peek-stream: ^1.1.0 + pumpify: ^1.3.3 + through2: ^2.0.3 + bin: + gunzip-maybe: bin.js + checksum: bc4d4977c24a2860238df271de75d53dd72a359d19f1248d1c613807dc221d3b8ae09624e3085c8106663e3e1b59db62a85b261d1138c2cc24efad9df577d4e1 + languageName: node + linkType: hard + "gzip-size@npm:^6.0.0": version: 6.0.0 resolution: "gzip-size@npm:6.0.0" @@ -30710,6 +31969,15 @@ __metadata: languageName: node linkType: hard +"has-property-descriptors@npm:^1.0.2": + version: 1.0.2 + resolution: "has-property-descriptors@npm:1.0.2" + dependencies: + es-define-property: ^1.0.0 + checksum: fcbb246ea2838058be39887935231c6d5788babed499d0e9d0cc5737494c48aba4fe17ba1449e0d0fbbb1e36175442faa37f9c427ae357d6ccb1d895fbcd3de3 + languageName: node + linkType: hard + "has-proto@npm:^1.0.1": version: 1.0.1 resolution: "has-proto@npm:1.0.1" @@ -30805,33 +32073,6 @@ __metadata: languageName: node linkType: hard -"hast-util-heading-rank@npm:^3.0.0": - version: 3.0.0 - resolution: "hast-util-heading-rank@npm:3.0.0" - dependencies: - "@types/hast": ^3.0.0 - checksum: e5ce4ec9e8017b24ab72702fa0dd401ec6eaf32574120d71c2aa4e8e0f43829dba2e291f49d305a47e8d65b82a9c5adad7985385dc5bc8370f8cec7c8f9313d3 - languageName: node - linkType: hard - -"hast-util-is-element@npm:^3.0.0": - version: 3.0.0 - resolution: "hast-util-is-element@npm:3.0.0" - dependencies: - "@types/hast": ^3.0.0 - checksum: 82569a420eda5877c52fdbbdbe26675f012c02d70813dfd19acffdee328e42e4bd0b7ae34454cfcbcb932b2bedbd7ddc119f943a0cfb234120f9456d6c0c4331 - languageName: node - linkType: hard - -"hast-util-to-string@npm:^3.0.0": - version: 3.0.0 - resolution: "hast-util-to-string@npm:3.0.0" - dependencies: - "@types/hast": ^3.0.0 - checksum: 64f7f4f2b7a69b2ebddd1c87a29eae5f718d593d2154a46de2fa21f6ca8bfbda50ad71a5794f5952ae450f4da23a8bc811db348098b09916b9553cd933aefe9a - languageName: node - linkType: hard - "he@npm:^1.2.0": version: 1.2.0 resolution: "he@npm:1.2.0" @@ -31252,6 +32493,16 @@ __metadata: languageName: node linkType: hard +"https-proxy-agent@npm:^4.0.0": + version: 4.0.0 + resolution: "https-proxy-agent@npm:4.0.0" + dependencies: + agent-base: 5 + debug: 4 + checksum: 19471d5aae3e747b1c98b17556647e2a1362e68220c6b19585a8527498f32e62e03c41d2872d059d8720d56846bd7460a80ac06f876bccfa786468ff40dd5eef + languageName: node + linkType: hard + "https-proxy-agent@npm:^7.0.1, https-proxy-agent@npm:^7.0.2, https-proxy-agent@npm:^7.0.3": version: 7.0.4 resolution: "https-proxy-agent@npm:7.0.4" @@ -31416,7 +32667,7 @@ __metadata: languageName: node linkType: hard -"ignore@npm:^5.0.4, ignore@npm:^5.2.4": +"ignore@npm:^5.0.4": version: 5.3.1 resolution: "ignore@npm:5.3.1" checksum: 71d7bb4c1dbe020f915fd881108cbe85a0db3d636a0ea3ba911393c53946711d13a9b1143c7e70db06d571a5822c0a324a6bcde5c9904e7ca5047f01f1bf8cd3 @@ -31758,10 +33009,10 @@ __metadata: languageName: node linkType: hard -"is-absolute-url@npm:^4.0.0": - version: 4.0.1 - resolution: "is-absolute-url@npm:4.0.1" - checksum: de172a718439982a54477fdae55f21be69ec0e6a4b205db5484975d2f4ee749851fd46c28f3790dfc51a274c2ed1d0f8457b6d1fff02ab829069fd9cc761e48c +"is-absolute-url@npm:^3.0.0": + version: 3.0.3 + resolution: "is-absolute-url@npm:3.0.3" + checksum: 5159b51d065d9ad29e16a2f78d6c0e41c43227caf90a45e659c54ea6fd50ef0595b1871ce392e84b1df7cfdcad9a8e66eec0813a029112188435abf115accb16 languageName: node linkType: hard @@ -31911,6 +33162,13 @@ __metadata: languageName: node linkType: hard +"is-deflate@npm:^1.0.0": + version: 1.0.0 + resolution: "is-deflate@npm:1.0.0" + checksum: c2f9f2d3db79ac50c5586697d1e69a55282a2b0cc5e437b3c470dd47f24e40b6216dcd7e024511e21381607bf57afa019343e3bd0e08a119032818b596004262 + languageName: node + linkType: hard + "is-directory@npm:^0.3.1": version: 0.3.1 resolution: "is-directory@npm:0.3.1" @@ -31998,6 +33256,13 @@ __metadata: languageName: node linkType: hard +"is-gzip@npm:^1.0.0": + version: 1.0.0 + resolution: "is-gzip@npm:1.0.0" + checksum: 0d28931c1f445fa29c900cf9f48e06e9d1d477a3bf7bd7332e7ce68f1333ccd8cb381de2f0f62a9a262d9c0912608a9a71b4a40e788e201b3dbd67072bb20d86 + languageName: node + linkType: hard + "is-hotkey@npm:^0.1.3, is-hotkey@npm:^0.1.4": version: 0.1.8 resolution: "is-hotkey@npm:0.1.8" @@ -32036,7 +33301,7 @@ __metadata: languageName: node linkType: hard -"is-nan@npm:^1.2.1": +"is-nan@npm:^1.2.1, is-nan@npm:^1.3.2": version: 1.3.2 resolution: "is-nan@npm:1.3.2" dependencies: @@ -33704,6 +34969,17 @@ __metadata: languageName: node linkType: hard +"lazy-universal-dotenv@npm:^4.0.0": + version: 4.0.0 + resolution: "lazy-universal-dotenv@npm:4.0.0" + dependencies: + app-root-dir: ^1.0.2 + dotenv: ^16.0.0 + dotenv-expand: ^10.0.0 + checksum: 196e0d701100144fbfe078d604a477573413ebf38dfe8d543748605e6a7074978508a3bb9f8135acd319db4fa947eef78836497163617d15a22163c59a00996b + languageName: node + linkType: hard + "lazy@npm:^1.0.11, lazy@npm:~1.0.11": version: 1.0.11 resolution: "lazy@npm:1.0.11" @@ -34597,15 +35873,6 @@ __metadata: languageName: node linkType: hard -"loupe@npm:^2.3.6, loupe@npm:^2.3.7": - version: 2.3.7 - resolution: "loupe@npm:2.3.7" - dependencies: - get-func-name: ^2.0.1 - checksum: 96c058ec7167598e238bb7fb9def2f9339215e97d6685d9c1e3e4bdb33d14600e11fe7a812cf0c003dfb73ca2df374f146280b2287cae9e8d989e9d7a69a203b - languageName: node - linkType: hard - "lowdb@npm:1.0.0": version: 1.0.0 resolution: "lowdb@npm:1.0.0" @@ -34848,12 +36115,12 @@ __metadata: languageName: node linkType: hard -"markdown-to-jsx@npm:^7.4.5": - version: 7.4.7 - resolution: "markdown-to-jsx@npm:7.4.7" +"markdown-to-jsx@npm:^7.1.8": + version: 7.5.0 + resolution: "markdown-to-jsx@npm:7.5.0" peerDependencies: react: ">= 0.14.0" - checksum: bb8a696c8a95dd67ac1eb44255f31cf17e60b6c2ff03bfcd51b5e28da17856c57d7a16da59fda7f3a4eedb01d7e92eeef57a10ff3abd5431e5c80059d4565016 + checksum: c9c6f1bfad5f2d9b1d3476eb0313ae3dffd0a9f14011c74efdd7c664fd32ee1842ef48abb16a496046f90361af49aa80a827e9d9c0bc04824a1986fdeb4d1852 languageName: node linkType: hard @@ -34952,6 +36219,22 @@ __metadata: languageName: node linkType: hard +"mdast-util-definitions@npm:^4.0.0": + version: 4.0.0 + resolution: "mdast-util-definitions@npm:4.0.0" + dependencies: + unist-util-visit: ^2.0.0 + checksum: 2325f20b82b3fb8cb5fda77038ee0bbdd44f82cfca7c48a854724b58bc1fe5919630a3ce7c45e210726df59d46c881d020b2da7a493bfd1ee36eb2bbfef5d78e + languageName: node + linkType: hard + +"mdast-util-to-string@npm:^1.0.0": + version: 1.1.0 + resolution: "mdast-util-to-string@npm:1.1.0" + checksum: eec1eb283f3341376c8398b67ce512a11ab3e3191e3dbd5644d32a26784eac8d5f6d0b0fb81193af00d75a2c545cde765c8b03e966bd890076efb5d357fb4fe2 + languageName: node + linkType: hard + "mdbid@npm:^1.0.0": version: 1.0.0 resolution: "mdbid@npm:1.0.0" @@ -35113,7 +36396,7 @@ __metadata: languageName: node linkType: hard -"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:~2.1.17, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": +"mime-types@npm:^2.1.12, mime-types@npm:^2.1.25, mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:~2.1.17, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": version: 2.1.35 resolution: "mime-types@npm:2.1.35" dependencies: @@ -35131,7 +36414,7 @@ __metadata: languageName: node linkType: hard -"mime@npm:2.6.0, mime@npm:^2.0.0, mime@npm:^2.4.2, mime@npm:^2.5.2": +"mime@npm:2.6.0, mime@npm:^2.0.0, mime@npm:^2.0.3, mime@npm:^2.4.2, mime@npm:^2.5.2": version: 2.6.0 resolution: "mime@npm:2.6.0" bin: @@ -35869,9 +37152,9 @@ __metadata: languageName: node linkType: hard -"node-fetch@npm:^2.6.1": - version: 2.6.9 - resolution: "node-fetch@npm:2.6.9" +"node-fetch@npm:^2.0.0, node-fetch@npm:^2.6.13, node-fetch@npm:^2.6.9": + version: 2.7.0 + resolution: "node-fetch@npm:2.7.0" dependencies: whatwg-url: ^5.0.0 peerDependencies: @@ -35879,13 +37162,13 @@ __metadata: peerDependenciesMeta: encoding: optional: true - checksum: acb04f9ce7224965b2b59e71b33c639794d8991efd73855b0b250921382b38331ffc9d61bce502571f6cc6e11a8905ca9b1b6d4aeb586ab093e2756a1fd190d0 + checksum: d76d2f5edb451a3f05b15115ec89fc6be39de37c6089f1b6368df03b91e1633fd379a7e01b7ab05089a25034b2023d959b47e59759cb38d88341b2459e89d6e5 languageName: node linkType: hard -"node-fetch@npm:^2.6.13, node-fetch@npm:^2.6.9": - version: 2.7.0 - resolution: "node-fetch@npm:2.7.0" +"node-fetch@npm:^2.6.1": + version: 2.6.9 + resolution: "node-fetch@npm:2.6.9" dependencies: whatwg-url: ^5.0.0 peerDependencies: @@ -35893,7 +37176,7 @@ __metadata: peerDependenciesMeta: encoding: optional: true - checksum: d76d2f5edb451a3f05b15115ec89fc6be39de37c6089f1b6368df03b91e1633fd379a7e01b7ab05089a25034b2023d959b47e59759cb38d88341b2459e89d6e5 + checksum: acb04f9ce7224965b2b59e71b33c639794d8991efd73855b0b250921382b38331ffc9d61bce502571f6cc6e11a8905ca9b1b6d4aeb586ab093e2756a1fd190d0 languageName: node linkType: hard @@ -36517,6 +37800,13 @@ __metadata: languageName: node linkType: hard +"object-inspect@npm:^1.13.1": + version: 1.13.2 + resolution: "object-inspect@npm:1.13.2" + checksum: 9f850b3c045db60e0e97746e809ee4090d6ce62195af17dd1e9438ac761394a7d8ec4f7906559aea5424eaf61e35d3e53feded2ccd5f62fcc7d9670d3c8eb353 + languageName: node + linkType: hard + "object-is@npm:^1.0.1, object-is@npm:^1.1.5": version: 1.1.5 resolution: "object-is@npm:1.1.5" @@ -36739,6 +38029,17 @@ __metadata: languageName: node linkType: hard +"open@npm:^8.0.4": + version: 8.4.2 + resolution: "open@npm:8.4.2" + dependencies: + define-lazy-prop: ^2.0.0 + is-docker: ^2.1.1 + is-wsl: ^2.2.0 + checksum: 6388bfff21b40cb9bd8f913f9130d107f2ed4724ea81a8fd29798ee322b361ca31fa2cdfb491a5c31e43a3996cfe9566741238c7a741ada8d7af1cb78d85cf26 + languageName: node + linkType: hard + "open@npm:^8.0.6, open@npm:^8.0.9, open@npm:^8.4.0": version: 8.4.0 resolution: "open@npm:8.4.0" @@ -37154,7 +38455,7 @@ __metadata: languageName: node linkType: hard -"pako@npm:^0.2.5": +"pako@npm:^0.2.5, pako@npm:~0.2.0": version: 0.2.9 resolution: "pako@npm:0.2.9" checksum: 055f9487cd57fbb78df84315873bbdd089ba286f3499daed47d2effdc6253e981f5db6898c23486de76d4a781559f890d643bd3a49f70f1b4a18019c98aa5125 @@ -37430,13 +38731,6 @@ __metadata: languageName: node linkType: hard -"path-type@npm:^5.0.0": - version: 5.0.0 - resolution: "path-type@npm:5.0.0" - checksum: 15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5 - languageName: node - linkType: hard - "pathe@npm:^1.1.2": version: 1.1.2 resolution: "pathe@npm:1.1.2" @@ -37444,13 +38738,6 @@ __metadata: languageName: node linkType: hard -"pathval@npm:^1.1.1": - version: 1.1.1 - resolution: "pathval@npm:1.1.1" - checksum: 090e3147716647fb7fb5b4b8c8e5b55e5d0a6086d085b6cd23f3d3c01fcf0ff56fd3cc22f2f4a033bd2e46ed55d61ed8379e123b42afe7d531a2a5fc8bb556d6 - languageName: node - linkType: hard - "pbkdf2@npm:^3.0.3, pbkdf2@npm:^3.1.2": version: 3.1.2 resolution: "pbkdf2@npm:3.1.2" @@ -37464,7 +38751,7 @@ __metadata: languageName: node linkType: hard -"peek-stream@npm:^1.1.3": +"peek-stream@npm:^1.1.0, peek-stream@npm:^1.1.3": version: 1.1.3 resolution: "peek-stream@npm:1.1.3" dependencies: @@ -37503,7 +38790,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf @@ -38959,7 +40246,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^2.8.3": +"prettier@npm:^2.8.0, prettier@npm:^2.8.3": version: 2.8.8 resolution: "prettier@npm:2.8.8" bin: @@ -38968,15 +40255,6 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^3.1.1": - version: 3.3.3 - resolution: "prettier@npm:3.3.3" - bin: - prettier: bin/prettier.cjs - checksum: bc8604354805acfdde6106852d14b045bb20827ad76a5ffc2455b71a8257f94de93f17f14e463fe844808d2ccc87248364a5691488a3304f1031326e62d9276e - languageName: node - linkType: hard - "pretty-bytes@npm:^5.6.0": version: 5.6.0 resolution: "pretty-bytes@npm:5.6.0" @@ -39039,6 +40317,13 @@ __metadata: languageName: node linkType: hard +"pretty-hrtime@npm:^1.0.3": + version: 1.0.3 + resolution: "pretty-hrtime@npm:1.0.3" + checksum: bae0e6832fe13c3de43d1a3d43df52bf6090499d74dc65a17f5552cb1a94f1f8019a23284ddf988c3c408a09678d743901e1d8f5b7a71bec31eeeac445bef371 + languageName: node + linkType: hard + "pretty-ms@npm:^9.0.0": version: 9.0.0 resolution: "pretty-ms@npm:9.0.0" @@ -39111,7 +40396,7 @@ __metadata: languageName: node linkType: hard -"progress@npm:2.0.3": +"progress@npm:2.0.3, progress@npm:^2.0.1": version: 2.0.3 resolution: "progress@npm:2.0.3" checksum: f67403fe7b34912148d9252cb7481266a354bd99ce82c835f79070643bb3c6583d10dbcfda4d41e04bbc1d8437e9af0fb1e1f2135727878f5308682a579429b7 @@ -39271,7 +40556,7 @@ __metadata: languageName: node linkType: hard -"proxy-from-env@npm:^1.1.0": +"proxy-from-env@npm:^1.0.0, proxy-from-env@npm:^1.1.0": version: 1.1.0 resolution: "proxy-from-env@npm:1.1.0" checksum: ed7fcc2ba0a33404958e34d95d18638249a68c430e30fcb6c478497d72739ba64ce9810a24f53a7d921d0c065e5b78e3822759800698167256b04659366ca4d4 @@ -39306,6 +40591,16 @@ __metadata: languageName: node linkType: hard +"pump@npm:^2.0.0": + version: 2.0.1 + resolution: "pump@npm:2.0.1" + dependencies: + end-of-stream: ^1.1.0 + once: ^1.3.1 + checksum: e9f26a17be00810bff37ad0171edb35f58b242487b0444f92fb7d78bc7d61442fa9b9c5bd93a43fd8fd8ddd3cc75f1221f5e04c790f42907e5baab7cf5e2b931 + languageName: node + linkType: hard + "pump@npm:^3.0.0": version: 3.0.0 resolution: "pump@npm:3.0.0" @@ -39316,6 +40611,17 @@ __metadata: languageName: node linkType: hard +"pumpify@npm:^1.3.3": + version: 1.5.1 + resolution: "pumpify@npm:1.5.1" + dependencies: + duplexify: ^3.6.0 + inherits: ^2.0.3 + pump: ^2.0.0 + checksum: 26ca412ec8d665bd0d5e185c1b8f627728eff603440d75d22a58e421e3c66eaf86ec6fc6a6efc54808ecef65979279fa8e99b109a23ec1fa8d79f37e6978c9bd + languageName: node + linkType: hard + "pumpify@npm:^2.0.1": version: 2.0.1 resolution: "pumpify@npm:2.0.1" @@ -39361,6 +40667,24 @@ __metadata: languageName: node linkType: hard +"puppeteer-core@npm:^2.1.1": + version: 2.1.1 + resolution: "puppeteer-core@npm:2.1.1" + dependencies: + "@types/mime-types": ^2.1.0 + debug: ^4.1.0 + extract-zip: ^1.6.6 + https-proxy-agent: ^4.0.0 + mime: ^2.0.3 + mime-types: ^2.1.25 + progress: ^2.0.1 + proxy-from-env: ^1.0.0 + rimraf: ^2.6.1 + ws: ^6.1.0 + checksum: 2ddb597ef1b2d162b4aa49833b977734129edf7c8fa558fc38c59d273e79aa1bd079481c642de87f7163665f7f37aa52683da2716bafb7d3cab68c262c36ec28 + languageName: node + linkType: hard + "pure-rand@npm:^6.0.0": version: 6.0.2 resolution: "pure-rand@npm:6.0.2" @@ -39416,6 +40740,15 @@ __metadata: languageName: node linkType: hard +"qs@npm:^6.10.0": + version: 6.13.0 + resolution: "qs@npm:6.13.0" + dependencies: + side-channel: ^1.0.6 + checksum: e9404dc0fc2849245107108ce9ec2766cde3be1b271de0bf1021d049dc5b98d1a2901e67b431ac5509f865420a7ed80b7acb3980099fe1c118a1c5d2e1432ad8 + languageName: node + linkType: hard + "querystring@npm:0.2.0": version: 0.2.0 resolution: "querystring@npm:0.2.0" @@ -39474,6 +40807,13 @@ __metadata: languageName: node linkType: hard +"ramda@npm:0.29.0": + version: 0.29.0 + resolution: "ramda@npm:0.29.0" + checksum: 9ab26c06eb7545cbb7eebcf75526d6ee2fcaae19e338f165b2bf32772121e7b28192d6664d1ba222ff76188ba26ab307342d66e805dbb02c860560adc4d5dd57 + languageName: node + linkType: hard + "randombytes@npm:^2.0.0, randombytes@npm:^2.0.1, randombytes@npm:^2.0.5, randombytes@npm:^2.1.0": version: 2.1.0 resolution: "randombytes@npm:2.1.0" @@ -40083,6 +41423,48 @@ __metadata: languageName: node linkType: hard +"react-refresh@npm:^0.14.0": + version: 0.14.2 + resolution: "react-refresh@npm:0.14.2" + checksum: d80db4bd40a36dab79010dc8aa317a5b931f960c0d83c4f3b81f0552cbcf7f29e115b84bb7908ec6a1eb67720fff7023084eff73ece8a7ddc694882478464382 + languageName: node + linkType: hard + +"react-remove-scroll-bar@npm:^2.3.3": + version: 2.3.6 + resolution: "react-remove-scroll-bar@npm:2.3.6" + dependencies: + react-style-singleton: ^2.2.1 + tslib: ^2.0.0 + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: e793fe110e2ea60d5724d0b60f09de1f6cd1b080df00df9e68bb9a1b985895830e703194647059fdc22402a67a89b7673a5260773b89bcd98031fd99bc91aefa + languageName: node + linkType: hard + +"react-remove-scroll@npm:2.5.5": + version: 2.5.5 + resolution: "react-remove-scroll@npm:2.5.5" + dependencies: + react-remove-scroll-bar: ^2.3.3 + react-style-singleton: ^2.2.1 + tslib: ^2.1.0 + use-callback-ref: ^1.3.0 + use-sidecar: ^1.1.2 + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 2c7fe9cbd766f5e54beb4bec2e2efb2de3583037b23fef8fa511ab426ed7f1ae992382db5acd8ab5bfb030a4b93a06a2ebca41377d6eeaf0e6791bb0a59616a4 + languageName: node + linkType: hard + "react-resizable-panels@npm:^2.0.19": version: 2.0.19 resolution: "react-resizable-panels@npm:2.0.19" @@ -40160,6 +41542,23 @@ __metadata: languageName: node linkType: hard +"react-style-singleton@npm:^2.2.1": + version: 2.2.1 + resolution: "react-style-singleton@npm:2.2.1" + dependencies: + get-nonce: ^1.0.0 + invariant: ^2.2.4 + tslib: ^2.0.0 + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 7ee8ef3aab74c7ae1d70ff34a27643d11ba1a8d62d072c767827d9ff9a520905223e567002e0bf6c772929d8ea1c781a3ba0cc4a563e92b1e3dc2eaa817ecbe8 + languageName: node + linkType: hard + "react-transition-group@npm:2": version: 2.9.0 resolution: "react-transition-group@npm:2.9.0" @@ -40500,7 +41899,7 @@ __metadata: languageName: node linkType: hard -"recast@npm:^0.23.3, recast@npm:^0.23.5": +"recast@npm:^0.23.1, recast@npm:^0.23.3": version: 0.23.9 resolution: "recast@npm:0.23.9" dependencies: @@ -40704,33 +42103,6 @@ __metadata: languageName: node linkType: hard -"rehype-external-links@npm:^3.0.0": - version: 3.0.0 - resolution: "rehype-external-links@npm:3.0.0" - dependencies: - "@types/hast": ^3.0.0 - "@ungap/structured-clone": ^1.0.0 - hast-util-is-element: ^3.0.0 - is-absolute-url: ^4.0.0 - space-separated-tokens: ^2.0.0 - unist-util-visit: ^5.0.0 - checksum: f776f306a2698a67b03665280fcc00448a5bf59b997d83fbb70fc3d71acff2c3025c70ee1840f48ca7dff209217ebe9adad085dc7caf9e5907badf8b104898b6 - languageName: node - linkType: hard - -"rehype-slug@npm:^6.0.0": - version: 6.0.0 - resolution: "rehype-slug@npm:6.0.0" - dependencies: - "@types/hast": ^3.0.0 - github-slugger: ^2.0.0 - hast-util-heading-rank: ^3.0.0 - hast-util-to-string: ^3.0.0 - unist-util-visit: ^5.0.0 - checksum: 0e13ec558eb142d14a6daeab21bbef7c9230bfabec45987e15a24283650226eae3898ad162b8cb29ee39a8bce536bcc013eeab7dc6faa0295b0e91612a8c9f6e - languageName: node - linkType: hard - "reinterval@npm:^1.1.0": version: 1.1.0 resolution: "reinterval@npm:1.1.0" @@ -40752,6 +42124,30 @@ __metadata: languageName: node linkType: hard +"remark-external-links@npm:^8.0.0": + version: 8.0.0 + resolution: "remark-external-links@npm:8.0.0" + dependencies: + extend: ^3.0.0 + is-absolute-url: ^3.0.0 + mdast-util-definitions: ^4.0.0 + space-separated-tokens: ^1.0.0 + unist-util-visit: ^2.0.0 + checksum: 48c4a41fe38916f79febb390b0c4deefe82b554dd36dc534262d851860d17fb6d15d78d515f29194e5fa48db5f01f4405a6f6dd077aaf32812a2efffb01700d7 + languageName: node + linkType: hard + +"remark-slug@npm:^6.0.0": + version: 6.1.0 + resolution: "remark-slug@npm:6.1.0" + dependencies: + github-slugger: ^1.0.0 + mdast-util-to-string: ^1.0.0 + unist-util-visit: ^2.0.0 + checksum: 81fff0dcfaf6d6117ef1293bb1d26c3e25483d99c65c22434298eed93583a89ea5d7b94063d9a7f47c0647a708ce84f00ff62d274503f248feec03c344cabb20 + languageName: node + linkType: hard + "renderkid@npm:^3.0.0": version: 3.0.0 resolution: "renderkid@npm:3.0.0" @@ -41115,7 +42511,7 @@ __metadata: languageName: node linkType: hard -"rimraf@npm:^2.6.2": +"rimraf@npm:^2.6.1, rimraf@npm:^2.6.2": version: 2.7.1 resolution: "rimraf@npm:2.7.1" dependencies: @@ -41718,6 +43114,20 @@ __metadata: languageName: node linkType: hard +"set-function-length@npm:^1.2.1": + version: 1.2.2 + resolution: "set-function-length@npm:1.2.2" + dependencies: + define-data-property: ^1.1.4 + es-errors: ^1.3.0 + function-bind: ^1.1.2 + get-intrinsic: ^1.2.4 + gopd: ^1.0.1 + has-property-descriptors: ^1.0.2 + checksum: a8248bdacdf84cb0fab4637774d9fb3c7a8e6089866d04c817583ff48e14149c87044ce683d7f50759a8c50fb87c7a7e173535b06169c87ef76f5fb276dfff72 + languageName: node + linkType: hard + "set-function-name@npm:^2.0.0": version: 2.0.1 resolution: "set-function-name@npm:2.0.1" @@ -41877,6 +43287,18 @@ __metadata: languageName: node linkType: hard +"side-channel@npm:^1.0.6": + version: 1.0.6 + resolution: "side-channel@npm:1.0.6" + dependencies: + call-bind: ^1.0.7 + es-errors: ^1.3.0 + get-intrinsic: ^1.2.4 + object-inspect: ^1.13.1 + checksum: bfc1afc1827d712271453e91b7cd3878ac0efd767495fd4e594c4c2afaa7963b7b510e249572bfd54b0527e66e4a12b61b80c061389e129755f34c493aad9b97 + languageName: node + linkType: hard + "signal-exit@npm:3.0.7, signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.2, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7": version: 3.0.7 resolution: "signal-exit@npm:3.0.7" @@ -41982,13 +43404,6 @@ __metadata: languageName: node linkType: hard -"slash@npm:^5.1.0": - version: 5.1.0 - resolution: "slash@npm:5.1.0" - checksum: 70434b34c50eb21b741d37d455110258c42d2cf18c01e6518aeb7299f3c6e626330c889c0c552b5ca2ef54a8f5a74213ab48895f0640717cacefeef6830a1ba4 - languageName: node - linkType: hard - "slice-ansi@npm:0.0.4": version: 0.0.4 resolution: "slice-ansi@npm:0.0.4" @@ -42264,10 +43679,10 @@ __metadata: languageName: node linkType: hard -"space-separated-tokens@npm:^2.0.0": - version: 2.0.2 - resolution: "space-separated-tokens@npm:2.0.2" - checksum: 202e97d7ca1ba0758a0aa4fe226ff98142073bcceeff2da3aad037968878552c3bbce3b3231970025375bbba5aee00c5b8206eda408da837ab2dc9c0f26be990 +"space-separated-tokens@npm:^1.0.0": + version: 1.1.5 + resolution: "space-separated-tokens@npm:1.1.5" + checksum: 8ef68f1cfa8ccad316b7f8d0df0919d0f1f6d32101e8faeee34ea3a923ce8509c1ad562f57388585ee4951e92d27afa211ed0a077d3d5995b5ba9180331be708 languageName: node linkType: hard @@ -42516,6 +43931,13 @@ __metadata: languageName: node linkType: hard +"store2@npm:^2.14.2": + version: 2.14.3 + resolution: "store2@npm:2.14.3" + checksum: 971a47aa479ff5491f89ee3fcbaf4ddafe0cfb55ac2f4cf4b4fc7b21d349fa3a761f79368d1573b9f65af08b3cf0f6973eed56a213b8bb4cb7e820ac048d1613 + languageName: node + linkType: hard + "store@npm:^2.0.12": version: 2.0.12 resolution: "store@npm:2.0.12" @@ -42523,43 +43945,15 @@ __metadata: languageName: node linkType: hard -"storybook@npm:^8.2.9": - version: 8.2.9 - resolution: "storybook@npm:8.2.9" +"storybook@npm:7.6.20": + version: 7.6.20 + resolution: "storybook@npm:7.6.20" dependencies: - "@babel/core": ^7.24.4 - "@babel/types": ^7.24.0 - "@storybook/codemod": 8.2.9 - "@storybook/core": 8.2.9 - "@types/semver": ^7.3.4 - "@yarnpkg/fslib": 2.10.3 - "@yarnpkg/libzip": 2.3.0 - chalk: ^4.1.0 - commander: ^6.2.1 - cross-spawn: ^7.0.3 - detect-indent: ^6.1.0 - envinfo: ^7.7.3 - execa: ^5.0.0 - fd-package-json: ^1.2.0 - find-up: ^5.0.0 - fs-extra: ^11.1.0 - giget: ^1.0.0 - globby: ^14.0.1 - jscodeshift: ^0.15.1 - leven: ^3.1.0 - ora: ^5.4.1 - prettier: ^3.1.1 - prompts: ^2.4.0 - semver: ^7.3.7 - strip-json-comments: ^3.0.1 - tempy: ^3.1.0 - tiny-invariant: ^1.3.1 - ts-dedent: ^2.0.0 + "@storybook/cli": 7.6.20 bin: - getstorybook: ./bin/index.cjs - sb: ./bin/index.cjs - storybook: ./bin/index.cjs - checksum: bf36183ada2ea362fad4225937cdc4ac9833b1d8d66d847dd9c42f7db4825ce79b9aadcf17151845487e7aa192255729f33267225562fc9d0653a8d9a3c56331 + sb: ./index.js + storybook: ./index.js + checksum: 7442d0bf404fafdfa6921d388b7af78e835bd4278ec7cc0c6565d3723cb1cd7d24621a97186abd553f1345ddf78628e517656af64bcb4a3d9e9c6253b01461e8 languageName: node linkType: hard @@ -43135,6 +44529,13 @@ __metadata: languageName: node linkType: hard +"synchronous-promise@npm:^2.0.15": + version: 2.0.17 + resolution: "synchronous-promise@npm:2.0.17" + checksum: 7b1342c93741f3f92ebde1edf5d6ce8dde2278de948d84e9bd85e232c16c0d77c90c4940f9975be3effcb20f047cfb0f16fa311c3b4e092c22f3bf2889fb0fb4 + languageName: node + linkType: hard + "systeminformation@npm:^5.7": version: 5.22.6 resolution: "systeminformation@npm:5.22.6" @@ -43224,7 +44625,7 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^2.0.0": +"tar-fs@npm:^2.0.0, tar-fs@npm:^2.1.1": version: 2.1.1 resolution: "tar-fs@npm:2.1.1" dependencies: @@ -43327,10 +44728,10 @@ __metadata: languageName: node linkType: hard -"temp-dir@npm:^3.0.0": - version: 3.0.0 - resolution: "temp-dir@npm:3.0.0" - checksum: 577211e995d1d584dd60f1469351d45e8a5b4524e4a9e42d3bdd12cfde1d0bb8f5898311bef24e02aaafb69514c1feb58c7b4c33dcec7129da3b0861a4ca935b +"temp-dir@npm:^2.0.0": + version: 2.0.0 + resolution: "temp-dir@npm:2.0.0" + checksum: cc4f0404bf8d6ae1a166e0e64f3f409b423f4d1274d8c02814a59a5529f07db6cd070a749664141b992b2c1af337fa9bb451a460a43bb9bcddc49f235d3115aa languageName: node linkType: hard @@ -43353,15 +44754,16 @@ __metadata: languageName: node linkType: hard -"tempy@npm:^3.1.0": - version: 3.1.0 - resolution: "tempy@npm:3.1.0" +"tempy@npm:^1.0.1": + version: 1.0.1 + resolution: "tempy@npm:1.0.1" dependencies: - is-stream: ^3.0.0 - temp-dir: ^3.0.0 - type-fest: ^2.12.2 - unique-string: ^3.0.0 - checksum: c4ee8ce7700c6d0652f0828f15f7628e599e57f34352a7fe82abf8f1ebc36f10a5f83861b6c60cce55c321d8f7861d1fecbd9fb4c00de55bf460390bea42f7da + del: ^6.0.0 + is-stream: ^2.0.0 + temp-dir: ^2.0.0 + type-fest: ^0.16.0 + unique-string: ^2.0.0 + checksum: e77ca4440af18e42dc64d8903b7ed0be673455b76680ff94a7d7c6ee7c16f7604bdcdee3c39436342b1082c23eda010dbe48f6094e836e0bd53c8b1aa63e5b95 languageName: node linkType: hard @@ -43635,13 +45037,6 @@ __metadata: languageName: node linkType: hard -"tinyspy@npm:^2.2.0": - version: 2.2.1 - resolution: "tinyspy@npm:2.2.1" - checksum: 170d6232e87f9044f537b50b406a38fbfd6f79a261cd12b92879947bd340939a833a678632ce4f5c4a6feab4477e9c21cd43faac3b90b68b77dd0536c4149736 - languageName: node - linkType: hard - "tmp@npm:^0.0.33": version: 0.0.33 resolution: "tmp@npm:0.0.33" @@ -43722,6 +45117,13 @@ __metadata: languageName: node linkType: hard +"tocbot@npm:^4.20.1": + version: 4.29.0 + resolution: "tocbot@npm:4.29.0" + checksum: 7c9c6ed0de08554f96faa5b407ffde27ed34743019a0a2e23f4ec9db20b4fa49e20149377ea3c4e90ad2604d445f9c08c4a654572868e1c10e8b15bcdf7fc9d8 + languageName: node + linkType: hard + "toidentifier@npm:1.0.1": version: 1.0.1 resolution: "toidentifier@npm:1.0.1" @@ -43944,7 +45346,7 @@ __metadata: languageName: node linkType: hard -"tsconfig-paths@npm:^4.1.2, tsconfig-paths@npm:^4.2.0": +"tsconfig-paths@npm:^4.1.2": version: 4.2.0 resolution: "tsconfig-paths@npm:4.2.0" dependencies: @@ -44100,10 +45502,10 @@ __metadata: languageName: node linkType: hard -"type-detect@npm:^4.0.0, type-detect@npm:^4.1.0": - version: 4.1.0 - resolution: "type-detect@npm:4.1.0" - checksum: 3b32f873cd02bc7001b00a61502b7ddc4b49278aabe68d652f732e1b5d768c072de0bc734b427abf59d0520a5f19a2e07309ab921ef02018fa1cb4af155cdb37 +"type-fest@npm:^0.16.0": + version: 0.16.0 + resolution: "type-fest@npm:0.16.0" + checksum: 1a4102c06dc109db00418c753062e206cab65befd469d000ece4452ee649bf2a9cf57686d96fb42326bc9d918d9a194d4452897b486dcc41989e5c99e4e87094 languageName: node linkType: hard @@ -44149,14 +45551,7 @@ __metadata: languageName: node linkType: hard -"type-fest@npm:^1.0.1": - version: 1.4.0 - resolution: "type-fest@npm:1.4.0" - checksum: b011c3388665b097ae6a109a437a04d6f61d81b7357f74cbcb02246f2f5bd72b888ae33631b99871388122ba0a87f4ff1c94078e7119ff22c70e52c0ff828201 - languageName: node - linkType: hard - -"type-fest@npm:^2.12.2, type-fest@npm:^2.19.0, type-fest@npm:~2.19": +"type-fest@npm:^2.19.0, type-fest@npm:~2.19": version: 2.19.0 resolution: "type-fest@npm:2.19.0" checksum: a4ef07ece297c9fba78fc1bd6d85dff4472fe043ede98bd4710d2615d15776902b595abf62bd78339ed6278f021235fb28a96361f8be86ed754f778973a0d278 @@ -44377,13 +45772,6 @@ __metadata: languageName: node linkType: hard -"unicorn-magic@npm:^0.1.0": - version: 0.1.0 - resolution: "unicorn-magic@npm:0.1.0" - checksum: 48c5882ca3378f380318c0b4eb1d73b7e3c5b728859b060276e0a490051d4180966beeb48962d850fd0c6816543bcdfc28629dcd030bb62a286a2ae2acb5acb6 - languageName: node - linkType: hard - "uniqid@npm:5.4.0, uniqid@npm:^5.0.3, uniqid@npm:^5.2.0": version: 5.4.0 resolution: "uniqid@npm:5.4.0" @@ -44427,42 +45815,40 @@ __metadata: languageName: node linkType: hard -"unique-string@npm:^3.0.0": - version: 3.0.0 - resolution: "unique-string@npm:3.0.0" +"unique-string@npm:^2.0.0": + version: 2.0.0 + resolution: "unique-string@npm:2.0.0" dependencies: - crypto-random-string: ^4.0.0 - checksum: 1a1e2e7d02eab1bb10f720475da735e1990c8a5ff34edd1a3b6bc31590cb4210b7a1233d779360cc622ce11c211e43afa1628dd658f35d3e6a89964b622940df + crypto-random-string: ^2.0.0 + checksum: ef68f639136bcfe040cf7e3cd7a8dff076a665288122855148a6f7134092e6ed33bf83a7f3a9185e46c98dddc445a0da6ac25612afa1a7c38b8b654d6c02498e languageName: node linkType: hard -"unist-util-is@npm:^6.0.0": - version: 6.0.0 - resolution: "unist-util-is@npm:6.0.0" - dependencies: - "@types/unist": ^3.0.0 - checksum: f630a925126594af9993b091cf807b86811371e465b5049a6283e08537d3e6ba0f7e248e1e7dab52cfe33f9002606acef093441137181b327f6fe504884b20e2 +"unist-util-is@npm:^4.0.0": + version: 4.1.0 + resolution: "unist-util-is@npm:4.1.0" + checksum: 726484cd2adc9be75a939aeedd48720f88294899c2e4a3143da413ae593f2b28037570730d5cf5fd910ff41f3bc1501e3d636b6814c478d71126581ef695f7ea languageName: node linkType: hard -"unist-util-visit-parents@npm:^6.0.0": - version: 6.0.1 - resolution: "unist-util-visit-parents@npm:6.0.1" +"unist-util-visit-parents@npm:^3.0.0": + version: 3.1.1 + resolution: "unist-util-visit-parents@npm:3.1.1" dependencies: - "@types/unist": ^3.0.0 - unist-util-is: ^6.0.0 - checksum: 08927647c579f63b91aafcbec9966dc4a7d0af1e5e26fc69f4e3e6a01215084835a2321b06f3cbe7bf7914a852830fc1439f0fc3d7153d8804ac3ef851ddfa20 + "@types/unist": ^2.0.0 + unist-util-is: ^4.0.0 + checksum: 1170e397dff88fab01e76d5154981666eb0291019d2462cff7a2961a3e76d3533b42eaa16b5b7e2d41ad42a5ea7d112301458283d255993e660511387bf67bc3 languageName: node linkType: hard -"unist-util-visit@npm:^5.0.0": - version: 5.0.0 - resolution: "unist-util-visit@npm:5.0.0" +"unist-util-visit@npm:^2.0.0": + version: 2.0.3 + resolution: "unist-util-visit@npm:2.0.3" dependencies: - "@types/unist": ^3.0.0 - unist-util-is: ^6.0.0 - unist-util-visit-parents: ^6.0.0 - checksum: 9ec42e618e7e5d0202f3c191cd30791b51641285732767ee2e6bcd035931032e3c1b29093f4d7fd0c79175bbc1f26f24f26ee49770d32be76f8730a652a857e6 + "@types/unist": ^2.0.0 + unist-util-is: ^4.0.0 + unist-util-visit-parents: ^3.0.0 + checksum: 1fe19d500e212128f96d8c3cfa3312846e586b797748a1fd195fe6479f06bc90a6f6904deb08eefc00dd58e83a1c8a32fb8677252d2273ad7a5e624525b69b8f languageName: node linkType: hard @@ -44687,6 +46073,21 @@ __metadata: languageName: node linkType: hard +"use-callback-ref@npm:^1.3.0": + version: 1.3.2 + resolution: "use-callback-ref@npm:1.3.2" + dependencies: + tslib: ^2.0.0 + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: df690f2032d56aabcea0400313a04621429f45bceb4d65d38829b3680cae3856470ce72958cb7224b332189d8faef54662a283c0867dd7c769f9a5beff61787d + languageName: node + linkType: hard + "use-deep-compare-effect@npm:^1.6.1": version: 1.8.1 resolution: "use-deep-compare-effect@npm:1.8.1" @@ -44699,6 +46100,34 @@ __metadata: languageName: node linkType: hard +"use-resize-observer@npm:^9.1.0": + version: 9.1.0 + resolution: "use-resize-observer@npm:9.1.0" + dependencies: + "@juggle/resize-observer": ^3.3.1 + peerDependencies: + react: 16.8.0 - 18 + react-dom: 16.8.0 - 18 + checksum: 92be0ac34a3b3cf884cd55847c90792b5b44833dc258e96d650152815ad246afe45825aa223332203004d836535a927ab74f18dc0313229e2c7c69510eddf382 + languageName: node + linkType: hard + +"use-sidecar@npm:^1.1.2": + version: 1.1.2 + resolution: "use-sidecar@npm:1.1.2" + dependencies: + detect-node-es: ^1.1.0 + tslib: ^2.0.0 + peerDependencies: + "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 925d1922f9853e516eaad526b6fed1be38008073067274f0ecc3f56b17bb8ab63480140dd7c271f94150027c996cea4efe83d3e3525e8f3eda22055f6a39220b + languageName: node + linkType: hard + "utf8-byte-length@npm:^1.0.1": version: 1.0.4 resolution: "utf8-byte-length@npm:1.0.4" @@ -44732,7 +46161,7 @@ __metadata: languageName: node linkType: hard -"util@npm:^0.12.0, util@npm:^0.12.4": +"util@npm:^0.12.0, util@npm:^0.12.4, util@npm:^0.12.5": version: 0.12.5 resolution: "util@npm:0.12.5" dependencies: @@ -45013,6 +46442,16 @@ __metadata: languageName: node linkType: hard +"watchpack@npm:^2.2.0": + version: 2.4.2 + resolution: "watchpack@npm:2.4.2" + dependencies: + glob-to-regexp: ^0.4.1 + graceful-fs: ^4.1.2 + checksum: 92d9d52ce3d16fd83ed6994d1dd66a4d146998882f4c362d37adfea9ab77748a5b4d1e0c65fa104797928b2d40f635efa8f9b925a6265428a69f1e1852ca3441 + languageName: node + linkType: hard + "watchpack@npm:^2.4.1": version: 2.4.1 resolution: "watchpack@npm:2.4.1" @@ -45090,7 +46529,7 @@ __metadata: languageName: node linkType: hard -"webpack-dev-middleware@npm:^6.1.2": +"webpack-dev-middleware@npm:^6.1.1": version: 6.1.3 resolution: "webpack-dev-middleware@npm:6.1.3" dependencies: @@ -45195,7 +46634,14 @@ __metadata: languageName: node linkType: hard -"webpack-virtual-modules@npm:^0.6.0, webpack-virtual-modules@npm:^0.6.2": +"webpack-virtual-modules@npm:^0.5.0": + version: 0.5.0 + resolution: "webpack-virtual-modules@npm:0.5.0" + checksum: 22b59257b55c89d11ae295b588b683ee9fdf3aeb591bc7b6f88ac1d69cb63f4fcb507666ea986866dfae161a1fa534ad6fb4e2ea91bbcd0a6d454368d7d4c64b + languageName: node + linkType: hard + +"webpack-virtual-modules@npm:^0.6.2": version: 0.6.2 resolution: "webpack-virtual-modules@npm:0.6.2" checksum: 7e8e1d63f35864c815420cc2f27da8561a1e028255040698a352717de0ba46d3b3faf16f06c1a1965217054c4c2894eb9af53a85451870e919b5707ce9c5822d @@ -45732,6 +47178,15 @@ __metadata: languageName: node linkType: hard +"ws@npm:^6.1.0": + version: 6.2.3 + resolution: "ws@npm:6.2.3" + dependencies: + async-limiter: ~1.0.0 + checksum: bbc96ff5628832d80669a88fd117487bf070492dfaa50df77fa442a2b119792e772f4365521e0a8e025c0d51173c54fa91adab165c11b8e0674685fdd36844a5 + languageName: node + linkType: hard + "ws@npm:^7.0.0": version: 7.5.9 resolution: "ws@npm:7.5.9" From 5f002a490d44ea789e81108e4898cc790e3b0fa0 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 10 Sep 2024 16:33:05 +0200 Subject: [PATCH 11/62] wip: create Avatar component --- packages/ui/src/Avatar/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/Avatar/Avatar.tsx b/packages/ui/src/Avatar/Avatar.tsx index d59986640f4..d78e6ea2133 100644 --- a/packages/ui/src/Avatar/Avatar.tsx +++ b/packages/ui/src/Avatar/Avatar.tsx @@ -57,7 +57,7 @@ export const Avatar = (props: AvatarProps) => { className={className} style={{ width, height, ...style }} image={} - fallback={} + fallback={{fallbackText}} /> ); }; From d8f6de5e9885dd3ae2e150796f8b3b03adcb2855 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 1 Oct 2024 10:09:14 +0200 Subject: [PATCH 12/62] chore: run prettier --- .../admin-ui/src/Avatar/Avatar.stories.tsx | 13 +- packages/admin-ui/src/Avatar/Avatar.tsx | 18 +-- packages/admin-ui/src/styles.scss | 96 +++++++++++- packages/admin-ui/tailwind.config.js | 137 +++++++++++++----- .../src/ui/views/Users/UsersDataList.tsx | 4 +- 5 files changed, 208 insertions(+), 60 deletions(-) diff --git a/packages/admin-ui/src/Avatar/Avatar.stories.tsx b/packages/admin-ui/src/Avatar/Avatar.stories.tsx index 5c6ca9650fd..8c7dda1e52a 100644 --- a/packages/admin-ui/src/Avatar/Avatar.stories.tsx +++ b/packages/admin-ui/src/Avatar/Avatar.stories.tsx @@ -16,7 +16,7 @@ type Story = StoryObj; export const Default: Story = { args: { - image: , + image: , fallback: W }, argTypes: { @@ -24,10 +24,6 @@ export const Default: Story = { control: "select", options: ["sm", "md", "lg", "xl"] }, - variant: { - control: "select", - options: ["image"] - } } }; @@ -37,3 +33,10 @@ export const Sizes: Story = { size: "lg" } }; + +export const Fallback: Story = { + args: { + image: , + fallback: W, + } +}; diff --git a/packages/admin-ui/src/Avatar/Avatar.tsx b/packages/admin-ui/src/Avatar/Avatar.tsx index ff4c62ba67d..1235ac9b843 100644 --- a/packages/admin-ui/src/Avatar/Avatar.tsx +++ b/packages/admin-ui/src/Avatar/Avatar.tsx @@ -29,7 +29,7 @@ const AvatarFallbackBase = React.forwardRef< , AvatarProps>( - ({ image, fallback, className, size, variant, ...props }, ref) => ( + ({ image, fallback, className, size, ...props }, ref) => ( diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index a973d113489..3009bf48698 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -4,6 +4,91 @@ @layer base { :root { + // New variables from design. + + // Background colors. + --bg-neutral-dark: #191c20; + --bg-neutral-xstrong: #59626d; + --bg-neutral-strong: #bec3cc; + --bg-neutral-muted: #e3e5eb; + --bg-neutral-disabled: #f0f1f3; + --bg-neutral-dimmed: #f0f1f3; + --bg-neutral-light: #f7f8f9; + --bg-neutral-subtle: #fafbfb; + --bg-neutral: #191c20; + + --bg-primary: 15 96% 56%; + --bg-primary-strong: 15 90% 50%; + --bg-primary-xstrong: 15 85% 45%; + --bg-primary-muted: 15 80% 60%; + --bg-primary-subtle: 15 75% 70%; + --bg-primary-disabled: 15 70% 80%; + + --bg-secondary: 210 40% 96.1%; + --bg-secondary-strong: 210 35% 85%; + --bg-secondary-xstrong: 210 30% 70%; + --bg-secondary-muted: 210 25% 60%; + --bg-secondary-subtle: 210 20% 50%; + --bg-secondary-disabled: 210 15% 40%; + + --bg-success: 120 60% 40%; + --bg-success-strong: 120 55% 45%; + --bg-success-xstrong: 120 50% 50%; + --bg-success-muted: 120 45% 55%; + --bg-success-subtle: 120 40% 60%; + --bg-success-disabled: 120 35% 70%; + + --bg-destructive: 0 100% 50%; + --bg-destructive-strong: 0 90% 40%; + --bg-destructive-xstrong: 0 80% 30%; + --bg-destructive-muted: 0 70% 60%; + --bg-destructive-subtle: 0 60% 70%; + --bg-destructive-disabled: 0 50% 80%; + + --bg-warning: 45 100% 50%; + --bg-warning-strong: 45 90% 45%; + --bg-warning-xstrong: 45 85% 40%; + --bg-warning-muted: 45 80% 60%; + --bg-warning-subtle: 45 75% 70%; + --bg-warning-disabled: 45 70% 80%; + + // Text colors. + --text-primary: 210 96% 56%; + --text-subtle: 210 85% 70%; + --text-muted: 210 80% 60%; + --text-dimmed: 210 75% 50%; + --text-disabled: 210 70% 40%; + --text-white: 0 0% 100%; + + // Border color. + --border-color-neutral-dark: 210 96% 56%; + --border-color-neutral-strong: 210 96% 56%; + --border-color-neutral-muted: 210 96% 56%; + --border-color-neutral-dimmed: 210 96% 56%; + --border-color-neutral-subtle: 210 96% 56%; + --border-color-accent-default: 210 96% 56%; + --border-color-accent-subtle: 210 96% 56%; + --border-color-destructive-default: 210 96% 56%; + --border-color-success-default: 210 96% 56%; + + // Border radius. + --radius-xs: 2px; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --radius-xl: 24px; + --radius-xxl: 36px; + + // Padding. + --padding-xs: 4px; + --padding-sm: 8px; + --padding-md: 16px; + --padding-lg: 24px; + --padding-xl: 32px; + --padding-xxl: 48px; + + // Old vars (we'll delete these once we're done). + --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; @@ -19,12 +104,19 @@ --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; - --primary: 14.5 95.6% 55.9%; + --primary: 15 96% 56%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; + --neutral: 210 40% 96.1%; + --neutral-strong: 210 40% 96.1%; + --neutral-muted: 210 40% 96.1%; + --neutral-dimmed: 210 40% 96.1%; + --neutral-disabled: 210 40% 96.1%; + --neutral-light: 0 0% 100%; + --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; @@ -33,8 +125,6 @@ --ring: 215 20.2% 65.1%; - --radius: 8px; - --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif; } diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 525b0f80742..c36fe7c7516 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -19,46 +19,105 @@ module.exports = { "2xl": "1400px" } }, - extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))" - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))" - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))" - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))" - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))" - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))" - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))" - } + backgroundColor: { + neutral: { + DEFAULT: "hsl(var(--bg-neutral))", + dark: "hsl(var(--bg-neutral-dark))", + strong: "hsl(var(--bg-neutral-strong))", + xstrong: "hsl(var(--bg-neutral-xstrong))", + muted: "hsl(var(--bg-neutral-muted))", + dimmed: "hsl(var(--bg-neutral-dimmed))", + subtle: "hsl(var(--bg-neutral-subtle))", + light: "hsl(var(--bg-neutral-light))", + disabled: "hsl(var(--bg-neutral-disabled))", + base: "hsl(var(--bg-neutral-base))" + }, + primary: { + DEFAULT: "hsl(var(--bg-primary))", + strong: "hsl(var(--bg-primary-strong))", + xstrong: "hsl(var(--bg-primary-xstrong))", + muted: "hsl(var(--bg-primary-muted))", + subtle: "hsl(var(--bg-primary-subtle))", + disabled: "hsl(var(--bg-primary-disabled))" + }, + secondary: { + DEFAULT: "hsl(var(--bg-secondary))", + strong: "hsl(var(--bg-secondary-strong))", + xstrong: "hsl(var(--bg-secondary-xstrong))", + muted: "hsl(var(--bg-secondary-muted))", + subtle: "hsl(var(--bg-secondary-subtle))", + disabled: "hsl(var(--bg-secondary-disabled))" + }, + success: { + DEFAULT: "hsl(var(--bg-success))", + strong: "hsl(var(--bg-success-strong))", + xstrong: "hsl(var(--bg-success-xstrong))", + muted: "hsl(var(--bg-success-muted))", + subtle: "hsl(var(--bg-success-subtle))", + disabled: "hsl(var(--bg-success-disabled))" }, - borderRadius: { - lg: `var(--radius)`, - md: `calc(var(--radius) - 2px)`, - sm: "calc(var(--radius) - 4px)" + destructive: { + DEFAULT: "hsl(var(--bg-destructive))", + strong: "hsl(var(--bg-destructive-strong))", + xstrong: "hsl(var(--bg-destructive-xstrong))", + muted: "hsl(var(--bg-destructive-muted))", + subtle: "hsl(var(--bg-destructive-subtle))", + disabled: "hsl(var(--bg-destructive-disabled))" + }, + warning: { + DEFAULT: "hsl(var(--bg-warning))", + strong: "hsl(var(--bg-warning-strong))", + xstrong: "hsl(var(--bg-warning-xstrong))", + muted: "hsl(var(--bg-warning-muted))", + subtle: "hsl(var(--bg-warning-subtle))", + disabled: "hsl(var(--bg-warning-disabled))" + } + }, + colors: { + primary: "hsl(var(--text-primary))", + subtle: "hsl(var(--text-subtle))", + muted: "hsl(var(--text-muted))", + dimmed: "hsl(var(--text-dimmed))", + disabled: "hsl(var(--text-disabled))", + white: "hsl(var(--text-white))" + }, + borderColor: { + neutral: { + dark: "hsl(var(--border-neutral-dark))", + strong: "hsl(var(--border-neutral-strong))", + muted: "hsl(var(--border-neutral-muted))", + dimmed: "hsl(var(--border-neutral-dimmed))", + subtle: "hsl(var(--border-neutral-subtle))" + }, + + accent: { + DEFAULT: "hsl(var(--border-accent-default))", + "accent-subtle": "hsl(var(--border-accent-subtle))" + }, + destructive: "hsl(var(--border-destructive-default))", + success: "hsl(var(--border-success-default))" + }, + borderRadius: { + DEFAULT: "var(--radius-sm)", + xs: "var(--radius-xs)", + sm: "var(--radius-sm)", + md: "var(--radius-md)", + lg: "var(--radius-lg)", + xl: "var(--radius-xl)", + xxl: "var(--radius-xxl)" + }, + borderWidth: { + sm: "var(--border-width-sm)", + md: "var(--border-width-md)" + }, + extend: { + padding: { + xs: "var(--padding-xs)", + sm: "var(--padding-sm)", + md: "var(--padding-md)", + lg: "var(--padding-lg)", + xl: "var(--padding-xl)", + xxl: "var(--padding-xxl)" }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans] diff --git a/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx b/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx index 7124160622b..6c38f092ba6 100644 --- a/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx +++ b/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx @@ -182,8 +182,8 @@ const UsersDataList = () => { renderImage={props => ( )} - src={item.avatar ? item.avatar.src : item.gravatar} - fallbackText={item.firstName} + src={''} + fallbackText={item.firstName[0]} alt={t`User's avatar.`} /> From 9a432c8c91d4ff9bcd778b4cf73cd50cf3ef7783 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 2 Oct 2024 09:26:52 +0200 Subject: [PATCH 13/62] wip: remove avatar-related changes --- packages/admin-ui/package.json | 1 - packages/admin-ui/src/index.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index 17cb542ed42..811476a9118 100644 --- a/packages/admin-ui/package.json +++ b/packages/admin-ui/package.json @@ -11,7 +11,6 @@ "dependencies": { "@material-design-icons/svg": "^0.14.3", "@radix-ui/react-accessible-icon": "^1.1.0", - "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", diff --git a/packages/admin-ui/src/index.ts b/packages/admin-ui/src/index.ts index f93afe6442e..6d49a83aba6 100644 --- a/packages/admin-ui/src/index.ts +++ b/packages/admin-ui/src/index.ts @@ -1,4 +1,3 @@ -export * from "./Avatar"; export * from "./Button"; export * from "./Card"; export * from "./Heading"; From aaffef7a4fb193a5d58b8811ebe312a69f856189 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 2 Oct 2024 09:27:09 +0200 Subject: [PATCH 14/62] wip: remove avatar-related changes --- .../admin-ui/src/Avatar/Avatar.stories.tsx | 42 --------- packages/admin-ui/src/Avatar/Avatar.tsx | 89 ------------------- packages/admin-ui/src/Avatar/index.ts | 1 - 3 files changed, 132 deletions(-) delete mode 100644 packages/admin-ui/src/Avatar/Avatar.stories.tsx delete mode 100644 packages/admin-ui/src/Avatar/Avatar.tsx delete mode 100644 packages/admin-ui/src/Avatar/index.ts diff --git a/packages/admin-ui/src/Avatar/Avatar.stories.tsx b/packages/admin-ui/src/Avatar/Avatar.stories.tsx deleted file mode 100644 index 8c7dda1e52a..00000000000 --- a/packages/admin-ui/src/Avatar/Avatar.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; - -import { Avatar } from "./Avatar"; -import * as React from "react"; - -const meta: Meta = { - title: "Components/Avatar", - component: Avatar, - tags: ["autodocs"], - argTypes: {} -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - image: , - fallback: W - }, - argTypes: { - size: { - control: "select", - options: ["sm", "md", "lg", "xl"] - }, - } -}; - -export const Sizes: Story = { - args: { - ...Default.args, - size: "lg" - } -}; - -export const Fallback: Story = { - args: { - image: , - fallback: W, - } -}; diff --git a/packages/admin-ui/src/Avatar/Avatar.tsx b/packages/admin-ui/src/Avatar/Avatar.tsx deleted file mode 100644 index 1235ac9b843..00000000000 --- a/packages/admin-ui/src/Avatar/Avatar.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import * as React from "react"; -import * as AvatarPrimitive from "@radix-ui/react-avatar"; -import { makeDecoratable } from "@webiny/react-composition"; -import { cva, type VariantProps } from "class-variance-authority"; -import { withStaticProps, cn } from "~/utils"; - -type AvatarImageProps = React.ComponentPropsWithoutRef; - -const AvatarImageBase = React.forwardRef< - React.ElementRef, - AvatarImageProps ->(({ className, ...props }, ref) => ( - -)); -AvatarImageBase.displayName = AvatarPrimitive.Image.displayName; - -const AvatarImage = makeDecoratable("AvatarImage", AvatarImageBase); - -type AvatarFallbackProps = React.ComponentPropsWithoutRef; - -const AvatarFallbackBase = React.forwardRef< - React.ElementRef, - AvatarFallbackProps ->(({ className, ...props }, ref) => ( - -)); - -AvatarFallbackBase.displayName = AvatarPrimitive.Fallback.displayName; - -const AvatarFallback = makeDecoratable("AvatarFallback", AvatarFallbackBase); - -interface AvatarProps - extends React.ComponentPropsWithoutRef, - VariantProps { - image: React.ReactElement; - fallback?: React.ReactElement; -} - -const avatarVariants = cva("rounded", { - variants: { - size: { - sm: "w-6 h-6 rounded-sm", - md: "w-8 h-8 rounded-sm", - lg: "w-10 h-10 rounded-sm", - xl: "w-12 h-12 rounded-md" - } - }, - defaultVariants: { - size: "md", - } -}); - -const AvatarBase = React.forwardRef, AvatarProps>( - ({ image, fallback, className, size, ...props }, ref) => ( - - {image} - {fallback} - - ) -); - -AvatarBase.displayName = AvatarPrimitive.Root.displayName; - -const DecoratableAvatar = makeDecoratable("Avatar", AvatarBase); - -const Avatar = withStaticProps(DecoratableAvatar, { - Fallback: AvatarFallback, - Image: AvatarImage -}); - -export { Avatar, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps }; diff --git a/packages/admin-ui/src/Avatar/index.ts b/packages/admin-ui/src/Avatar/index.ts deleted file mode 100644 index 8d3d546e778..00000000000 --- a/packages/admin-ui/src/Avatar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Avatar"; From 63873db19ff0289f2533ca30f6a0b3f2a8a1beb3 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 2 Oct 2024 09:28:20 +0200 Subject: [PATCH 15/62] wip: remove avatar-related changes --- packages/ui/src/Avatar/Avatar.tsx | 90 ++++++++++++++++++++++++++----- yarn.lock | 23 -------- 2 files changed, 78 insertions(+), 35 deletions(-) diff --git a/packages/ui/src/Avatar/Avatar.tsx b/packages/ui/src/Avatar/Avatar.tsx index d78e6ea2133..5a8dda42a01 100644 --- a/packages/ui/src/Avatar/Avatar.tsx +++ b/packages/ui/src/Avatar/Avatar.tsx @@ -1,5 +1,38 @@ import React from "react"; -import { Avatar as AdminUiAvatar } from "@webiny/admin-ui"; +import { css } from "emotion"; +import classNames from "classnames"; +const avatar = css({ + borderRadius: "50%", + display: "block", + //alignItems: "center", + //justifyContent: "center", + width: 38, + height: 38, + position: "relative", + top: -7, + right: 7, + overflow: "hidden", + background: "var(--mdc-theme-background)", + color: "var(--mdc-theme-text-secondary-on-background)", + div: { + textAlign: "center", + display: "flex", + alignContent: "center", + justifyContent: "center", + flexDirection: "column", + width: 38, + height: 38, + fontSize: "1rem", + span: { + paddingBottom: 2 + } + }, + img: { + width: "100% !important", + height: "100% !important", + objectFit: "cover" + } +}); export interface AvatarProps { /** @@ -15,7 +48,7 @@ export interface AvatarProps { /** * Avatar image source. */ - src?: string; + src?: string | null; /** * "alt" text. @@ -45,19 +78,52 @@ export interface AvatarProps { } /** - * @deprecated This component is deprecated and will be removed in future releases. - * Please use the `Avatar` component from the `@webiny/admin-ui` package instead. + * Use Avatar component to display user's avatar. */ export const Avatar = (props: AvatarProps) => { - // Note that we're ignoring `renderImage` prop, as it's not supported in the new `Avatar` component. - const { className, style, src, alt, width, height, fallbackText } = props; + const { + className, + width = 38, + height = 38, + src, + alt, + fallbackText, + renderImage, + ...rest + } = props; + + let renderedImage; + const imageProps = { src, alt }; + if (src) { + if (typeof renderImage === "function") { + renderedImage = renderImage({ + ...imageProps, + src + }); + } else { + renderedImage = {alt}; + } + } return ( - } - fallback={{fallbackText}} - /> +
+ {props.src ? ( + renderedImage + ) : ( +
+ + {fallbackText + .split(" ") + .map(word => word.charAt(0)) + .join("") + .toUpperCase()} + +
+ )} +
); }; diff --git a/yarn.lock b/yarn.lock index 4ba75da6722..2f4cc89791c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12336,28 +12336,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-avatar@npm:^1.1.0": - version: 1.1.0 - resolution: "@radix-ui/react-avatar@npm:1.1.0" - dependencies: - "@radix-ui/react-context": 1.1.0 - "@radix-ui/react-primitive": 2.0.0 - "@radix-ui/react-use-callback-ref": 1.1.0 - "@radix-ui/react-use-layout-effect": 1.1.0 - peerDependencies: - "@types/react": "*" - "@types/react-dom": "*" - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - "@types/react": - optional: true - "@types/react-dom": - optional: true - checksum: 9f704dee499d34edcc66dca393568518b18d80cb63572291055f5137dc603f4c150bb02ed4799d3c35b8c614cdbb23be533a0f6cfcaefdb626fb4b31edc3fdd1 - languageName: node - linkType: hard - "@radix-ui/react-collection@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-collection@npm:1.0.3" @@ -17802,7 +17780,6 @@ __metadata: "@babel/preset-typescript": ^7.23.3 "@material-design-icons/svg": ^0.14.3 "@radix-ui/react-accessible-icon": ^1.1.0 - "@radix-ui/react-avatar": ^1.1.0 "@radix-ui/react-label": ^2.1.0 "@radix-ui/react-slot": ^1.1.0 "@radix-ui/react-switch": ^1.1.0 From 2c993d6dd71a12f61cafc929679825bb95bf1594 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 2 Oct 2024 09:28:48 +0200 Subject: [PATCH 16/62] wip: remove avatar-related changes --- packages/ui/src/Avatar/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 packages/ui/src/Avatar/README.md diff --git a/packages/ui/src/Avatar/README.md b/packages/ui/src/Avatar/README.md new file mode 100644 index 00000000000..a481be2a0f7 --- /dev/null +++ b/packages/ui/src/Avatar/README.md @@ -0,0 +1,11 @@ +# Avatar + +### Description + +Use `Avatar` component to display an avatar. + +### Import + +```js +import { Avatar } from "@webiny/ui/Avatar"; +``` From ed4638d3e7c1146b3d57a1614724fb501991959e Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 2 Oct 2024 09:29:28 +0200 Subject: [PATCH 17/62] wip: remove avatar-related changes --- .../src/ui/views/Users/UsersDataList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx b/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx index 6c38f092ba6..7124160622b 100644 --- a/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx +++ b/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx @@ -182,8 +182,8 @@ const UsersDataList = () => { renderImage={props => ( )} - src={''} - fallbackText={item.firstName[0]} + src={item.avatar ? item.avatar.src : item.gravatar} + fallbackText={item.firstName} alt={t`User's avatar.`} /> From 17e8f8d1033b9c30c34f772d4ce09b767b7e559f Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 2 Oct 2024 09:30:30 +0200 Subject: [PATCH 18/62] wip: remove avatar-related changes --- packages/admin-ui/src/Icon/Icon.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/admin-ui/src/Icon/Icon.tsx b/packages/admin-ui/src/Icon/Icon.tsx index b8952f37708..4a44f8b47d1 100644 --- a/packages/admin-ui/src/Icon/Icon.tsx +++ b/packages/admin-ui/src/Icon/Icon.tsx @@ -2,6 +2,7 @@ import React from "react"; import * as AccessibleIcon from "@radix-ui/react-accessible-icon"; import { makeDecoratable } from "@webiny/react-composition"; import { cva, type VariantProps } from "class-variance-authority"; +import { cn } from "~/utils"; const iconVariants = cva("", { variants: { @@ -36,7 +37,7 @@ const IconBase = React.forwardRef((props, ref) => { {React.cloneElement(icon, { ...rest, - className: iconVariants({ color, size, className }), + className: cn(iconVariants({ color, size, className })), ref })} From e675a7af3cd90fcb292ec925925cf766884e2ace Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 2 Oct 2024 09:30:52 +0200 Subject: [PATCH 19/62] wip: remove avatar-related changes --- packages/admin-ui/src/utils.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/admin-ui/src/utils.ts b/packages/admin-ui/src/utils.ts index 2676e7f092d..35edc5647fc 100644 --- a/packages/admin-ui/src/utils.ts +++ b/packages/admin-ui/src/utils.ts @@ -1,4 +1,3 @@ -import React from "react"; import { clsx, type ClassValue } from "clsx"; import { generateId as baseGenerateId } from "@webiny/utils/generateId"; import { twMerge } from "tailwind-merge"; @@ -13,10 +12,3 @@ export const generateId = (initialId?: string) => { } return "wby-" + baseGenerateId(4); }; - -export const withStaticProps = , TProps>( - component: TComponent, - props: TProps -) => { - return Object.assign(component, props) as TComponent & TProps; -}; From 9fb83bea699ce0752f9b8639b07ca8fa1c1a48a8 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 22 Oct 2024 06:45:23 +0200 Subject: [PATCH 20/62] wip --- packages/admin-ui/tailwind.config.js | 66 ++++++++++++++++------------ 1 file changed, 38 insertions(+), 28 deletions(-) diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index c36fe7c7516..d5578967bb9 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -21,56 +21,61 @@ module.exports = { }, backgroundColor: { neutral: { - DEFAULT: "hsl(var(--bg-neutral))", + DEFAULT: "hsl(var(--bg-neutral-base))", dark: "hsl(var(--bg-neutral-dark))", - strong: "hsl(var(--bg-neutral-strong))", xstrong: "hsl(var(--bg-neutral-xstrong))", + strong: "hsl(var(--bg-neutral-strong))", muted: "hsl(var(--bg-neutral-muted))", + disabled: "hsl(var(--bg-neutral-disabled))", dimmed: "hsl(var(--bg-neutral-dimmed))", subtle: "hsl(var(--bg-neutral-subtle))", light: "hsl(var(--bg-neutral-light))", - disabled: "hsl(var(--bg-neutral-disabled))", base: "hsl(var(--bg-neutral-base))" }, primary: { - DEFAULT: "hsl(var(--bg-primary))", - strong: "hsl(var(--bg-primary-strong))", - xstrong: "hsl(var(--bg-primary-xstrong))", + DEFAULT: "hsl(var(--bg-primary-default))", + default: "hsl(var(--bg-primary-default))", muted: "hsl(var(--bg-primary-muted))", + disabled: "hsl(var(--bg-primary-disabled))", subtle: "hsl(var(--bg-primary-subtle))", - disabled: "hsl(var(--bg-primary-disabled))" + strong: "hsl(var(--bg-primary-strong))", + xstrong: "hsl(var(--bg-primary-xstrong))" }, secondary: { - DEFAULT: "hsl(var(--bg-secondary))", - strong: "hsl(var(--bg-secondary-strong))", - xstrong: "hsl(var(--bg-secondary-xstrong))", + DEFAULT: "hsl(var(--bg-secondary-default))", + default: "hsl(var(--bg-secondary-default))", muted: "hsl(var(--bg-secondary-muted))", + disabled: "hsl(var(--bg-secondary-disabled))", subtle: "hsl(var(--bg-secondary-subtle))", - disabled: "hsl(var(--bg-secondary-disabled))" + strong: "hsl(var(--bg-secondary-strong))", + xstrong: "hsl(var(--bg-secondary-xstrong))" }, success: { - DEFAULT: "hsl(var(--bg-success))", - strong: "hsl(var(--bg-success-strong))", - xstrong: "hsl(var(--bg-success-xstrong))", + DEFAULT: "hsl(var(--bg-success-default))", + default: "hsl(var(--bg-success-default))", muted: "hsl(var(--bg-success-muted))", + disabled: "hsl(var(--bg-success-disabled))", subtle: "hsl(var(--bg-success-subtle))", - disabled: "hsl(var(--bg-success-disabled))" + strong: "hsl(var(--bg-success-strong))", + xstrong: "hsl(var(--bg-success-xstrong))" }, destructive: { - DEFAULT: "hsl(var(--bg-destructive))", - strong: "hsl(var(--bg-destructive-strong))", - xstrong: "hsl(var(--bg-destructive-xstrong))", + DEFAULT: "hsl(var(--bg-destructive-default))", + default: "hsl(var(--bg-destructive-default))", muted: "hsl(var(--bg-destructive-muted))", + disabled: "hsl(var(--bg-destructive-disabled))", subtle: "hsl(var(--bg-destructive-subtle))", - disabled: "hsl(var(--bg-destructive-disabled))" + strong: "hsl(var(--bg-destructive-strong))", + xstrong: "hsl(var(--bg-destructive-xstrong))" }, warning: { - DEFAULT: "hsl(var(--bg-warning))", - strong: "hsl(var(--bg-warning-strong))", - xstrong: "hsl(var(--bg-warning-xstrong))", + DEFAULT: "hsl(var(--bg-warning-default))", + default: "hsl(var(--bg-warning-default))", muted: "hsl(var(--bg-warning-muted))", + disabled: "hsl(var(--bg-warning-disabled))", subtle: "hsl(var(--bg-warning-subtle))", - disabled: "hsl(var(--bg-warning-disabled))" + strong: "hsl(var(--bg-warning-strong))", + xstrong: "hsl(var(--bg-warning-xstrong))" } }, colors: { @@ -89,16 +94,21 @@ module.exports = { dimmed: "hsl(var(--border-neutral-dimmed))", subtle: "hsl(var(--border-neutral-subtle))" }, - accent: { DEFAULT: "hsl(var(--border-accent-default))", - "accent-subtle": "hsl(var(--border-accent-subtle))" + default: "hsl(var(--border-accent-default))", + subtle: "hsl(var(--border-accent-subtle))" }, - destructive: "hsl(var(--border-destructive-default))", - success: "hsl(var(--border-success-default))" + destructive: { + DEFAULT: "hsl(var(--border-destructive-default))", + default: "hsl(var(--border-destructive-default))" + }, + success: { + DEFAULT: "hsl(var(--border-success-default))", + default: "hsl(var(--border-success-default))" + } }, borderRadius: { - DEFAULT: "var(--radius-sm)", xs: "var(--radius-xs)", sm: "var(--radius-sm)", md: "var(--radius-md)", From 24ce7d1f8b2d835b1c7c42746dc7e975a3e0d183 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 22 Oct 2024 07:02:30 +0200 Subject: [PATCH 21/62] wip - colors placeholders --- packages/admin-ui/src/styles.scss | 138 +++++++++++++++--------------- 1 file changed, 69 insertions(+), 69 deletions(-) diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index 3009bf48698..13ef1c88850 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -7,69 +7,69 @@ // New variables from design. // Background colors. - --bg-neutral-dark: #191c20; - --bg-neutral-xstrong: #59626d; - --bg-neutral-strong: #bec3cc; - --bg-neutral-muted: #e3e5eb; - --bg-neutral-disabled: #f0f1f3; - --bg-neutral-dimmed: #f0f1f3; - --bg-neutral-light: #f7f8f9; - --bg-neutral-subtle: #fafbfb; - --bg-neutral: #191c20; - - --bg-primary: 15 96% 56%; - --bg-primary-strong: 15 90% 50%; - --bg-primary-xstrong: 15 85% 45%; - --bg-primary-muted: 15 80% 60%; - --bg-primary-subtle: 15 75% 70%; - --bg-primary-disabled: 15 70% 80%; - - --bg-secondary: 210 40% 96.1%; - --bg-secondary-strong: 210 35% 85%; - --bg-secondary-xstrong: 210 30% 70%; - --bg-secondary-muted: 210 25% 60%; - --bg-secondary-subtle: 210 20% 50%; - --bg-secondary-disabled: 210 15% 40%; - - --bg-success: 120 60% 40%; - --bg-success-strong: 120 55% 45%; - --bg-success-xstrong: 120 50% 50%; - --bg-success-muted: 120 45% 55%; - --bg-success-subtle: 120 40% 60%; - --bg-success-disabled: 120 35% 70%; - - --bg-destructive: 0 100% 50%; - --bg-destructive-strong: 0 90% 40%; - --bg-destructive-xstrong: 0 80% 30%; - --bg-destructive-muted: 0 70% 60%; - --bg-destructive-subtle: 0 60% 70%; - --bg-destructive-disabled: 0 50% 80%; - - --bg-warning: 45 100% 50%; - --bg-warning-strong: 45 90% 45%; - --bg-warning-xstrong: 45 85% 40%; - --bg-warning-muted: 45 80% 60%; - --bg-warning-subtle: 45 75% 70%; - --bg-warning-disabled: 45 70% 80%; + --bg-neutral-dark: HHH, SSS%, LLL%; + --bg-neutral-xstrong: HHH, SSS%, LLL%; + --bg-neutral-strong: HHH, SSS%, LLL%; + --bg-neutral-muted: HHH, SSS%, LLL%; + --bg-neutral-disabled: HHH, SSS%, LLL%; + --bg-neutral-dimmed: HHH, SSS%, LLL%; + --bg-neutral-light: HHH, SSS%, LLL%; + --bg-neutral-subtle: HHH, SSS%, LLL%; + --bg-neutral: HHH, SSS%, LLL%; + + --bg-primary: HHH SSS% LLL%; + --bg-primary-strong: HHH SSS% LLL%; + --bg-primary-xstrong: HHH SSS% LLL%; + --bg-primary-muted: HHH SSS% LLL%; + --bg-primary-subtle: HHH SSS% LLL%; + --bg-primary-disabled: HHH SSS% LLL%; + + --bg-secondary: HHH SSS% LLL%; + --bg-secondary-strong: HHH SSS% LLL%; + --bg-secondary-xstrong: HHH SSS% LLL%; + --bg-secondary-muted: HHH SSS% LLL%; + --bg-secondary-subtle: HHH SSS% LLL%; + --bg-secondary-disabled: HHH SSS% LLL%; + + --bg-success: HHH SSS% LLL%; + --bg-success-strong: HHH SSS% LLL%; + --bg-success-xstrong: HHH SSS% LLL%; + --bg-success-muted: HHH SSS% LLL%; + --bg-success-subtle: HHH SSS% LLL%; + --bg-success-disabled: HHH SSS% LLL%; + + --bg-destructive: HHH SSS% LLL%; + --bg-destructive-strong: HHH SSS% LLL%; + --bg-destructive-xstrong: HHH SSS% LLL%; + --bg-destructive-muted: HHH SSS% LLL%; + --bg-destructive-subtle: HHH SSS% LLL%; + --bg-destructive-disabled: HHH SSS% LLL%; + + --bg-warning: HHH SSS% LLL%; + --bg-warning-strong: HHH SSS% LLL%; + --bg-warning-xstrong: HHH SSS% LLL%; + --bg-warning-muted: HHH SSS% LLL%; + --bg-warning-subtle: HHH SSS% LLL%; + --bg-warning-disabled: HHH SSS% LLL%; // Text colors. - --text-primary: 210 96% 56%; - --text-subtle: 210 85% 70%; - --text-muted: 210 80% 60%; - --text-dimmed: 210 75% 50%; - --text-disabled: 210 70% 40%; - --text-white: 0 0% 100%; + --text-primary: HHH SSS% LLL%; + --text-subtle: HHH SSS% LLL%; + --text-muted: HHH SSS% LLL%; + --text-dimmed: HHH SSS% LLL%; + --text-disabled: HHH SSS% LLL%; + --text-white: HHH SSS% LLL%; // Border color. - --border-color-neutral-dark: 210 96% 56%; - --border-color-neutral-strong: 210 96% 56%; - --border-color-neutral-muted: 210 96% 56%; - --border-color-neutral-dimmed: 210 96% 56%; - --border-color-neutral-subtle: 210 96% 56%; - --border-color-accent-default: 210 96% 56%; - --border-color-accent-subtle: 210 96% 56%; - --border-color-destructive-default: 210 96% 56%; - --border-color-success-default: 210 96% 56%; + --border-color-neutral-dark: HHH SSS% LLL%; + --border-color-neutral-strong: HHH SSS% LLL%; + --border-color-neutral-muted: HHH SSS% LLL%; + --border-color-neutral-dimmed: HHH SSS% LLL%; + --border-color-neutral-subtle: HHH SSS% LLL%; + --border-color-accent-default: HHH SSS% LLL%; + --border-color-accent-subtle: HHH SSS% LLL%; + --border-color-destructive-default: HHH SSS% LLL%; + --border-color-success-default: HHH SSS% LLL%; // Border radius. --radius-xs: 2px; @@ -162,13 +162,13 @@ } } -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground; - font-feature-settings: "rlig" 1, "calt" 1; - } -} +//@layer base { +// * { +// @apply border-border; +// } +// +// body { +// @apply bg-background text-foreground; +// font-feature-settings: "rlig" 1, "calt" 1; +// } +//} From a63753f183d30b83b0e0790fd8574725a442f230 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 24 Oct 2024 06:44:22 +0200 Subject: [PATCH 22/62] wip --- .gitignore | 1 + package.json | 4 +- packages/admin-ui/scripts/importFromFigma.js | 55 + .../importFromFigma/createStylesScss.js | 168 + .../createTailwindConfigCustomizations.js | 57 + .../importFromFigma/exports/Alias tokens.json | 3289 +++++++++++++++++ .../importFromFigma/figmaRgbaToHsla.js | 51 + .../scripts/importFromFigma/formatCode.js | 14 + .../importFromFigma/normalizeFigmaExport.js | 52 + .../importFromFigma/templates/styles.scss.txt | 123 + packages/admin-ui/src/styles.scss | 3 +- packages/admin-ui/src/styles2.scss | 237 ++ .../tailwind.config.customizations.js | 127 + packages/admin-ui/tailwind.config.js | 114 +- yarn.lock | 11 + 15 files changed, 4203 insertions(+), 103 deletions(-) create mode 100644 packages/admin-ui/scripts/importFromFigma.js create mode 100644 packages/admin-ui/scripts/importFromFigma/createStylesScss.js create mode 100644 packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js create mode 100644 packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json create mode 100644 packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js create mode 100644 packages/admin-ui/scripts/importFromFigma/formatCode.js create mode 100644 packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js create mode 100644 packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt create mode 100644 packages/admin-ui/src/styles2.scss create mode 100644 packages/admin-ui/tailwind.config.customizations.js diff --git a/.gitignore b/.gitignore index c620990730c..7c5fc7e0ea0 100644 --- a/.gitignore +++ b/.gitignore @@ -48,6 +48,7 @@ schema.graphql lerna.json .stormTests *storybook.log +.normalizedFigmaExport.json # TODO remove after moving traffic splitting config to WPC gateway.*.json diff --git a/package.json b/package.json index 5c57995137a..8bdadddebc5 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,9 @@ "webiny": "./node_modules/.bin/webiny", "wby": "./node_modules/.bin/wby", "webiny-admin-storybook": "cd packages/admin-ui && yarn storybook", - "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook" + "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook", + "webiny-admin-import-from-figma": "node packages/admin-ui/scripts/importFromFigma.js" + }, "husky": { "hooks": { diff --git a/packages/admin-ui/scripts/importFromFigma.js b/packages/admin-ui/scripts/importFromFigma.js new file mode 100644 index 00000000000..320c51b1d1d --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma.js @@ -0,0 +1,55 @@ +const fs = require("fs"); +const { green } = require("chalk"); +const path = require("path"); +const aliasTokensExport = require("./importFromFigma/exports/Alias tokens.json"); +const { normalizeFigmaExport } = require("./importFromFigma/normalizeFigmaExport"); +const { + createTailwindConfigCustomizations +} = require("./importFromFigma/createTailwindConfigCustomizations"); +const { createStylesScss } = require("./importFromFigma/createStylesScss"); +const { formatCode } = require("./importFromFigma/formatCode"); + +const saveFileAndFormat = async (filePath, content) => { + fs.writeFileSync(filePath, content); + await formatCode(filePath); +}; + +(async () => { + const normalizedFigmaExport = normalizeFigmaExport(aliasTokensExport); + const tailwindConfigCustomizations = createTailwindConfigCustomizations(normalizedFigmaExport); + const stylesScss = createStylesScss(normalizedFigmaExport); + + const paths = { + cwd: process.cwd(), + normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"), + tailwindConfigCustomizations: path.join(__dirname, "../tailwind.config.customizations.js"), + stylesScss: path.join(__dirname, "../src/styles2.scss") + }; + + console.log("Storing..."); + console.log( + `‣ normalized Figma export (${green( + path.relative(paths.cwd, paths.normalizedFigmaExport) + )}).` + ); + console.log( + `‣ Tailwind config customizations (${green( + path.relative(paths.cwd, paths.tailwindConfigCustomizations) + )}).` + ); + console.log(`‣ styles.scss (${green(path.relative(paths.cwd, paths.stylesScss))}).`); + + await saveFileAndFormat( + paths.normalizedFigmaExport, + JSON.stringify(normalizedFigmaExport, null, 2) + ); + + await saveFileAndFormat( + paths.tailwindConfigCustomizations, + `module.exports = ${JSON.stringify(tailwindConfigCustomizations, null, 2)};` + ); + + await saveFileAndFormat(paths.stylesScss, stylesScss); + + console.log("Done."); +})(); diff --git a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js new file mode 100644 index 00000000000..86f34e7a66f --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js @@ -0,0 +1,168 @@ +const fs = require("fs"); + +const createStylesScss = normalizedFigmaExport => { + // Generate `styles.scss` file. + let stylesScss = fs.readFileSync(__dirname + "/templates/styles.scss.txt", "utf8"); + + // 1. Background colors. + { + let currentBgColorGroup = null; + const bgColors = normalizedFigmaExport + .filter(item => item.type === "backgroundColor") + .map(variable => { + const [colorGroup] = variable.variantName.split("-"); + const cssVar = `--bg-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + + if (!currentBgColorGroup) { + currentBgColorGroup = colorGroup; + return cssVar; + } + + if (!currentBgColorGroup || currentBgColorGroup !== colorGroup) { + currentBgColorGroup = colorGroup; + return ["", cssVar]; + } + return cssVar; + }) + .flat(); + + stylesScss = stylesScss.replace("{BACKGROUND_COLORS}", bgColors.join("\n")); + } + + // 2. Text colors. + { + let currentTextColor = null; + const textColors = normalizedFigmaExport + .filter(item => item.type === "textColor") + .map(variable => { + const [colorGroup] = variable.variantName.split("-"); + const cssVar = `--text-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + + if (!currentTextColor) { + currentTextColor = colorGroup; + return cssVar; + } + + if (!currentTextColor || currentTextColor !== colorGroup) { + currentTextColor = colorGroup; + return ["", cssVar]; + } + return cssVar; + }) + .flat(); + + stylesScss = stylesScss.replace("{TEXT_COLORS}", textColors.join("\n")); + } + + // 3. Border colors. + { + let currentBorderColor = null; + const borderColors = normalizedFigmaExport + .filter(item => item.type === "borderColor") + .map(variable => { + const [colorGroup] = variable.variantName.split("-"); + const cssVar = `--border-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + + if (!currentBorderColor) { + currentBorderColor = colorGroup; + return cssVar; + } + + if (!currentBorderColor || currentBorderColor !== colorGroup) { + currentBorderColor = colorGroup; + return ["", cssVar]; + } + return cssVar; + }) + .flat(); + + stylesScss = stylesScss.replace("{BORDER_COLORS}", borderColors.join("\n")); + } + + // 4. Border radius. + { + const borderRadius = normalizedFigmaExport + .filter(item => item.type === "borderRadius") + .map(variable => { + return `--radius-${variable.variantName}: ${variable.resolvedValue}px;`; + }); + + stylesScss = stylesScss.replace("{BORDER_RADIUS}", borderRadius.join("\n")); + } + + // 5. Border width. + { + const borderWidth = normalizedFigmaExport + .filter(item => item.type === "borderWidth") + .map( + variable => `--border-width-${variable.variantName}: ${variable.resolvedValue}px;` + ); + + stylesScss = stylesScss.replace("{BORDER_WIDTH}", borderWidth.join("\n")); + } + + // 6. Padding. + { + const padding = normalizedFigmaExport + .filter(item => item.type === "padding") + .map(variable => `--padding-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{PADDING}", padding.join("\n")); + } + + // 7. Elevation. + { + const elevation = normalizedFigmaExport + .filter(item => item.type === "elevation") + .map(variable => `--elevation-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{ELEVATION}", elevation.join("\n")); + } + + // 8. Fill. + { + let currentFillColor = null; + const textColors = normalizedFigmaExport + .filter(item => item.type === "fill") + .map(variable => { + const [colorGroup] = variable.variantName.split("-"); + const cssVar = `--fill-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + + if (!currentFillColor) { + currentFillColor = colorGroup; + return cssVar; + } + + if (!currentFillColor || currentFillColor !== colorGroup) { + currentFillColor = colorGroup; + return ["", cssVar]; + } + return cssVar; + }) + .flat(); + + stylesScss = stylesScss.replace("{FILL}", textColors.join("\n")); + } + + // 9. Spacing. + { + const spacing = normalizedFigmaExport + .filter(item => item.type === "spacing") + .map(variable => `--spacing-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{SPACING}", spacing.join("\n")); + } + + // 10. Margin. + { + const margin = normalizedFigmaExport + .filter(item => item.type === "margin") + .map(variable => `--margin-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{MARGIN}", margin.join("\n")); + } + + return stylesScss; +}; + +module.exports = { createStylesScss }; diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js new file mode 100644 index 00000000000..7362c424b95 --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js @@ -0,0 +1,57 @@ +const createTailwindConfigCustomizations = normalizedFigmaExport => { + return { + backgroundColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "backgroundColor") { + const [color, variant] = variantName.split("-"); + if (!acc[color]) { + acc[color] = { + DEFAULT: `var(--bg-${color}-default)` + }; + } + + acc[color][variant] = `var(--bg-${variantName})`; + } + return acc; + }, {}), + borderColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "borderColor") { + const [color, variant] = variantName.split("-"); + if (!acc[color]) { + acc[color] = { + DEFAULT: `var(--border-${color}-default)` + }; + } + + acc[color][variant] = `var(--border-${variantName})`; + } + return acc; + }, {}), + textColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "textColor") { + const [color, variant] = variantName.split("-"); + if (!acc[color]) { + acc[color] = { + DEFAULT: `var(--text-${color}-default)` + }; + } + + acc[color][variant] = `var(--text-${variantName})`; + } + return acc; + }, {}), + borderRadius: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "borderRadius") { + acc[variantName] = `var(--radius-${variantName})`; + } + return acc; + }, {}), + borderWidth: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "borderWidth") { + acc[variantName] = `var(--border-width-${variantName})`; + } + return acc; + }, {}) + }; +}; + +module.exports = { createTailwindConfigCustomizations }; diff --git a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json new file mode 100644 index 00000000000..7611c98dd77 --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json @@ -0,0 +1,3289 @@ +{ + "id": "VariableCollectionId:37:6", + "name": "Alias tokens", + "modes": { + "37:2": "Mode 1" + }, + "variableIds": [ + "VariableID:39:112", + "VariableID:1141:3695", + "VariableID:39:113", + "VariableID:62:2199", + "VariableID:1141:3698", + "VariableID:39:116", + "VariableID:39:117", + "VariableID:39:114", + "VariableID:39:115", + "VariableID:39:118", + "VariableID:39:119", + "VariableID:1141:4555", + "VariableID:39:120", + "VariableID:841:778", + "VariableID:841:783", + "VariableID:39:121", + "VariableID:39:122", + "VariableID:1141:4556", + "VariableID:39:123", + "VariableID:841:779", + "VariableID:841:784", + "VariableID:835:90", + "VariableID:835:91", + "VariableID:1141:4557", + "VariableID:835:92", + "VariableID:841:780", + "VariableID:841:785", + "VariableID:52:22", + "VariableID:52:23", + "VariableID:851:2608", + "VariableID:52:24", + "VariableID:891:81144", + "VariableID:52:25", + "VariableID:52:28", + "VariableID:52:29", + "VariableID:52:30", + "VariableID:52:31", + "VariableID:52:32", + "VariableID:529:17319", + "VariableID:1335:7762", + "VariableID:183:122214", + "VariableID:1335:7763", + "VariableID:1335:7764", + "VariableID:1152:342", + "VariableID:849:906", + "VariableID:183:122215", + "VariableID:183:122216", + "VariableID:183:122217", + "VariableID:183:122218", + "VariableID:1141:6772", + "VariableID:183:122219", + "VariableID:849:783", + "VariableID:849:784", + "VariableID:52:18", + "VariableID:81:1904", + "VariableID:81:1905", + "VariableID:52:19", + "VariableID:79:37", + "VariableID:79:38", + "VariableID:79:39", + "VariableID:79:40", + "VariableID:79:235", + "VariableID:79:239", + "VariableID:80:242", + "VariableID:80:243", + "VariableID:80:244", + "VariableID:80:245", + "VariableID:59:8", + "VariableID:59:9", + "VariableID:1141:4558", + "VariableID:59:10", + "VariableID:841:781", + "VariableID:841:786", + "VariableID:59:11", + "VariableID:59:12", + "VariableID:1141:4559", + "VariableID:59:13", + "VariableID:841:782", + "VariableID:841:787", + "VariableID:1148:687", + "VariableID:79:7", + "VariableID:1148:690", + "VariableID:1148:689", + "VariableID:528:17123", + "VariableID:528:17124", + "VariableID:528:17125", + "VariableID:528:17126", + "VariableID:528:17127", + "VariableID:528:17128", + "VariableID:1148:688", + "VariableID:79:8", + "VariableID:79:12", + "VariableID:79:236", + "VariableID:79:237", + "VariableID:79:238", + "VariableID:107:716", + "VariableID:528:17129", + "VariableID:528:17130", + "VariableID:528:17131", + "VariableID:528:17132", + "VariableID:528:17133", + "VariableID:528:17134", + "VariableID:107:713", + "VariableID:79:232", + "VariableID:79:233", + "VariableID:79:234", + "VariableID:203:4497", + "VariableID:95:1557", + "VariableID:849:780", + "VariableID:95:1558", + "VariableID:846:3890", + "VariableID:95:1559", + "VariableID:1227:19184", + "VariableID:1227:21660", + "VariableID:1227:21661", + "VariableID:95:1560" + ], + "variables": [ + { + "id": "VariableID:39:112", + "name": "backgroundColor/backgroundColor-neutral-dark", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:57" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.09803921729326248, + "g": 0.10980392247438431, + "b": 0.125490203499794, + "a": 1 + }, + "alias": "VariableID:39:57", + "aliasName": "colors/colors-neutral-900" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:113", + "name": "backgroundColor/backgroundColor-neutral-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:114", + "name": "backgroundColor/backgroundColor-neutral-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:118:19505" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.9843137264251709, + "b": 0.9843137264251709, + "a": 1 + }, + "alias": "VariableID:118:19505", + "aliasName": "colors/colors-neutral-50" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:115", + "name": "backgroundColor/backgroundColor-neutral-base", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:124" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "alias": "VariableID:39:124", + "aliasName": "colors/white-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:116", + "name": "backgroundColor/backgroundColor-neutral-dimmed", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:50" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9411764740943909, + "g": 0.9450980424880981, + "b": 0.9529411792755127, + "a": 1 + }, + "alias": "VariableID:39:50", + "aliasName": "colors/colors-neutral-200" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:117", + "name": "backgroundColor/backgroundColor-neutral-light", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:49" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9686274528503418, + "g": 0.9725490212440491, + "b": 0.9764705896377563, + "a": 1 + }, + "alias": "VariableID:39:49", + "aliasName": "colors/colors-neutral-100" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:118", + "name": "backgroundColor/backgroundColor-primary-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:17" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.34117648005485535, + "b": 0.13725490868091583, + "a": 1 + }, + "alias": "VariableID:38:17", + "aliasName": "colors/colors-primary-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:119", + "name": "backgroundColor/backgroundColor-primary-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:15" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9882352948188782, + "g": 0.6666666865348816, + "b": 0.5686274766921997, + "a": 1 + }, + "alias": "VariableID:38:15", + "aliasName": "colors/colors-primary-300" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:120", + "name": "backgroundColor/backgroundColor-primary-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:37:4" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9529722929000854, + "b": 0.9474395513534546, + "a": 1 + }, + "alias": "VariableID:37:4", + "aliasName": "colors/colors-primary-100" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:121", + "name": "backgroundColor/backgroundColor-secondary-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:122", + "name": "backgroundColor/backgroundColor-secondary-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:25" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.43921568989753723, + "g": 0.8588235378265381, + "b": 0.7803921699523926, + "a": 1 + }, + "alias": "VariableID:38:25", + "aliasName": "colors/colors-success-400" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:123", + "name": "backgroundColor/backgroundColor-secondary-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:23" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8705882430076599, + "g": 0.9647058844566345, + "b": 0.9490196108818054, + "a": 1 + }, + "alias": "VariableID:38:23", + "aliasName": "colors/colors-success-200" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:18", + "name": "borderRadius/borderRadius-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:133" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:39:133", + "aliasName": "radius/dimensions-border-radius-2" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:19", + "name": "borderRadius/borderRadius-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:134" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:39:134", + "aliasName": "radius/dimensions-border-radius-4" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:22", + "name": "textColor/textColor-neutral-primary", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:57" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.09803921729326248, + "g": 0.10980392247438431, + "b": 0.125490203499794, + "a": 1 + }, + "alias": "VariableID:39:57", + "aliasName": "colors/colors-neutral-900" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:23", + "name": "textColor/textColor-neutral-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:55" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.34716352820396423, + "g": 0.38350826501846313, + "b": 0.42792969942092896, + "a": 1 + }, + "alias": "VariableID:39:55", + "aliasName": "colors/colors-neutral-700" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:24", + "name": "textColor/textColor-neutral-dimmed", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:25", + "name": "textColor/textColor-neutral-light", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:124" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "alias": "VariableID:39:124", + "aliasName": "colors/white-500" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:28", + "name": "textColor/textColor-accent-primary", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:17" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.34117648005485535, + "b": 0.13725490868091583, + "a": 1 + }, + "alias": "VariableID:38:17", + "aliasName": "colors/colors-primary-500" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:29", + "name": "textColor/textColor-accent-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:15" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9882352948188782, + "g": 0.6666666865348816, + "b": 0.5686274766921997, + "a": 1 + }, + "alias": "VariableID:38:15", + "aliasName": "colors/colors-primary-300" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:30", + "name": "textColor/textColor-accent-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:37:4" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9529722929000854, + "b": 0.9474395513534546, + "a": 1 + }, + "alias": "VariableID:37:4", + "aliasName": "colors/colors-primary-100" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:31", + "name": "textColor/textColor-sucess-primary", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:32", + "name": "textColor/textColor-sucess-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:25" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.43921568989753723, + "g": 0.8588235378265381, + "b": 0.7803921699523926, + "a": 1 + }, + "alias": "VariableID:38:25", + "aliasName": "colors/colors-success-400" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:8", + "name": "backgroundColor/backgroundColor-destructive-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:44" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8313725590705872, + "g": 0.1411764770746231, + "b": 0.1411764770746231, + "a": 1 + }, + "alias": "VariableID:38:44", + "aliasName": "colors/colors-destructive-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:9", + "name": "backgroundColor/backgroundColor-destructive-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:43" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8745098114013672, + "g": 0.3803921639919281, + "b": 0.3803921639919281, + "a": 1 + }, + "alias": "VariableID:38:43", + "aliasName": "colors/colors-destructive-400" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:10", + "name": "backgroundColor/backgroundColor-destructive-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:40" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9372549057006836, + "b": 0.9372549057006836, + "a": 1 + }, + "alias": "VariableID:38:40", + "aliasName": "colors/colors-destructive-100" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:11", + "name": "backgroundColor/backgroundColor-warning-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:35" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9843137264251709, + "g": 0.8117647171020508, + "b": 0.29019609093666077, + "a": 1 + }, + "alias": "VariableID:38:35", + "aliasName": "colors/colors-warning-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:12", + "name": "backgroundColor/backgroundColor-warning-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:33" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9882352948188782, + "g": 0.8745098114013672, + "b": 0.529411792755127, + "a": 1 + }, + "alias": "VariableID:38:33", + "aliasName": "colors/colors-warning-300" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:13", + "name": "backgroundColor/backgroundColor-warning-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:31" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9803921580314636, + "b": 0.929411768913269, + "a": 1 + }, + "alias": "VariableID:38:31", + "aliasName": "colors/colors-warning-100" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:62:2199", + "name": "backgroundColor/backgroundColor-neutral-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:51" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8909133672714233, + "g": 0.898869514465332, + "b": 0.9227376580238342, + "a": 1 + }, + "alias": "VariableID:39:51", + "aliasName": "colors/colors-neutral-300" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:7", + "name": "dimension/dimension-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4487" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:203:4487", + "aliasName": "space/dimensions-fixed-4" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:8", + "name": "dimension/dimension-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4488" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:203:4488", + "aliasName": "space/dimensions-fixed-8" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:12", + "name": "dimension/dimension-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4492" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:203:4492", + "aliasName": "space/dimensions-fixed-16" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:37", + "name": "borderRadius/borderRadius-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:135" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:39:135", + "aliasName": "radius/dimensions-border-radius-8" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:38", + "name": "borderRadius/borderRadius-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:136" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:39:136", + "aliasName": "radius/dimensions-border-radius-16" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:39", + "name": "borderRadius/borderRadius-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:137" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:39:137", + "aliasName": "radius/dimensions-border-radius-24" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:40", + "name": "borderRadius/borderRadius-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:52:21" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 36, + "alias": "VariableID:52:21", + "aliasName": "radius/dimensions-border-radius-36" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:232", + "name": "padding/padding-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4492" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:203:4492", + "aliasName": "space/dimensions-fixed-16" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:233", + "name": "padding/padding-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4493" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:203:4493", + "aliasName": "space/dimensions-fixed-24" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:234", + "name": "padding/padding-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:235", + "name": "elevation/elevation-flat", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 0 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 0, + "alias": null + } + }, + "scopes": [ + "EFFECT_FLOAT" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:236", + "name": "dimension/dimension-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4493" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:203:4493", + "aliasName": "space/dimensions-fixed-24" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:237", + "name": "dimension/dimension-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:238", + "name": "dimension/dimension-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4495" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 48, + "alias": "VariableID:203:4495", + "aliasName": "space/dimensions-fixed-48" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:239", + "name": "elevation/elevation-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 4 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": null + } + }, + "scopes": [ + "EFFECT_FLOAT" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:80:242", + "name": "elevation/elevation-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 8 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": null + } + }, + "scopes": [ + "EFFECT_FLOAT" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:80:243", + "name": "elevation/elevation-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 16 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": null + } + }, + "scopes": [ + "EFFECT_FLOAT" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:80:244", + "name": "elevation/elevation-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 24 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": null + } + }, + "scopes": [ + "EFFECT_FLOAT" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:80:245", + "name": "elevation/elevation-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 48 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 48, + "alias": null + } + }, + "scopes": [ + "EFFECT_FLOAT" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:81:1904", + "name": "borderWidth/borderWidth-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:59:20" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 1, + "alias": "VariableID:59:20", + "aliasName": "borderWidth/dimensions-border-width-1" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:81:1905", + "name": "borderWidth/borderWidth-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:59:21" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:59:21", + "aliasName": "borderWidth/dimensions-border-width-2" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:95:1557", + "name": "fill/fill-neutral-dark", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:56" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.1882352977991104, + "g": 0.2078431397676468, + "b": 0.23529411852359772, + "a": 1 + }, + "alias": "VariableID:39:56", + "aliasName": "colors/colors-neutral-800" + } + }, + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:95:1558", + "name": "fill/fill-neutral-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:53" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6138784885406494, + "g": 0.6435658931732178, + "b": 0.689746081829071, + "a": 1 + }, + "alias": "VariableID:39:53", + "aliasName": "colors/colors-neutral-500" + } + }, + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:95:1559", + "name": "fill/fill-accent-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:17" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.34117648005485535, + "b": 0.13725490868091583, + "a": 1 + }, + "alias": "VariableID:38:17", + "aliasName": "colors/colors-primary-500" + } + }, + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:95:1560", + "name": "fill/fill-neutral-base", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:124" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "alias": "VariableID:39:124", + "aliasName": "colors/white-500" + } + }, + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:107:713", + "name": "padding/padding-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4488" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:203:4488", + "aliasName": "space/dimensions-fixed-8" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:107:716", + "name": "padding/padding-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4487" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:203:4487", + "aliasName": "space/dimensions-fixed-4" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122214", + "name": "borderColor/borderColor-neutral-black", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:57" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.09803921729326248, + "g": 0.10980392247438431, + "b": 0.125490203499794, + "a": 1 + }, + "alias": "VariableID:39:57", + "aliasName": "colors/colors-neutral-900" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122215", + "name": "borderColor/borderColor-neutral-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122216", + "name": "borderColor/borderColor-neutral-dimmed", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:50" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9411764740943909, + "g": 0.9450980424880981, + "b": 0.9529411792755127, + "a": 1 + }, + "alias": "VariableID:39:50", + "aliasName": "colors/colors-neutral-200" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122217", + "name": "borderColor/borderColor-neutral-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:49" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9686274528503418, + "g": 0.9725490212440491, + "b": 0.9764705896377563, + "a": 1 + }, + "alias": "VariableID:39:49", + "aliasName": "colors/colors-neutral-100" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122218", + "name": "borderColor/borderColor-accent-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:17" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.34117648005485535, + "b": 0.13725490868091583, + "a": 1 + }, + "alias": "VariableID:38:17", + "aliasName": "colors/colors-primary-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122219", + "name": "borderColor/borderColor-accent-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:37:4" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9529722929000854, + "b": 0.9474395513534546, + "a": 1 + }, + "alias": "VariableID:37:4", + "aliasName": "colors/colors-primary-100" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:203:4497", + "name": "padding/padding-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4495" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 48, + "alias": "VariableID:203:4495", + "aliasName": "space/dimensions-fixed-48" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17123", + "name": "spacing/spacing-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4487" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:203:4487", + "aliasName": "space/dimensions-fixed-4" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17124", + "name": "spacing/spacing-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4488" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:203:4488", + "aliasName": "space/dimensions-fixed-8" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17125", + "name": "spacing/spacing-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4492" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:203:4492", + "aliasName": "space/dimensions-fixed-16" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17126", + "name": "spacing/spacing-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4493" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:203:4493", + "aliasName": "space/dimensions-fixed-24" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17127", + "name": "spacing/spacing-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17128", + "name": "spacing/spacing-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4495" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 48, + "alias": "VariableID:203:4495", + "aliasName": "space/dimensions-fixed-48" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17129", + "name": "margin/margin-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4487" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:203:4487", + "aliasName": "space/dimensions-fixed-4" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17130", + "name": "margin/margin-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4488" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:203:4488", + "aliasName": "space/dimensions-fixed-8" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17131", + "name": "margin/margin-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4492" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:203:4492", + "aliasName": "space/dimensions-fixed-16" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17132", + "name": "margin/margin-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4493" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:203:4493", + "aliasName": "space/dimensions-fixed-24" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17133", + "name": "margin/margin-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17134", + "name": "margin/margin-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:529:17319", + "name": "textColor/textColor-sucess-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:23" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8705882430076599, + "g": 0.9647058844566345, + "b": 0.9490196108818054, + "a": 1 + }, + "alias": "VariableID:38:23", + "aliasName": "colors/colors-success-200" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:835:90", + "name": "backgroundColor/backgroundColor-success-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:835:91", + "name": "backgroundColor/backgroundColor-success-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:25" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.43921568989753723, + "g": 0.8588235378265381, + "b": 0.7803921699523926, + "a": 1 + }, + "alias": "VariableID:38:25", + "aliasName": "colors/colors-success-400" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:835:92", + "name": "backgroundColor/backgroundColor-success-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:23" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8705882430076599, + "g": 0.9647058844566345, + "b": 0.9490196108818054, + "a": 1 + }, + "alias": "VariableID:38:23", + "aliasName": "colors/colors-success-200" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:778", + "name": "backgroundColor/backgroundColor-primary-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:19" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7764706015586853, + "g": 0.20000000298023224, + "b": 0.0235294122248888, + "a": 1 + }, + "alias": "VariableID:38:19", + "aliasName": "colors/colors-primary-700" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:779", + "name": "backgroundColor/backgroundColor-secondary-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:28" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.572549045085907, + "b": 0.4313725531101227, + "a": 1 + }, + "alias": "VariableID:38:28", + "aliasName": "colors/colors-success-700" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:780", + "name": "backgroundColor/backgroundColor-success-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:824:7484" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.572549045085907, + "b": 0.4313725531101227, + "a": 1 + }, + "alias": "VariableID:824:7484", + "aliasName": "colors/colors-secondary-700" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:781", + "name": "backgroundColor/backgroundColor-destructive-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:45" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6745098233222961, + "g": 0.09019608050584793, + "b": 0.0941176488995552, + "a": 1 + }, + "alias": "VariableID:38:45", + "aliasName": "colors/colors-destructive-600" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:782", + "name": "backgroundColor/backgroundColor-warning-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:37" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7450980544090271, + "g": 0.5568627715110779, + "b": 0, + "a": 1 + }, + "alias": "VariableID:38:37", + "aliasName": "colors/colors-warning-700" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:783", + "name": "backgroundColor/backgroundColor-primary-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:21" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.5098039507865906, + "g": 0.12156862765550613, + "b": 0, + "a": 1 + }, + "alias": "VariableID:38:21", + "aliasName": "colors/colors-primary-900" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:784", + "name": "backgroundColor/backgroundColor-secondary-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:30" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.29019609093666077, + "b": 0.1921568661928177, + "a": 1 + }, + "alias": "VariableID:38:30", + "aliasName": "colors/colors-success-900" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:785", + "name": "backgroundColor/backgroundColor-success-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:824:7486" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.29019609093666077, + "b": 0.1921568661928177, + "a": 1 + }, + "alias": "VariableID:824:7486", + "aliasName": "colors/colors-secondary-900" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:786", + "name": "backgroundColor/backgroundColor-destructive-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:47" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.3960784375667572, + "g": 0.03529411926865578, + "b": 0.03529411926865578, + "a": 1 + }, + "alias": "VariableID:38:47", + "aliasName": "colors/colors-destructive-800" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:787", + "name": "backgroundColor/backgroundColor-warning-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:38" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.4274509847164154, + "g": 0.32156863808631897, + "b": 0.003921568859368563, + "a": 1 + }, + "alias": "VariableID:38:38", + "aliasName": "colors/colors-warning-800" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:846:3890", + "name": "fill/fill-neutral-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:849:780", + "name": "fill/fill-neutral-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:55" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.34716352820396423, + "g": 0.38350826501846313, + "b": 0.42792969942092896, + "a": 1 + }, + "alias": "VariableID:39:55", + "aliasName": "colors/colors-neutral-700" + } + }, + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:849:783", + "name": "borderColor/borderColor-destructive-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:44" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8313725590705872, + "g": 0.1411764770746231, + "b": 0.1411764770746231, + "a": 1 + }, + "alias": "VariableID:38:44", + "aliasName": "colors/colors-destructive-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:849:784", + "name": "borderColor/borderColor-sucess-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:849:906", + "name": "borderColor/borderColor-neutral-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:53" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6138784885406494, + "g": 0.6435658931732178, + "b": 0.689746081829071, + "a": 1 + }, + "alias": "VariableID:39:53", + "aliasName": "colors/colors-neutral-500" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:851:2608", + "name": "textColor/textColor-neutral-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:53" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6138784885406494, + "g": 0.6435658931732178, + "b": 0.689746081829071, + "a": 1 + }, + "alias": "VariableID:39:53", + "aliasName": "colors/colors-neutral-500" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:891:81144", + "name": "textColor/textColor-neutral-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:3695", + "name": "backgroundColor/backgroundColor-neutral-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:55" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.34716352820396423, + "g": 0.38350826501846313, + "b": 0.42792969942092896, + "a": 1 + }, + "alias": "VariableID:39:55", + "aliasName": "colors/colors-neutral-700" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:3698", + "name": "backgroundColor/backgroundColor-neutral-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:50" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9411764740943909, + "g": 0.9450980424880981, + "b": 0.9529411792755127, + "a": 1 + }, + "alias": "VariableID:39:50", + "aliasName": "colors/colors-neutral-200" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4555", + "name": "backgroundColor/backgroundColor-primary-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:15" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9882352948188782, + "g": 0.6666666865348816, + "b": 0.5686274766921997, + "a": 1 + }, + "alias": "VariableID:38:15", + "aliasName": "colors/colors-primary-300" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4556", + "name": "backgroundColor/backgroundColor-secondary-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:25" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.43921568989753723, + "g": 0.8588235378265381, + "b": 0.7803921699523926, + "a": 1 + }, + "alias": "VariableID:38:25", + "aliasName": "colors/colors-success-400" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4557", + "name": "backgroundColor/backgroundColor-success-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:24" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6745098233222961, + "g": 0.9137254953384399, + "b": 0.8666666746139526, + "a": 1 + }, + "alias": "VariableID:38:24", + "aliasName": "colors/colors-success-300" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4558", + "name": "backgroundColor/backgroundColor-destructive-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:42" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9607843160629272, + "g": 0.5803921818733215, + "b": 0.572549045085907, + "a": 1 + }, + "alias": "VariableID:38:42", + "aliasName": "colors/colors-destructive-300" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4559", + "name": "backgroundColor/backgroundColor-warning-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:32" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9960784316062927, + "g": 0.9333333373069763, + "b": 0.7529411911964417, + "a": 1 + }, + "alias": "VariableID:38:32", + "aliasName": "colors/colors-warning-200" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:6772", + "name": "borderColor/borderColor-accent-dimmed", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:37:9" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9921568632125854, + "g": 0.800000011920929, + "b": 0.7372549176216125, + "a": 1 + }, + "alias": "VariableID:37:9", + "aliasName": "colors/colors-primary-200" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1148:687", + "name": "dimension/dimension-xxs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4489" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:203:4489", + "aliasName": "space/dimensions-fixed-2" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1148:688", + "name": "spacing/spacing-3xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4496" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 64, + "alias": "VariableID:203:4496", + "aliasName": "space/dimensions-fixed-64" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1148:689", + "name": "spacing/spacing-xxs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4489" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:203:4489", + "aliasName": "space/dimensions-fixed-2" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1148:690", + "name": "spacing/spacing-none", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1148:691" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 0, + "alias": "VariableID:1148:691", + "aliasName": "space/dimensions-fixed-0" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1152:342", + "name": "borderColor/borderColor-neutral-dark", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:54" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.4613589644432068, + "g": 0.5014801025390625, + "b": 0.5576497316360474, + "a": 1 + }, + "alias": "VariableID:39:54", + "aliasName": "colors/colors-neutral-600" + } + }, + "scopes": [ + "ALL_SCOPES" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1227:19184", + "name": "fill/fill-success", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1227:21660", + "name": "fill/fill-warning", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:35" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9843137264251709, + "g": 0.8117647171020508, + "b": 0.29019609093666077, + "a": 1 + }, + "alias": "VariableID:38:35", + "aliasName": "colors/colors-warning-500" + } + }, + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1227:21661", + "name": "fill/fill-destructive", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:44" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8313725590705872, + "g": 0.1411764770746231, + "b": 0.1411764770746231, + "a": 1 + }, + "alias": "VariableID:38:44", + "aliasName": "colors/colors-destructive-500" + } + }, + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1335:7762", + "name": "textColor/textColor-destructive-primary", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:44" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8313725590705872, + "g": 0.1411764770746231, + "b": 0.1411764770746231, + "a": 1 + }, + "alias": "VariableID:38:44", + "aliasName": "colors/colors-destructive-500" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1335:7763", + "name": "textColor/textColor-destructive-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:42" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9607843160629272, + "g": 0.5803921818733215, + "b": 0.572549045085907, + "a": 1 + }, + "alias": "VariableID:38:42", + "aliasName": "colors/colors-destructive-300" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1335:7764", + "name": "textColor/textColor-destructive-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:40" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9372549057006836, + "b": 0.9372549057006836, + "a": 1 + }, + "alias": "VariableID:38:40", + "aliasName": "colors/colors-destructive-100" + } + }, + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + } + ] +} \ No newline at end of file diff --git a/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js new file mode 100644 index 00000000000..255ef10d330 --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js @@ -0,0 +1,51 @@ +function rgbToHsl(r, g, b) { + // Convert RGB values (0-255 range) to the range of 0-1 + r /= 255; + g /= 255; + b /= 255; + + const maxVal = Math.max(r, g, b); + const minVal = Math.min(r, g, b); + const delta = maxVal - minVal; + + let h = 0, + s = 0, + l = (maxVal + minVal) / 2; + + if (delta !== 0) { + s = delta / (1 - Math.abs(2 * l - 1)); + + if (maxVal === r) { + h = ((g - b) / delta) % 6; + } else if (maxVal === g) { + h = (b - r) / delta + 2; + } else { + h = (r - g) / delta + 4; + } + + h = Math.round(h * 60); // Convert to degrees + if (h < 0) h += 360; + } + + s = +(s * 100).toFixed(1); + l = +(l * 100).toFixed(1); + + return { h, s, l }; +} + +function figmaRgbaToHsla(figmaColor) { + const { r, g, b, a } = figmaColor; + + // Convert normalized RGBA to standard RGB (0-255) + const red = Math.round(r * 255); + const green = Math.round(g * 255); + const blue = Math.round(b * 255); + + // Get the HSL values + const { h, s, l } = rgbToHsl(red, green, blue); + + // Return the HSLA value + return { h, s, l, a } ; +} + +module.exports = { figmaRgbaToHsla }; diff --git a/packages/admin-ui/scripts/importFromFigma/formatCode.js b/packages/admin-ui/scripts/importFromFigma/formatCode.js new file mode 100644 index 00000000000..3b851aaf12c --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/formatCode.js @@ -0,0 +1,14 @@ +const fs = require("fs"); +const prettier = require("prettier"); + +const formatCode = async filePath => { + const options = await prettier.resolveConfig(filePath); + const fileContentRaw = fs.readFileSync(filePath).toString("utf8"); + const fileContentFormatted = prettier.format(fileContentRaw, { + ...options, + filepath: filePath + }); + fs.writeFileSync(filePath, fileContentFormatted); +}; + +module.exports = { formatCode }; diff --git a/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js new file mode 100644 index 00000000000..c0f63af091a --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js @@ -0,0 +1,52 @@ +const aliasTokensExport = require("./exports/Alias tokens.json"); +const { figmaRgbaToHsla } = require("./figmaRgbaToHsla"); + +const VARIABLE_TYPES = [ + "backgroundColor", + "borderColor", + "textColor", + "padding", + "elevation", + "fill", + "spacing", + "margin", + "borderRadius", + "dimension", + "borderWidth" +]; + +const getVariableType = variableName => { + for (const type of VARIABLE_TYPES) { + if (variableName.startsWith(type + "/")) { + return type; + } + } + + throw new Error(`Unknown variable type for variable "${variableName}".`); +}; + +const normalizeFigmaExport = () => { + return aliasTokensExport.variables + .map(variable => { + const { aliasName, resolvedValue } = variable.resolvedValuesByMode["37:2"]; + + const [, variantName] = variable.name.match(/[a-zA-Z]*?\/[a-zA-Z]*?-(.*)/); + + const type = getVariableType(variable.name); + + return { + type, + name: variable.name, + aliasName, + hsla: figmaRgbaToHsla(resolvedValue), + variantName, + resolvedValue + }; + }) + .sort((variable1, variable2) => { + // Order by variable.name, from A to Z. + return variable1.name.localeCompare(variable2.name); + }); +}; + +module.exports = { normalizeFigmaExport }; diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt new file mode 100644 index 00000000000..41f2313717c --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -0,0 +1,123 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + // New variables from design. + + // Background colors. + {BACKGROUND_COLORS} + + // Text colors. + {TEXT_COLORS} + + // Border color. + {BORDER_COLORS} + + // Border radius. + {BORDER_RADIUS} + + // Border width. + {BORDER_WIDTH} + + // Padding. + {PADDING} + + // Margin. + {MARGIN} + + // Elevation. + {ELEVATION} + + // Fill. + {FILL} + + // Spacing. + {SPACING} + + // Old vars (we'll delete these once we're done). + + --background: 0 0% 100%; + --foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 47.4% 11.2%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --card: 0 0% 100%; + --card-foreground: 222.2 47.4% 11.2%; + + --primary: 15 96% 56%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --neutral: 210 40% 96.1%; + --neutral-strong: 210 40% 96.1%; + --neutral-muted: 210 40% 96.1%; + --neutral-dimmed: 210 40% 96.1%; + --neutral-disabled: 210 40% 96.1%; + --neutral-light: 0 0% 100%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 100% 50%; + --destructive-foreground: 210 40% 98%; + + --ring: 215 20.2% 65.1%; + + --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif; + } + + .dark { + --background: 224 71% 4%; + --foreground: 213 31% 91%; + + --muted: 223 47% 11%; + --muted-foreground: 215.4 16.3% 56.9%; + + --accent: 216 34% 17%; + --accent-foreground: 210 40% 98%; + + --popover: 224 71% 4%; + --popover-foreground: 215 20.2% 65.1%; + + --border: 216 34% 17%; + --input: 216 34% 17%; + + --card: 224 71% 4%; + --card-foreground: 213 31% 91%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 1.2%; + + --secondary: 222.2 47.4% 11.2%; + --secondary-foreground: 210 40% 98%; + + --destructive: 0 63% 31%; + --destructive-foreground: 210 40% 98%; + + --ring: 216 34% 17%; + + --radius: 8px; + } +} + +//@layer base { +// * { +// @apply border-border; +// } +// +// body { +// @apply bg-background text-foreground; +// font-feature-settings: "rlig" 1, "calt" 1; +// } +//} diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index 13ef1c88850..ad7358354e1 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -7,12 +7,13 @@ // New variables from design. // Background colors. + --bg-neutral-base: HHH, SSS%, LLL%; --bg-neutral-dark: HHH, SSS%, LLL%; + --bg-neutral-dimmed: HHH, SSS%, LLL%; --bg-neutral-xstrong: HHH, SSS%, LLL%; --bg-neutral-strong: HHH, SSS%, LLL%; --bg-neutral-muted: HHH, SSS%, LLL%; --bg-neutral-disabled: HHH, SSS%, LLL%; - --bg-neutral-dimmed: HHH, SSS%, LLL%; --bg-neutral-light: HHH, SSS%, LLL%; --bg-neutral-subtle: HHH, SSS%, LLL%; --bg-neutral: HHH, SSS%, LLL%; diff --git a/packages/admin-ui/src/styles2.scss b/packages/admin-ui/src/styles2.scss new file mode 100644 index 00000000000..f47e2856b22 --- /dev/null +++ b/packages/admin-ui/src/styles2.scss @@ -0,0 +1,237 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + // New variables from design. + + // Background colors. + --bg-destructive-default: 0, 71%, 48.6%; + --bg-destructive-disabled: 1, 83.2%, 76.7%; + --bg-destructive-muted: 0, 66.3%, 62.7%; + --bg-destructive-strong: 0, 76.4%, 38.2%; + --bg-destructive-subtle: 0, 100%, 96.9%; + --bg-destructive-xstrong: 0, 83.6%, 21.6%; + + --bg-neutral-base: 0, 0%, 100%; + --bg-neutral-dark: 214, 12.3%, 11.2%; + --bg-neutral-dimmed: 220, 11.1%, 94.7%; + --bg-neutral-disabled: 220, 11.1%, 94.7%; + --bg-neutral-light: 210, 14.3%, 97.3%; + --bg-neutral-muted: 225, 16.7%, 90.6%; + --bg-neutral-strong: 219, 12.1%, 77.3%; + --bg-neutral-subtle: 180, 11.1%, 98.2%; + --bg-neutral-xstrong: 213, 10.1%, 38.8%; + + --bg-primary-default: 15, 95.6%, 55.9%; + --bg-primary-disabled: 14, 94.7%, 77.8%; + --bg-primary-muted: 14, 94.7%, 77.8%; + --bg-primary-strong: 14, 94.1%, 40%; + --bg-primary-subtle: 5, 100%, 97.5%; + --bg-primary-xstrong: 14, 100%, 25.5%; + + --bg-secondary-default: 170, 100%, 37.5%; + --bg-secondary-disabled: 169, 59.8%, 64.9%; + --bg-secondary-muted: 169, 59.8%, 64.9%; + --bg-secondary-strong: 165, 100%, 28.6%; + --bg-secondary-subtle: 170, 57.1%, 91.8%; + --bg-secondary-xstrong: 160, 100%, 14.5%; + + --bg-success-default: 170, 100%, 37.5%; + --bg-success-disabled: 168, 58.1%, 79.4%; + --bg-success-muted: 169, 59.8%, 64.9%; + --bg-success-strong: 165, 100%, 28.6%; + --bg-success-subtle: 170, 57.1%, 91.8%; + --bg-success-xstrong: 160, 100%, 14.5%; + + --bg-warning-default: 45, 95.7%, 63.7%; + --bg-warning-disabled: 45, 96.9%, 87.5%; + --bg-warning-muted: 45, 95.1%, 75.9%; + --bg-warning-strong: 45, 100%, 37.3%; + --bg-warning-subtle: 43, 100%, 96.5%; + --bg-warning-xstrong: 45, 98.2%, 21.6%; + + // Text colors. + --text-accent-muted: 14, 94.7%, 77.8%; + --text-accent-primary: 15, 95.6%, 55.9%; + --text-accent-subtle: 5, 100%, 97.5%; + + --text-destructive-muted: 1, 83.2%, 76.7%; + --text-destructive-primary: 0, 71%, 48.6%; + --text-destructive-subtle: 0, 100%, 96.9%; + + --text-neutral-dimmed: 219, 12.1%, 77.3%; + --text-neutral-disabled: 219, 12.1%, 77.3%; + --text-neutral-light: 0, 0%, 100%; + --text-neutral-muted: 218, 10.7%, 65.3%; + --text-neutral-primary: 214, 12.3%, 11.2%; + --text-neutral-strong: 213, 10.1%, 38.8%; + + --text-sucess-muted: 169, 59.8%, 64.9%; + --text-sucess-primary: 170, 100%, 37.5%; + --text-sucess-subtle: 170, 57.1%, 91.8%; + + // Border color. + --border-accent-default: 15, 95.6%, 55.9%; + --border-accent-dimmed: 15, 94.2%, 86.5%; + --border-accent-subtle: 5, 100%, 97.5%; + + --border-destructive-default: 0, 71%, 48.6%; + + --border-neutral-black: 214, 12.3%, 11.2%; + --border-neutral-dark: 215, 9.6%, 51%; + --border-neutral-dimmed: 220, 11.1%, 94.7%; + --border-neutral-muted: 219, 12.1%, 77.3%; + --border-neutral-strong: 218, 10.7%, 65.3%; + --border-neutral-subtle: 210, 14.3%, 97.3%; + + --border-sucess-default: 170, 100%, 37.5%; + + // Border radius. + --radius-lg: 16px; + --radius-md: 8px; + --radius-sm: 4px; + --radius-xl: 24px; + --radius-xs: 2px; + --radius-xxl: 36px; + + // Border width. + --border-width-md: 2px; + --border-width-sm: 1px; + + // Padding. + --padding-lg: 24px; + --padding-md: 16px; + --padding-sm: 8px; + --padding-xl: 32px; + --padding-xs: 4px; + --padding-xxl: 48px; + + // Margin. + --margin-lg: 24px; + --margin-md: 16px; + --margin-sm: 8px; + --margin-xl: 32px; + --margin-xs: 4px; + --margin-xxl: 32px; + + // Elevation. + --elevation-flat: 0px; + --elevation-lg: 16px; + --elevation-md: 8px; + --elevation-sm: 4px; + --elevation-xl: 24px; + --elevation-xxl: 48px; + + // Fill. + --fill-accent-default: 15, 95.6%, 55.9%; + + --fill-destructive: 0, 71%, 48.6%; + + --fill-neutral-base: 0, 0%, 100%; + --fill-neutral-dark: 215, 11.1%, 21.2%; + --fill-neutral-disabled: 219, 12.1%, 77.3%; + --fill-neutral-strong: 218, 10.7%, 65.3%; + --fill-neutral-xstrong: 213, 10.1%, 38.8%; + + --fill-success: 170, 100%, 37.5%; + + --fill-warning: 45, 95.7%, 63.7%; + + // Spacing. + --spacing-3xl: 64px; + --spacing-lg: 24px; + --spacing-md: 16px; + --spacing-none: 0px; + --spacing-sm: 8px; + --spacing-xl: 32px; + --spacing-xs: 4px; + --spacing-xxl: 48px; + --spacing-xxs: 2px; + + // Old vars (we'll delete these once we're done). + + --background: 0 0% 100%; + --foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 47.4% 11.2%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --card: 0 0% 100%; + --card-foreground: 222.2 47.4% 11.2%; + + --primary: 15 96% 56%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --neutral: 210 40% 96.1%; + --neutral-strong: 210 40% 96.1%; + --neutral-muted: 210 40% 96.1%; + --neutral-dimmed: 210 40% 96.1%; + --neutral-disabled: 210 40% 96.1%; + --neutral-light: 0 0% 100%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 100% 50%; + --destructive-foreground: 210 40% 98%; + + --ring: 215 20.2% 65.1%; + + --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif; + } + + .dark { + --background: 224 71% 4%; + --foreground: 213 31% 91%; + + --muted: 223 47% 11%; + --muted-foreground: 215.4 16.3% 56.9%; + + --accent: 216 34% 17%; + --accent-foreground: 210 40% 98%; + + --popover: 224 71% 4%; + --popover-foreground: 215 20.2% 65.1%; + + --border: 216 34% 17%; + --input: 216 34% 17%; + + --card: 224 71% 4%; + --card-foreground: 213 31% 91%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 1.2%; + + --secondary: 222.2 47.4% 11.2%; + --secondary-foreground: 210 40% 98%; + + --destructive: 0 63% 31%; + --destructive-foreground: 210 40% 98%; + + --ring: 216 34% 17%; + + --radius: 8px; + } +} + +//@layer base { +// * { +// @apply border-border; +// } +// +// body { +// @apply bg-background text-foreground; +// font-feature-settings: "rlig" 1, "calt" 1; +// } +//} diff --git a/packages/admin-ui/tailwind.config.customizations.js b/packages/admin-ui/tailwind.config.customizations.js new file mode 100644 index 00000000000..ebf2fe41362 --- /dev/null +++ b/packages/admin-ui/tailwind.config.customizations.js @@ -0,0 +1,127 @@ +module.exports = { + backgroundColor: { + destructive: { + DEFAULT: "var(--bg-destructive-default)", + default: "var(--bg-destructive-default)", + disabled: "var(--bg-destructive-disabled)", + muted: "var(--bg-destructive-muted)", + strong: "var(--bg-destructive-strong)", + subtle: "var(--bg-destructive-subtle)", + xstrong: "var(--bg-destructive-xstrong)" + }, + neutral: { + DEFAULT: "var(--bg-neutral-default)", + base: "var(--bg-neutral-base)", + dark: "var(--bg-neutral-dark)", + dimmed: "var(--bg-neutral-dimmed)", + disabled: "var(--bg-neutral-disabled)", + light: "var(--bg-neutral-light)", + muted: "var(--bg-neutral-muted)", + strong: "var(--bg-neutral-strong)", + subtle: "var(--bg-neutral-subtle)", + xstrong: "var(--bg-neutral-xstrong)" + }, + primary: { + DEFAULT: "var(--bg-primary-default)", + default: "var(--bg-primary-default)", + disabled: "var(--bg-primary-disabled)", + muted: "var(--bg-primary-muted)", + strong: "var(--bg-primary-strong)", + subtle: "var(--bg-primary-subtle)", + xstrong: "var(--bg-primary-xstrong)" + }, + secondary: { + DEFAULT: "var(--bg-secondary-default)", + default: "var(--bg-secondary-default)", + disabled: "var(--bg-secondary-disabled)", + muted: "var(--bg-secondary-muted)", + strong: "var(--bg-secondary-strong)", + subtle: "var(--bg-secondary-subtle)", + xstrong: "var(--bg-secondary-xstrong)" + }, + success: { + DEFAULT: "var(--bg-success-default)", + default: "var(--bg-success-default)", + disabled: "var(--bg-success-disabled)", + muted: "var(--bg-success-muted)", + strong: "var(--bg-success-strong)", + subtle: "var(--bg-success-subtle)", + xstrong: "var(--bg-success-xstrong)" + }, + warning: { + DEFAULT: "var(--bg-warning-default)", + default: "var(--bg-warning-default)", + disabled: "var(--bg-warning-disabled)", + muted: "var(--bg-warning-muted)", + strong: "var(--bg-warning-strong)", + subtle: "var(--bg-warning-subtle)", + xstrong: "var(--bg-warning-xstrong)" + } + }, + borderColor: { + accent: { + DEFAULT: "var(--border-accent-default)", + default: "var(--border-accent-default)", + dimmed: "var(--border-accent-dimmed)", + subtle: "var(--border-accent-subtle)" + }, + destructive: { + DEFAULT: "var(--border-destructive-default)", + default: "var(--border-destructive-default)" + }, + neutral: { + DEFAULT: "var(--border-neutral-default)", + black: "var(--border-neutral-black)", + dark: "var(--border-neutral-dark)", + dimmed: "var(--border-neutral-dimmed)", + muted: "var(--border-neutral-muted)", + strong: "var(--border-neutral-strong)", + subtle: "var(--border-neutral-subtle)" + }, + sucess: { + DEFAULT: "var(--border-sucess-default)", + default: "var(--border-sucess-default)" + } + }, + textColor: { + accent: { + DEFAULT: "var(--text-accent-default)", + muted: "var(--text-accent-muted)", + primary: "var(--text-accent-primary)", + subtle: "var(--text-accent-subtle)" + }, + destructive: { + DEFAULT: "var(--text-destructive-default)", + muted: "var(--text-destructive-muted)", + primary: "var(--text-destructive-primary)", + subtle: "var(--text-destructive-subtle)" + }, + neutral: { + DEFAULT: "var(--text-neutral-default)", + dimmed: "var(--text-neutral-dimmed)", + disabled: "var(--text-neutral-disabled)", + light: "var(--text-neutral-light)", + muted: "var(--text-neutral-muted)", + primary: "var(--text-neutral-primary)", + strong: "var(--text-neutral-strong)" + }, + sucess: { + DEFAULT: "var(--text-sucess-default)", + muted: "var(--text-sucess-muted)", + primary: "var(--text-sucess-primary)", + subtle: "var(--text-sucess-subtle)" + } + }, + borderRadius: { + lg: "var(--radius-lg)", + md: "var(--radius-md)", + sm: "var(--radius-sm)", + xl: "var(--radius-xl)", + xs: "var(--radius-xs)", + xxl: "var(--radius-xxl)" + }, + borderWidth: { + md: "var(--border-width-md)", + sm: "var(--border-width-sm)" + } +}; diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index d5578967bb9..23500dd9c2a 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -6,6 +6,13 @@ const project = getProject(); const webinyPackagesGlob = `${project.root}/node_modules/@webiny/app*/**/*.js`; const webinyAdminUiPackageGlob = `${project.root}/node_modules/@webiny/admin-ui/**/*.js`; const adminAppSourceGlob = `${project.root}/apps/admin`; +const { + backgroundColor, + borderColor, + textColor, + borderRadius, + borderWidth +} = require("./tailwind.config.customizations"); /** @type {import('tailwindcss').Config} */ module.exports = { @@ -19,107 +26,12 @@ module.exports = { "2xl": "1400px" } }, - backgroundColor: { - neutral: { - DEFAULT: "hsl(var(--bg-neutral-base))", - dark: "hsl(var(--bg-neutral-dark))", - xstrong: "hsl(var(--bg-neutral-xstrong))", - strong: "hsl(var(--bg-neutral-strong))", - muted: "hsl(var(--bg-neutral-muted))", - disabled: "hsl(var(--bg-neutral-disabled))", - dimmed: "hsl(var(--bg-neutral-dimmed))", - subtle: "hsl(var(--bg-neutral-subtle))", - light: "hsl(var(--bg-neutral-light))", - base: "hsl(var(--bg-neutral-base))" - }, - primary: { - DEFAULT: "hsl(var(--bg-primary-default))", - default: "hsl(var(--bg-primary-default))", - muted: "hsl(var(--bg-primary-muted))", - disabled: "hsl(var(--bg-primary-disabled))", - subtle: "hsl(var(--bg-primary-subtle))", - strong: "hsl(var(--bg-primary-strong))", - xstrong: "hsl(var(--bg-primary-xstrong))" - }, - secondary: { - DEFAULT: "hsl(var(--bg-secondary-default))", - default: "hsl(var(--bg-secondary-default))", - muted: "hsl(var(--bg-secondary-muted))", - disabled: "hsl(var(--bg-secondary-disabled))", - subtle: "hsl(var(--bg-secondary-subtle))", - strong: "hsl(var(--bg-secondary-strong))", - xstrong: "hsl(var(--bg-secondary-xstrong))" - }, - success: { - DEFAULT: "hsl(var(--bg-success-default))", - default: "hsl(var(--bg-success-default))", - muted: "hsl(var(--bg-success-muted))", - disabled: "hsl(var(--bg-success-disabled))", - subtle: "hsl(var(--bg-success-subtle))", - strong: "hsl(var(--bg-success-strong))", - xstrong: "hsl(var(--bg-success-xstrong))" - }, - destructive: { - DEFAULT: "hsl(var(--bg-destructive-default))", - default: "hsl(var(--bg-destructive-default))", - muted: "hsl(var(--bg-destructive-muted))", - disabled: "hsl(var(--bg-destructive-disabled))", - subtle: "hsl(var(--bg-destructive-subtle))", - strong: "hsl(var(--bg-destructive-strong))", - xstrong: "hsl(var(--bg-destructive-xstrong))" - }, - warning: { - DEFAULT: "hsl(var(--bg-warning-default))", - default: "hsl(var(--bg-warning-default))", - muted: "hsl(var(--bg-warning-muted))", - disabled: "hsl(var(--bg-warning-disabled))", - subtle: "hsl(var(--bg-warning-subtle))", - strong: "hsl(var(--bg-warning-strong))", - xstrong: "hsl(var(--bg-warning-xstrong))" - } - }, - colors: { - primary: "hsl(var(--text-primary))", - subtle: "hsl(var(--text-subtle))", - muted: "hsl(var(--text-muted))", - dimmed: "hsl(var(--text-dimmed))", - disabled: "hsl(var(--text-disabled))", - white: "hsl(var(--text-white))" - }, - borderColor: { - neutral: { - dark: "hsl(var(--border-neutral-dark))", - strong: "hsl(var(--border-neutral-strong))", - muted: "hsl(var(--border-neutral-muted))", - dimmed: "hsl(var(--border-neutral-dimmed))", - subtle: "hsl(var(--border-neutral-subtle))" - }, - accent: { - DEFAULT: "hsl(var(--border-accent-default))", - default: "hsl(var(--border-accent-default))", - subtle: "hsl(var(--border-accent-subtle))" - }, - destructive: { - DEFAULT: "hsl(var(--border-destructive-default))", - default: "hsl(var(--border-destructive-default))" - }, - success: { - DEFAULT: "hsl(var(--border-success-default))", - default: "hsl(var(--border-success-default))" - } - }, - borderRadius: { - xs: "var(--radius-xs)", - sm: "var(--radius-sm)", - md: "var(--radius-md)", - lg: "var(--radius-lg)", - xl: "var(--radius-xl)", - xxl: "var(--radius-xxl)" - }, - borderWidth: { - sm: "var(--border-width-sm)", - md: "var(--border-width-md)" - }, + + backgroundColor, + colors: textColor, + borderColor, + borderRadius, + borderWidth, extend: { padding: { xs: "var(--padding-xs)", diff --git a/yarn.lock b/yarn.lock index 2f4cc89791c..4e293608ceb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17798,6 +17798,8 @@ __metadata: "@webiny/utils": 0.0.0 class-variance-authority: ^0.7.0 clsx: ^2.1.1 + color-convert: ^2.0.1 + colors-convert: ^1.4.1 css-loader: ^6.10.0 file-loader: 6.2.0 postcss-loader: ^6.2.1 @@ -26229,6 +26231,15 @@ __metadata: languageName: node linkType: hard +"colors-convert@npm:^1.4.1": + version: 1.4.1 + resolution: "colors-convert@npm:1.4.1" + dependencies: + lodash: ^4.17.15 + checksum: 56b7d2811296459f8dbb8ed52ef9f0967ea7890325b5dbca0f7203f0651c050b13ba9604084ebd5859e73286bdbdaee289f238fe37b2c56516fb6f77780deb99 + languageName: node + linkType: hard + "columnify@npm:1.6.0": version: 1.6.0 resolution: "columnify@npm:1.6.0" From cd42084d3fe8b500758cc8f9456f37690d925475 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 24 Oct 2024 06:48:19 +0200 Subject: [PATCH 23/62] wip --- package.json | 1 - packages/admin-ui/package.json | 2 + packages/admin-ui/scripts/importFromFigma.js | 2 +- packages/admin-ui/src/styles.scss | 194 ++++++++++++------- yarn.lock | 13 +- 5 files changed, 133 insertions(+), 79 deletions(-) diff --git a/package.json b/package.json index 8bdadddebc5..2915e2e66da 100644 --- a/package.json +++ b/package.json @@ -156,7 +156,6 @@ "webiny-admin-storybook": "cd packages/admin-ui && yarn storybook", "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook", "webiny-admin-import-from-figma": "node packages/admin-ui/scripts/importFromFigma.js" - }, "husky": { "hooks": { diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index 811476a9118..e752c799ea8 100644 --- a/packages/admin-ui/package.json +++ b/packages/admin-ui/package.json @@ -41,9 +41,11 @@ "@types/react": "18.2.79", "@webiny/cli": "0.0.0", "@webiny/project-utils": "0.0.0", + "chalk": "^4.1.0", "css-loader": "^6.10.0", "file-loader": "6.2.0", "postcss-loader": "^6.2.1", + "prettier": "^2.8.3", "rimraf": "^5.0.5", "sass": "1.44.0", "storybook": "7.6.20", diff --git a/packages/admin-ui/scripts/importFromFigma.js b/packages/admin-ui/scripts/importFromFigma.js index 320c51b1d1d..6e7c64afe3c 100644 --- a/packages/admin-ui/scripts/importFromFigma.js +++ b/packages/admin-ui/scripts/importFromFigma.js @@ -23,7 +23,7 @@ const saveFileAndFormat = async (filePath, content) => { cwd: process.cwd(), normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"), tailwindConfigCustomizations: path.join(__dirname, "../tailwind.config.customizations.js"), - stylesScss: path.join(__dirname, "../src/styles2.scss") + stylesScss: path.join(__dirname, "../src/styles.scss") }; console.log("Storing..."); diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index ad7358354e1..f47e2856b22 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -7,87 +7,149 @@ // New variables from design. // Background colors. - --bg-neutral-base: HHH, SSS%, LLL%; - --bg-neutral-dark: HHH, SSS%, LLL%; - --bg-neutral-dimmed: HHH, SSS%, LLL%; - --bg-neutral-xstrong: HHH, SSS%, LLL%; - --bg-neutral-strong: HHH, SSS%, LLL%; - --bg-neutral-muted: HHH, SSS%, LLL%; - --bg-neutral-disabled: HHH, SSS%, LLL%; - --bg-neutral-light: HHH, SSS%, LLL%; - --bg-neutral-subtle: HHH, SSS%, LLL%; - --bg-neutral: HHH, SSS%, LLL%; - - --bg-primary: HHH SSS% LLL%; - --bg-primary-strong: HHH SSS% LLL%; - --bg-primary-xstrong: HHH SSS% LLL%; - --bg-primary-muted: HHH SSS% LLL%; - --bg-primary-subtle: HHH SSS% LLL%; - --bg-primary-disabled: HHH SSS% LLL%; - - --bg-secondary: HHH SSS% LLL%; - --bg-secondary-strong: HHH SSS% LLL%; - --bg-secondary-xstrong: HHH SSS% LLL%; - --bg-secondary-muted: HHH SSS% LLL%; - --bg-secondary-subtle: HHH SSS% LLL%; - --bg-secondary-disabled: HHH SSS% LLL%; - - --bg-success: HHH SSS% LLL%; - --bg-success-strong: HHH SSS% LLL%; - --bg-success-xstrong: HHH SSS% LLL%; - --bg-success-muted: HHH SSS% LLL%; - --bg-success-subtle: HHH SSS% LLL%; - --bg-success-disabled: HHH SSS% LLL%; - - --bg-destructive: HHH SSS% LLL%; - --bg-destructive-strong: HHH SSS% LLL%; - --bg-destructive-xstrong: HHH SSS% LLL%; - --bg-destructive-muted: HHH SSS% LLL%; - --bg-destructive-subtle: HHH SSS% LLL%; - --bg-destructive-disabled: HHH SSS% LLL%; - - --bg-warning: HHH SSS% LLL%; - --bg-warning-strong: HHH SSS% LLL%; - --bg-warning-xstrong: HHH SSS% LLL%; - --bg-warning-muted: HHH SSS% LLL%; - --bg-warning-subtle: HHH SSS% LLL%; - --bg-warning-disabled: HHH SSS% LLL%; + --bg-destructive-default: 0, 71%, 48.6%; + --bg-destructive-disabled: 1, 83.2%, 76.7%; + --bg-destructive-muted: 0, 66.3%, 62.7%; + --bg-destructive-strong: 0, 76.4%, 38.2%; + --bg-destructive-subtle: 0, 100%, 96.9%; + --bg-destructive-xstrong: 0, 83.6%, 21.6%; + + --bg-neutral-base: 0, 0%, 100%; + --bg-neutral-dark: 214, 12.3%, 11.2%; + --bg-neutral-dimmed: 220, 11.1%, 94.7%; + --bg-neutral-disabled: 220, 11.1%, 94.7%; + --bg-neutral-light: 210, 14.3%, 97.3%; + --bg-neutral-muted: 225, 16.7%, 90.6%; + --bg-neutral-strong: 219, 12.1%, 77.3%; + --bg-neutral-subtle: 180, 11.1%, 98.2%; + --bg-neutral-xstrong: 213, 10.1%, 38.8%; + + --bg-primary-default: 15, 95.6%, 55.9%; + --bg-primary-disabled: 14, 94.7%, 77.8%; + --bg-primary-muted: 14, 94.7%, 77.8%; + --bg-primary-strong: 14, 94.1%, 40%; + --bg-primary-subtle: 5, 100%, 97.5%; + --bg-primary-xstrong: 14, 100%, 25.5%; + + --bg-secondary-default: 170, 100%, 37.5%; + --bg-secondary-disabled: 169, 59.8%, 64.9%; + --bg-secondary-muted: 169, 59.8%, 64.9%; + --bg-secondary-strong: 165, 100%, 28.6%; + --bg-secondary-subtle: 170, 57.1%, 91.8%; + --bg-secondary-xstrong: 160, 100%, 14.5%; + + --bg-success-default: 170, 100%, 37.5%; + --bg-success-disabled: 168, 58.1%, 79.4%; + --bg-success-muted: 169, 59.8%, 64.9%; + --bg-success-strong: 165, 100%, 28.6%; + --bg-success-subtle: 170, 57.1%, 91.8%; + --bg-success-xstrong: 160, 100%, 14.5%; + + --bg-warning-default: 45, 95.7%, 63.7%; + --bg-warning-disabled: 45, 96.9%, 87.5%; + --bg-warning-muted: 45, 95.1%, 75.9%; + --bg-warning-strong: 45, 100%, 37.3%; + --bg-warning-subtle: 43, 100%, 96.5%; + --bg-warning-xstrong: 45, 98.2%, 21.6%; // Text colors. - --text-primary: HHH SSS% LLL%; - --text-subtle: HHH SSS% LLL%; - --text-muted: HHH SSS% LLL%; - --text-dimmed: HHH SSS% LLL%; - --text-disabled: HHH SSS% LLL%; - --text-white: HHH SSS% LLL%; + --text-accent-muted: 14, 94.7%, 77.8%; + --text-accent-primary: 15, 95.6%, 55.9%; + --text-accent-subtle: 5, 100%, 97.5%; + + --text-destructive-muted: 1, 83.2%, 76.7%; + --text-destructive-primary: 0, 71%, 48.6%; + --text-destructive-subtle: 0, 100%, 96.9%; + + --text-neutral-dimmed: 219, 12.1%, 77.3%; + --text-neutral-disabled: 219, 12.1%, 77.3%; + --text-neutral-light: 0, 0%, 100%; + --text-neutral-muted: 218, 10.7%, 65.3%; + --text-neutral-primary: 214, 12.3%, 11.2%; + --text-neutral-strong: 213, 10.1%, 38.8%; + + --text-sucess-muted: 169, 59.8%, 64.9%; + --text-sucess-primary: 170, 100%, 37.5%; + --text-sucess-subtle: 170, 57.1%, 91.8%; // Border color. - --border-color-neutral-dark: HHH SSS% LLL%; - --border-color-neutral-strong: HHH SSS% LLL%; - --border-color-neutral-muted: HHH SSS% LLL%; - --border-color-neutral-dimmed: HHH SSS% LLL%; - --border-color-neutral-subtle: HHH SSS% LLL%; - --border-color-accent-default: HHH SSS% LLL%; - --border-color-accent-subtle: HHH SSS% LLL%; - --border-color-destructive-default: HHH SSS% LLL%; - --border-color-success-default: HHH SSS% LLL%; + --border-accent-default: 15, 95.6%, 55.9%; + --border-accent-dimmed: 15, 94.2%, 86.5%; + --border-accent-subtle: 5, 100%, 97.5%; + + --border-destructive-default: 0, 71%, 48.6%; + + --border-neutral-black: 214, 12.3%, 11.2%; + --border-neutral-dark: 215, 9.6%, 51%; + --border-neutral-dimmed: 220, 11.1%, 94.7%; + --border-neutral-muted: 219, 12.1%, 77.3%; + --border-neutral-strong: 218, 10.7%, 65.3%; + --border-neutral-subtle: 210, 14.3%, 97.3%; + + --border-sucess-default: 170, 100%, 37.5%; // Border radius. - --radius-xs: 2px; - --radius-sm: 4px; - --radius-md: 8px; --radius-lg: 16px; + --radius-md: 8px; + --radius-sm: 4px; --radius-xl: 24px; + --radius-xs: 2px; --radius-xxl: 36px; + // Border width. + --border-width-md: 2px; + --border-width-sm: 1px; + // Padding. - --padding-xs: 4px; - --padding-sm: 8px; - --padding-md: 16px; --padding-lg: 24px; + --padding-md: 16px; + --padding-sm: 8px; --padding-xl: 32px; + --padding-xs: 4px; --padding-xxl: 48px; + // Margin. + --margin-lg: 24px; + --margin-md: 16px; + --margin-sm: 8px; + --margin-xl: 32px; + --margin-xs: 4px; + --margin-xxl: 32px; + + // Elevation. + --elevation-flat: 0px; + --elevation-lg: 16px; + --elevation-md: 8px; + --elevation-sm: 4px; + --elevation-xl: 24px; + --elevation-xxl: 48px; + + // Fill. + --fill-accent-default: 15, 95.6%, 55.9%; + + --fill-destructive: 0, 71%, 48.6%; + + --fill-neutral-base: 0, 0%, 100%; + --fill-neutral-dark: 215, 11.1%, 21.2%; + --fill-neutral-disabled: 219, 12.1%, 77.3%; + --fill-neutral-strong: 218, 10.7%, 65.3%; + --fill-neutral-xstrong: 213, 10.1%, 38.8%; + + --fill-success: 170, 100%, 37.5%; + + --fill-warning: 45, 95.7%, 63.7%; + + // Spacing. + --spacing-3xl: 64px; + --spacing-lg: 24px; + --spacing-md: 16px; + --spacing-none: 0px; + --spacing-sm: 8px; + --spacing-xl: 32px; + --spacing-xs: 4px; + --spacing-xxl: 48px; + --spacing-xxs: 2px; + // Old vars (we'll delete these once we're done). --background: 0 0% 100%; diff --git a/yarn.lock b/yarn.lock index 4e293608ceb..80465d9c7ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17796,13 +17796,13 @@ __metadata: "@webiny/project-utils": 0.0.0 "@webiny/react-composition": 0.0.0 "@webiny/utils": 0.0.0 + chalk: ^4.1.0 class-variance-authority: ^0.7.0 clsx: ^2.1.1 - color-convert: ^2.0.1 - colors-convert: ^1.4.1 css-loader: ^6.10.0 file-loader: 6.2.0 postcss-loader: ^6.2.1 + prettier: ^2.8.3 react: 18.2.0 rimraf: ^5.0.5 sass: 1.44.0 @@ -26231,15 +26231,6 @@ __metadata: languageName: node linkType: hard -"colors-convert@npm:^1.4.1": - version: 1.4.1 - resolution: "colors-convert@npm:1.4.1" - dependencies: - lodash: ^4.17.15 - checksum: 56b7d2811296459f8dbb8ed52ef9f0967ea7890325b5dbca0f7203f0651c050b13ba9604084ebd5859e73286bdbdaee289f238fe37b2c56516fb6f77780deb99 - languageName: node - linkType: hard - "columnify@npm:1.6.0": version: 1.6.0 resolution: "columnify@npm:1.6.0" From 82b5481c4c6376abec9391f8f441fb6416810174 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 24 Oct 2024 06:50:07 +0200 Subject: [PATCH 24/62] wip --- .../importFromFigma/exports/Alias tokens.json | 498 ++++-------------- .../importFromFigma/figmaRgbaToHsla.js | 2 +- 2 files changed, 118 insertions(+), 382 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json index 7611c98dd77..529dabef8ab 100644 --- a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json +++ b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json @@ -146,9 +146,7 @@ "aliasName": "colors/colors-neutral-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -175,9 +173,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -204,9 +200,7 @@ "aliasName": "colors/colors-neutral-50" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -233,9 +227,7 @@ "aliasName": "colors/white-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -262,9 +254,7 @@ "aliasName": "colors/colors-neutral-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -291,9 +281,7 @@ "aliasName": "colors/colors-neutral-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -320,9 +308,7 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -349,9 +335,7 @@ "aliasName": "colors/colors-primary-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -378,9 +362,7 @@ "aliasName": "colors/colors-primary-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -407,9 +389,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -436,9 +416,7 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -465,9 +443,7 @@ "aliasName": "colors/colors-success-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -489,9 +465,7 @@ "aliasName": "radius/dimensions-border-radius-2" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -513,9 +487,7 @@ "aliasName": "radius/dimensions-border-radius-4" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -542,9 +514,7 @@ "aliasName": "colors/colors-neutral-900" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -571,9 +541,7 @@ "aliasName": "colors/colors-neutral-700" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -600,9 +568,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -629,9 +595,7 @@ "aliasName": "colors/white-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -658,9 +622,7 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -687,9 +649,7 @@ "aliasName": "colors/colors-primary-300" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -716,9 +676,7 @@ "aliasName": "colors/colors-primary-100" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -745,9 +703,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -774,9 +730,7 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -803,9 +757,7 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -832,9 +784,7 @@ "aliasName": "colors/colors-destructive-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -861,9 +811,7 @@ "aliasName": "colors/colors-destructive-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -890,9 +838,7 @@ "aliasName": "colors/colors-warning-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -919,9 +865,7 @@ "aliasName": "colors/colors-warning-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -948,9 +892,7 @@ "aliasName": "colors/colors-warning-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -977,9 +919,7 @@ "aliasName": "colors/colors-neutral-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1001,10 +941,7 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1026,9 +963,7 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1050,9 +985,7 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1074,9 +1007,7 @@ "aliasName": "radius/dimensions-border-radius-8" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1098,9 +1029,7 @@ "aliasName": "radius/dimensions-border-radius-16" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1122,9 +1051,7 @@ "aliasName": "radius/dimensions-border-radius-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1146,9 +1073,7 @@ "aliasName": "radius/dimensions-border-radius-36" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1170,10 +1095,7 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1195,9 +1117,7 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1219,9 +1139,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1239,9 +1157,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1263,9 +1179,7 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1287,9 +1201,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1311,9 +1223,7 @@ "aliasName": "space/dimensions-fixed-48" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1331,9 +1241,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1351,9 +1259,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1371,9 +1277,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1391,9 +1295,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1411,9 +1313,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1435,10 +1335,7 @@ "aliasName": "borderWidth/dimensions-border-width-1" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1460,9 +1357,7 @@ "aliasName": "borderWidth/dimensions-border-width-2" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1489,11 +1384,7 @@ "aliasName": "colors/colors-neutral-800" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1520,11 +1411,7 @@ "aliasName": "colors/colors-neutral-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1551,11 +1438,7 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1582,11 +1465,7 @@ "aliasName": "colors/white-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1608,10 +1487,7 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1633,10 +1509,7 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1663,9 +1536,7 @@ "aliasName": "colors/colors-neutral-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1692,9 +1563,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1721,9 +1590,7 @@ "aliasName": "colors/colors-neutral-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1750,9 +1617,7 @@ "aliasName": "colors/colors-neutral-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1779,9 +1644,7 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1808,9 +1671,7 @@ "aliasName": "colors/colors-primary-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1832,9 +1693,7 @@ "aliasName": "space/dimensions-fixed-48" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1856,10 +1715,7 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1881,10 +1737,7 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1906,10 +1759,7 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1931,9 +1781,7 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1955,9 +1803,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1979,9 +1825,7 @@ "aliasName": "space/dimensions-fixed-48" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2003,10 +1847,7 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2028,10 +1869,7 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2053,10 +1891,7 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2078,9 +1913,7 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2102,9 +1935,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2126,9 +1957,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2155,9 +1984,7 @@ "aliasName": "colors/colors-success-200" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2184,9 +2011,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2213,9 +2038,7 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2242,9 +2065,7 @@ "aliasName": "colors/colors-success-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2271,9 +2092,7 @@ "aliasName": "colors/colors-primary-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2300,9 +2119,7 @@ "aliasName": "colors/colors-success-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2329,9 +2146,7 @@ "aliasName": "colors/colors-secondary-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2358,9 +2173,7 @@ "aliasName": "colors/colors-destructive-600" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2387,9 +2200,7 @@ "aliasName": "colors/colors-warning-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2416,9 +2227,7 @@ "aliasName": "colors/colors-primary-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2445,9 +2254,7 @@ "aliasName": "colors/colors-success-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2474,9 +2281,7 @@ "aliasName": "colors/colors-secondary-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2503,9 +2308,7 @@ "aliasName": "colors/colors-destructive-800" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2532,9 +2335,7 @@ "aliasName": "colors/colors-warning-800" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2561,11 +2362,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2592,11 +2389,7 @@ "aliasName": "colors/colors-neutral-700" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2623,9 +2416,7 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2652,9 +2443,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2681,9 +2470,7 @@ "aliasName": "colors/colors-neutral-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2710,9 +2497,7 @@ "aliasName": "colors/colors-neutral-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2739,9 +2524,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2768,9 +2551,7 @@ "aliasName": "colors/colors-neutral-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2797,9 +2578,7 @@ "aliasName": "colors/colors-neutral-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2826,9 +2605,7 @@ "aliasName": "colors/colors-primary-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2855,9 +2632,7 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2884,9 +2659,7 @@ "aliasName": "colors/colors-success-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2913,9 +2686,7 @@ "aliasName": "colors/colors-destructive-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2942,9 +2713,7 @@ "aliasName": "colors/colors-warning-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2971,9 +2740,7 @@ "aliasName": "colors/colors-primary-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2995,10 +2762,7 @@ "aliasName": "space/dimensions-fixed-2" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3020,9 +2784,7 @@ "aliasName": "space/dimensions-fixed-64" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3044,10 +2806,7 @@ "aliasName": "space/dimensions-fixed-2" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3069,10 +2828,7 @@ "aliasName": "space/dimensions-fixed-0" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3099,9 +2855,7 @@ "aliasName": "colors/colors-neutral-600" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3128,11 +2882,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3159,11 +2909,7 @@ "aliasName": "colors/colors-warning-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3190,11 +2936,7 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3221,9 +2963,7 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3250,9 +2990,7 @@ "aliasName": "colors/colors-destructive-300" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3279,11 +3017,9 @@ "aliasName": "colors/colors-destructive-100" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} } ] -} \ No newline at end of file +} diff --git a/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js index 255ef10d330..4982d0c0e94 100644 --- a/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js +++ b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js @@ -45,7 +45,7 @@ function figmaRgbaToHsla(figmaColor) { const { h, s, l } = rgbToHsl(red, green, blue); // Return the HSLA value - return { h, s, l, a } ; + return { h, s, l, a }; } module.exports = { figmaRgbaToHsla }; From c9352e8970c7ed2c81adad2b85f281b479bd8dd7 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 24 Oct 2024 06:50:42 +0200 Subject: [PATCH 25/62] wip --- packages/admin-ui/src/styles2.scss | 237 ----------------------------- 1 file changed, 237 deletions(-) delete mode 100644 packages/admin-ui/src/styles2.scss diff --git a/packages/admin-ui/src/styles2.scss b/packages/admin-ui/src/styles2.scss deleted file mode 100644 index f47e2856b22..00000000000 --- a/packages/admin-ui/src/styles2.scss +++ /dev/null @@ -1,237 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - :root { - // New variables from design. - - // Background colors. - --bg-destructive-default: 0, 71%, 48.6%; - --bg-destructive-disabled: 1, 83.2%, 76.7%; - --bg-destructive-muted: 0, 66.3%, 62.7%; - --bg-destructive-strong: 0, 76.4%, 38.2%; - --bg-destructive-subtle: 0, 100%, 96.9%; - --bg-destructive-xstrong: 0, 83.6%, 21.6%; - - --bg-neutral-base: 0, 0%, 100%; - --bg-neutral-dark: 214, 12.3%, 11.2%; - --bg-neutral-dimmed: 220, 11.1%, 94.7%; - --bg-neutral-disabled: 220, 11.1%, 94.7%; - --bg-neutral-light: 210, 14.3%, 97.3%; - --bg-neutral-muted: 225, 16.7%, 90.6%; - --bg-neutral-strong: 219, 12.1%, 77.3%; - --bg-neutral-subtle: 180, 11.1%, 98.2%; - --bg-neutral-xstrong: 213, 10.1%, 38.8%; - - --bg-primary-default: 15, 95.6%, 55.9%; - --bg-primary-disabled: 14, 94.7%, 77.8%; - --bg-primary-muted: 14, 94.7%, 77.8%; - --bg-primary-strong: 14, 94.1%, 40%; - --bg-primary-subtle: 5, 100%, 97.5%; - --bg-primary-xstrong: 14, 100%, 25.5%; - - --bg-secondary-default: 170, 100%, 37.5%; - --bg-secondary-disabled: 169, 59.8%, 64.9%; - --bg-secondary-muted: 169, 59.8%, 64.9%; - --bg-secondary-strong: 165, 100%, 28.6%; - --bg-secondary-subtle: 170, 57.1%, 91.8%; - --bg-secondary-xstrong: 160, 100%, 14.5%; - - --bg-success-default: 170, 100%, 37.5%; - --bg-success-disabled: 168, 58.1%, 79.4%; - --bg-success-muted: 169, 59.8%, 64.9%; - --bg-success-strong: 165, 100%, 28.6%; - --bg-success-subtle: 170, 57.1%, 91.8%; - --bg-success-xstrong: 160, 100%, 14.5%; - - --bg-warning-default: 45, 95.7%, 63.7%; - --bg-warning-disabled: 45, 96.9%, 87.5%; - --bg-warning-muted: 45, 95.1%, 75.9%; - --bg-warning-strong: 45, 100%, 37.3%; - --bg-warning-subtle: 43, 100%, 96.5%; - --bg-warning-xstrong: 45, 98.2%, 21.6%; - - // Text colors. - --text-accent-muted: 14, 94.7%, 77.8%; - --text-accent-primary: 15, 95.6%, 55.9%; - --text-accent-subtle: 5, 100%, 97.5%; - - --text-destructive-muted: 1, 83.2%, 76.7%; - --text-destructive-primary: 0, 71%, 48.6%; - --text-destructive-subtle: 0, 100%, 96.9%; - - --text-neutral-dimmed: 219, 12.1%, 77.3%; - --text-neutral-disabled: 219, 12.1%, 77.3%; - --text-neutral-light: 0, 0%, 100%; - --text-neutral-muted: 218, 10.7%, 65.3%; - --text-neutral-primary: 214, 12.3%, 11.2%; - --text-neutral-strong: 213, 10.1%, 38.8%; - - --text-sucess-muted: 169, 59.8%, 64.9%; - --text-sucess-primary: 170, 100%, 37.5%; - --text-sucess-subtle: 170, 57.1%, 91.8%; - - // Border color. - --border-accent-default: 15, 95.6%, 55.9%; - --border-accent-dimmed: 15, 94.2%, 86.5%; - --border-accent-subtle: 5, 100%, 97.5%; - - --border-destructive-default: 0, 71%, 48.6%; - - --border-neutral-black: 214, 12.3%, 11.2%; - --border-neutral-dark: 215, 9.6%, 51%; - --border-neutral-dimmed: 220, 11.1%, 94.7%; - --border-neutral-muted: 219, 12.1%, 77.3%; - --border-neutral-strong: 218, 10.7%, 65.3%; - --border-neutral-subtle: 210, 14.3%, 97.3%; - - --border-sucess-default: 170, 100%, 37.5%; - - // Border radius. - --radius-lg: 16px; - --radius-md: 8px; - --radius-sm: 4px; - --radius-xl: 24px; - --radius-xs: 2px; - --radius-xxl: 36px; - - // Border width. - --border-width-md: 2px; - --border-width-sm: 1px; - - // Padding. - --padding-lg: 24px; - --padding-md: 16px; - --padding-sm: 8px; - --padding-xl: 32px; - --padding-xs: 4px; - --padding-xxl: 48px; - - // Margin. - --margin-lg: 24px; - --margin-md: 16px; - --margin-sm: 8px; - --margin-xl: 32px; - --margin-xs: 4px; - --margin-xxl: 32px; - - // Elevation. - --elevation-flat: 0px; - --elevation-lg: 16px; - --elevation-md: 8px; - --elevation-sm: 4px; - --elevation-xl: 24px; - --elevation-xxl: 48px; - - // Fill. - --fill-accent-default: 15, 95.6%, 55.9%; - - --fill-destructive: 0, 71%, 48.6%; - - --fill-neutral-base: 0, 0%, 100%; - --fill-neutral-dark: 215, 11.1%, 21.2%; - --fill-neutral-disabled: 219, 12.1%, 77.3%; - --fill-neutral-strong: 218, 10.7%, 65.3%; - --fill-neutral-xstrong: 213, 10.1%, 38.8%; - - --fill-success: 170, 100%, 37.5%; - - --fill-warning: 45, 95.7%, 63.7%; - - // Spacing. - --spacing-3xl: 64px; - --spacing-lg: 24px; - --spacing-md: 16px; - --spacing-none: 0px; - --spacing-sm: 8px; - --spacing-xl: 32px; - --spacing-xs: 4px; - --spacing-xxl: 48px; - --spacing-xxs: 2px; - - // Old vars (we'll delete these once we're done). - - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --primary: 15 96% 56%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --neutral: 210 40% 96.1%; - --neutral-strong: 210 40% 96.1%; - --neutral-muted: 210 40% 96.1%; - --neutral-dimmed: 210 40% 96.1%; - --neutral-disabled: 210 40% 96.1%; - --neutral-light: 0 0% 100%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 215 20.2% 65.1%; - - --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif; - } - - .dark { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; - - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --radius: 8px; - } -} - -//@layer base { -// * { -// @apply border-border; -// } -// -// body { -// @apply bg-background text-foreground; -// font-feature-settings: "rlig" 1, "calt" 1; -// } -//} From 2b284e59a4a04cc2ec8feab5fad9a3adfce1bd8d Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 24 Oct 2024 06:52:32 +0200 Subject: [PATCH 26/62] wip --- packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js index 4982d0c0e94..d6ab4b73331 100644 --- a/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js +++ b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js @@ -24,7 +24,9 @@ function rgbToHsl(r, g, b) { } h = Math.round(h * 60); // Convert to degrees - if (h < 0) h += 360; + if (h < 0) { + h += 360; + } } s = +(s * 100).toFixed(1); From 5b802aeb0bfc40682df9010d38c30230ecacc4f1 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 24 Oct 2024 10:35:20 +0200 Subject: [PATCH 27/62] wip --- .../createTailwindConfigCustomizations.js | 32 +++++++++++++++++++ .../importFromFigma/templates/styles.scss.txt | 20 ++++++------ packages/admin-ui/src/styles.scss | 20 ++++++------ .../tailwind.config.customizations.js | 27 ++++++++++++++++ packages/admin-ui/tailwind.config.js | 14 +++----- 5 files changed, 84 insertions(+), 29 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js index 7362c424b95..12575eaf2bd 100644 --- a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js @@ -50,8 +50,40 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { acc[variantName] = `var(--border-width-${variantName})`; } return acc; + }, {}), + padding: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "padding") { + acc[variantName] = `var(--padding-${variantName})`; + } + return acc; + }, {}), + margin: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "margin") { + acc[variantName] = `var(--margin-${variantName})`; + } + return acc; + }, {}), + spacing: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "spacing") { + acc[variantName] = `var(--spacing-${variantName})`; + } + return acc; }, {}) }; }; module.exports = { createTailwindConfigCustomizations }; + +// const VARIABLE_TYPES = [ +// "backgroundColor", ---- +// "borderColor", ---- +// "textColor", ---- +// "padding", ---- +// "elevation", ❓<=============================== +// "fill", ❓<=============================== +// "spacing", ---- +// "margin", ---- +// "borderRadius", ---- +// "dimension", ❓<=============================== +// "borderWidth" ---- +// ]; diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt index 41f2313717c..43bacfc210d 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -111,13 +111,13 @@ } } -//@layer base { -// * { -// @apply border-border; -// } -// -// body { -// @apply bg-background text-foreground; -// font-feature-settings: "rlig" 1, "calt" 1; -// } -//} +@layer base { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + font-feature-settings: "rlig" 1, "calt" 1; + } +} diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index f47e2856b22..cec8ece7ce2 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -225,13 +225,13 @@ } } -//@layer base { -// * { -// @apply border-border; -// } -// -// body { -// @apply bg-background text-foreground; -// font-feature-settings: "rlig" 1, "calt" 1; -// } -//} +@layer base { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + font-feature-settings: "rlig" 1, "calt" 1; + } +} diff --git a/packages/admin-ui/tailwind.config.customizations.js b/packages/admin-ui/tailwind.config.customizations.js index ebf2fe41362..696ebf4fb12 100644 --- a/packages/admin-ui/tailwind.config.customizations.js +++ b/packages/admin-ui/tailwind.config.customizations.js @@ -123,5 +123,32 @@ module.exports = { borderWidth: { md: "var(--border-width-md)", sm: "var(--border-width-sm)" + }, + padding: { + lg: "var(--padding-lg)", + md: "var(--padding-md)", + sm: "var(--padding-sm)", + xl: "var(--padding-xl)", + xs: "var(--padding-xs)", + xxl: "var(--padding-xxl)" + }, + margin: { + lg: "var(--margin-lg)", + md: "var(--margin-md)", + sm: "var(--margin-sm)", + xl: "var(--margin-xl)", + xs: "var(--margin-xs)", + xxl: "var(--margin-xxl)" + }, + spacing: { + "3xl": "var(--spacing-3xl)", + lg: "var(--spacing-lg)", + md: "var(--spacing-md)", + none: "var(--spacing-none)", + sm: "var(--spacing-sm)", + xl: "var(--spacing-xl)", + xs: "var(--spacing-xs)", + xxl: "var(--spacing-xxl)", + xxs: "var(--spacing-xxs)" } }; diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 23500dd9c2a..166cc6cdfbb 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -11,7 +11,9 @@ const { borderColor, textColor, borderRadius, - borderWidth + borderWidth, + padding, + margin } = require("./tailwind.config.customizations"); /** @type {import('tailwindcss').Config} */ @@ -32,15 +34,9 @@ module.exports = { borderColor, borderRadius, borderWidth, + padding, + margin, extend: { - padding: { - xs: "var(--padding-xs)", - sm: "var(--padding-sm)", - md: "var(--padding-md)", - lg: "var(--padding-lg)", - xl: "var(--padding-xl)", - xxl: "var(--padding-xxl)" - }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans] }, From 2fe7a336ced28b92fc9ae3055131dde254b85c77 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 24 Oct 2024 10:53:43 +0200 Subject: [PATCH 28/62] wip --- .../importFromFigma/createStylesScss.js | 93 ++++++------------- .../createTailwindConfigCustomizations.js | 54 ++++------- .../importFromFigma/templates/styles.scss.txt | 20 ++-- packages/admin-ui/src/styles.scss | 77 ++++++--------- .../tailwind.config.customizations.js | 74 +++++++-------- packages/admin-ui/tailwind.config.js | 10 +- 6 files changed, 126 insertions(+), 202 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js index 86f34e7a66f..5a9aaa15ae0 100644 --- a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js +++ b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js @@ -4,7 +4,7 @@ const createStylesScss = normalizedFigmaExport => { // Generate `styles.scss` file. let stylesScss = fs.readFileSync(__dirname + "/templates/styles.scss.txt", "utf8"); - // 1. Background colors. + // 1. Background color. { let currentBgColorGroup = null; const bgColors = normalizedFigmaExport @@ -26,35 +26,10 @@ const createStylesScss = normalizedFigmaExport => { }) .flat(); - stylesScss = stylesScss.replace("{BACKGROUND_COLORS}", bgColors.join("\n")); + stylesScss = stylesScss.replace("{BACKGROUND_COLOR}", bgColors.join("\n")); } - // 2. Text colors. - { - let currentTextColor = null; - const textColors = normalizedFigmaExport - .filter(item => item.type === "textColor") - .map(variable => { - const [colorGroup] = variable.variantName.split("-"); - const cssVar = `--text-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; - - if (!currentTextColor) { - currentTextColor = colorGroup; - return cssVar; - } - - if (!currentTextColor || currentTextColor !== colorGroup) { - currentTextColor = colorGroup; - return ["", cssVar]; - } - return cssVar; - }) - .flat(); - - stylesScss = stylesScss.replace("{TEXT_COLORS}", textColors.join("\n")); - } - - // 3. Border colors. + // 2. Border color. { let currentBorderColor = null; const borderColors = normalizedFigmaExport @@ -76,10 +51,10 @@ const createStylesScss = normalizedFigmaExport => { }) .flat(); - stylesScss = stylesScss.replace("{BORDER_COLORS}", borderColors.join("\n")); + stylesScss = stylesScss.replace("{BORDER_COLOR}", borderColors.join("\n")); } - // 4. Border radius. + // 3. Border radius. { const borderRadius = normalizedFigmaExport .filter(item => item.type === "borderRadius") @@ -90,7 +65,7 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{BORDER_RADIUS}", borderRadius.join("\n")); } - // 5. Border width. + // 4. Border width. { const borderWidth = normalizedFigmaExport .filter(item => item.type === "borderWidth") @@ -101,6 +76,15 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{BORDER_WIDTH}", borderWidth.join("\n")); } + // 5. Margin. + { + const margin = normalizedFigmaExport + .filter(item => item.type === "margin") + .map(variable => `--margin-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{MARGIN}", margin.join("\n")); + } + // 6. Padding. { const padding = normalizedFigmaExport @@ -110,58 +94,39 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{PADDING}", padding.join("\n")); } - // 7. Elevation. + // 7. Spacing. { - const elevation = normalizedFigmaExport - .filter(item => item.type === "elevation") - .map(variable => `--elevation-${variable.variantName}: ${variable.resolvedValue}px;`); + const spacing = normalizedFigmaExport + .filter(item => item.type === "spacing") + .map(variable => `--spacing-${variable.variantName}: ${variable.resolvedValue}px;`); - stylesScss = stylesScss.replace("{ELEVATION}", elevation.join("\n")); + stylesScss = stylesScss.replace("{SPACING}", spacing.join("\n")); } - // 8. Fill. + // 8. Text color. { - let currentFillColor = null; + let currentTextColor = null; const textColors = normalizedFigmaExport - .filter(item => item.type === "fill") + .filter(item => item.type === "textColor") .map(variable => { const [colorGroup] = variable.variantName.split("-"); - const cssVar = `--fill-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + const cssVar = `--text-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; - if (!currentFillColor) { - currentFillColor = colorGroup; + if (!currentTextColor) { + currentTextColor = colorGroup; return cssVar; } - if (!currentFillColor || currentFillColor !== colorGroup) { - currentFillColor = colorGroup; + if (!currentTextColor || currentTextColor !== colorGroup) { + currentTextColor = colorGroup; return ["", cssVar]; } return cssVar; }) .flat(); - stylesScss = stylesScss.replace("{FILL}", textColors.join("\n")); + stylesScss = stylesScss.replace("{TEXT_COLOR}", textColors.join("\n")); } - - // 9. Spacing. - { - const spacing = normalizedFigmaExport - .filter(item => item.type === "spacing") - .map(variable => `--spacing-${variable.variantName}: ${variable.resolvedValue}px;`); - - stylesScss = stylesScss.replace("{SPACING}", spacing.join("\n")); - } - - // 10. Margin. - { - const margin = normalizedFigmaExport - .filter(item => item.type === "margin") - .map(variable => `--margin-${variable.variantName}: ${variable.resolvedValue}px;`); - - stylesScss = stylesScss.replace("{MARGIN}", margin.join("\n")); - } - return stylesScss; }; diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js index 12575eaf2bd..f20aa79e7e9 100644 --- a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js @@ -26,19 +26,6 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { } return acc; }, {}), - textColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => { - if (type === "textColor") { - const [color, variant] = variantName.split("-"); - if (!acc[color]) { - acc[color] = { - DEFAULT: `var(--text-${color}-default)` - }; - } - - acc[color][variant] = `var(--text-${variantName})`; - } - return acc; - }, {}), borderRadius: normalizedFigmaExport.reduce((acc, { type, variantName }) => { if (type === "borderRadius") { acc[variantName] = `var(--radius-${variantName})`; @@ -51,39 +38,38 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { } return acc; }, {}), - padding: normalizedFigmaExport.reduce((acc, { type, variantName }) => { - if (type === "padding") { - acc[variantName] = `var(--padding-${variantName})`; - } - return acc; - }, {}), margin: normalizedFigmaExport.reduce((acc, { type, variantName }) => { if (type === "margin") { acc[variantName] = `var(--margin-${variantName})`; } return acc; }, {}), + padding: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "padding") { + acc[variantName] = `var(--padding-${variantName})`; + } + return acc; + }, {}), spacing: normalizedFigmaExport.reduce((acc, { type, variantName }) => { if (type === "spacing") { acc[variantName] = `var(--spacing-${variantName})`; } return acc; - }, {}) + }, {}), + textColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "textColor") { + const [color, variant] = variantName.split("-"); + if (!acc[color]) { + acc[color] = { + DEFAULT: `var(--text-${color}-default)` + }; + } + + acc[color][variant] = `var(--text-${variantName})`; + } + return acc; + }, {}), }; }; module.exports = { createTailwindConfigCustomizations }; - -// const VARIABLE_TYPES = [ -// "backgroundColor", ---- -// "borderColor", ---- -// "textColor", ---- -// "padding", ---- -// "elevation", ❓<=============================== -// "fill", ❓<=============================== -// "spacing", ---- -// "margin", ---- -// "borderRadius", ---- -// "dimension", ❓<=============================== -// "borderWidth" ---- -// ]; diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt index 43bacfc210d..645ce4d25f4 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -7,13 +7,10 @@ // New variables from design. // Background colors. - {BACKGROUND_COLORS} - - // Text colors. - {TEXT_COLORS} + {BACKGROUND_COLOR} // Border color. - {BORDER_COLORS} + {BORDER_COLOR} // Border radius. {BORDER_RADIUS} @@ -21,21 +18,18 @@ // Border width. {BORDER_WIDTH} - // Padding. - {PADDING} - // Margin. {MARGIN} - // Elevation. - {ELEVATION} - - // Fill. - {FILL} + // Padding. + {PADDING} // Spacing. {SPACING} + // Text color. + {TEXT_COLOR} + // Old vars (we'll delete these once we're done). --background: 0 0% 100%; diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index cec8ece7ce2..c604cf7df49 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -52,26 +52,6 @@ --bg-warning-subtle: 43, 100%, 96.5%; --bg-warning-xstrong: 45, 98.2%, 21.6%; - // Text colors. - --text-accent-muted: 14, 94.7%, 77.8%; - --text-accent-primary: 15, 95.6%, 55.9%; - --text-accent-subtle: 5, 100%, 97.5%; - - --text-destructive-muted: 1, 83.2%, 76.7%; - --text-destructive-primary: 0, 71%, 48.6%; - --text-destructive-subtle: 0, 100%, 96.9%; - - --text-neutral-dimmed: 219, 12.1%, 77.3%; - --text-neutral-disabled: 219, 12.1%, 77.3%; - --text-neutral-light: 0, 0%, 100%; - --text-neutral-muted: 218, 10.7%, 65.3%; - --text-neutral-primary: 214, 12.3%, 11.2%; - --text-neutral-strong: 213, 10.1%, 38.8%; - - --text-sucess-muted: 169, 59.8%, 64.9%; - --text-sucess-primary: 170, 100%, 37.5%; - --text-sucess-subtle: 170, 57.1%, 91.8%; - // Border color. --border-accent-default: 15, 95.6%, 55.9%; --border-accent-dimmed: 15, 94.2%, 86.5%; @@ -100,14 +80,6 @@ --border-width-md: 2px; --border-width-sm: 1px; - // Padding. - --padding-lg: 24px; - --padding-md: 16px; - --padding-sm: 8px; - --padding-xl: 32px; - --padding-xs: 4px; - --padding-xxl: 48px; - // Margin. --margin-lg: 24px; --margin-md: 16px; @@ -116,28 +88,13 @@ --margin-xs: 4px; --margin-xxl: 32px; - // Elevation. - --elevation-flat: 0px; - --elevation-lg: 16px; - --elevation-md: 8px; - --elevation-sm: 4px; - --elevation-xl: 24px; - --elevation-xxl: 48px; - - // Fill. - --fill-accent-default: 15, 95.6%, 55.9%; - - --fill-destructive: 0, 71%, 48.6%; - - --fill-neutral-base: 0, 0%, 100%; - --fill-neutral-dark: 215, 11.1%, 21.2%; - --fill-neutral-disabled: 219, 12.1%, 77.3%; - --fill-neutral-strong: 218, 10.7%, 65.3%; - --fill-neutral-xstrong: 213, 10.1%, 38.8%; - - --fill-success: 170, 100%, 37.5%; - - --fill-warning: 45, 95.7%, 63.7%; + // Padding. + --padding-lg: 24px; + --padding-md: 16px; + --padding-sm: 8px; + --padding-xl: 32px; + --padding-xs: 4px; + --padding-xxl: 48px; // Spacing. --spacing-3xl: 64px; @@ -150,6 +107,26 @@ --spacing-xxl: 48px; --spacing-xxs: 2px; + // Text color. + --text-accent-muted: 14, 94.7%, 77.8%; + --text-accent-primary: 15, 95.6%, 55.9%; + --text-accent-subtle: 5, 100%, 97.5%; + + --text-destructive-muted: 1, 83.2%, 76.7%; + --text-destructive-primary: 0, 71%, 48.6%; + --text-destructive-subtle: 0, 100%, 96.9%; + + --text-neutral-dimmed: 219, 12.1%, 77.3%; + --text-neutral-disabled: 219, 12.1%, 77.3%; + --text-neutral-light: 0, 0%, 100%; + --text-neutral-muted: 218, 10.7%, 65.3%; + --text-neutral-primary: 214, 12.3%, 11.2%; + --text-neutral-strong: 213, 10.1%, 38.8%; + + --text-sucess-muted: 169, 59.8%, 64.9%; + --text-sucess-primary: 170, 100%, 37.5%; + --text-sucess-subtle: 170, 57.1%, 91.8%; + // Old vars (we'll delete these once we're done). --background: 0 0% 100%; diff --git a/packages/admin-ui/tailwind.config.customizations.js b/packages/admin-ui/tailwind.config.customizations.js index 696ebf4fb12..db2c9ddb318 100644 --- a/packages/admin-ui/tailwind.config.customizations.js +++ b/packages/admin-ui/tailwind.config.customizations.js @@ -83,35 +83,6 @@ module.exports = { default: "var(--border-sucess-default)" } }, - textColor: { - accent: { - DEFAULT: "var(--text-accent-default)", - muted: "var(--text-accent-muted)", - primary: "var(--text-accent-primary)", - subtle: "var(--text-accent-subtle)" - }, - destructive: { - DEFAULT: "var(--text-destructive-default)", - muted: "var(--text-destructive-muted)", - primary: "var(--text-destructive-primary)", - subtle: "var(--text-destructive-subtle)" - }, - neutral: { - DEFAULT: "var(--text-neutral-default)", - dimmed: "var(--text-neutral-dimmed)", - disabled: "var(--text-neutral-disabled)", - light: "var(--text-neutral-light)", - muted: "var(--text-neutral-muted)", - primary: "var(--text-neutral-primary)", - strong: "var(--text-neutral-strong)" - }, - sucess: { - DEFAULT: "var(--text-sucess-default)", - muted: "var(--text-sucess-muted)", - primary: "var(--text-sucess-primary)", - subtle: "var(--text-sucess-subtle)" - } - }, borderRadius: { lg: "var(--radius-lg)", md: "var(--radius-md)", @@ -124,14 +95,6 @@ module.exports = { md: "var(--border-width-md)", sm: "var(--border-width-sm)" }, - padding: { - lg: "var(--padding-lg)", - md: "var(--padding-md)", - sm: "var(--padding-sm)", - xl: "var(--padding-xl)", - xs: "var(--padding-xs)", - xxl: "var(--padding-xxl)" - }, margin: { lg: "var(--margin-lg)", md: "var(--margin-md)", @@ -140,6 +103,14 @@ module.exports = { xs: "var(--margin-xs)", xxl: "var(--margin-xxl)" }, + padding: { + lg: "var(--padding-lg)", + md: "var(--padding-md)", + sm: "var(--padding-sm)", + xl: "var(--padding-xl)", + xs: "var(--padding-xs)", + xxl: "var(--padding-xxl)" + }, spacing: { "3xl": "var(--spacing-3xl)", lg: "var(--spacing-lg)", @@ -150,5 +121,34 @@ module.exports = { xs: "var(--spacing-xs)", xxl: "var(--spacing-xxl)", xxs: "var(--spacing-xxs)" + }, + textColor: { + accent: { + DEFAULT: "var(--text-accent-default)", + muted: "var(--text-accent-muted)", + primary: "var(--text-accent-primary)", + subtle: "var(--text-accent-subtle)" + }, + destructive: { + DEFAULT: "var(--text-destructive-default)", + muted: "var(--text-destructive-muted)", + primary: "var(--text-destructive-primary)", + subtle: "var(--text-destructive-subtle)" + }, + neutral: { + DEFAULT: "var(--text-neutral-default)", + dimmed: "var(--text-neutral-dimmed)", + disabled: "var(--text-neutral-disabled)", + light: "var(--text-neutral-light)", + muted: "var(--text-neutral-muted)", + primary: "var(--text-neutral-primary)", + strong: "var(--text-neutral-strong)" + }, + sucess: { + DEFAULT: "var(--text-sucess-default)", + muted: "var(--text-sucess-muted)", + primary: "var(--text-sucess-primary)", + subtle: "var(--text-sucess-subtle)" + } } }; diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 166cc6cdfbb..261c7e4e195 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -9,11 +9,12 @@ const adminAppSourceGlob = `${project.root}/apps/admin`; const { backgroundColor, borderColor, - textColor, borderRadius, borderWidth, + margin, padding, - margin + spacing, + textColor } = require("./tailwind.config.customizations"); /** @type {import('tailwindcss').Config} */ @@ -30,12 +31,13 @@ module.exports = { }, backgroundColor, - colors: textColor, borderColor, borderRadius, borderWidth, - padding, margin, + padding, + spacing, + textColor, extend: { fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans] From c89186f83816c36e476b79a6c1a5eb5480c8e330 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 24 Oct 2024 14:32:53 +0200 Subject: [PATCH 29/62] wip --- .../createTailwindConfigCustomizations.js | 12 +- .../importFromFigma/templates/styles.scss.txt | 11 -- packages/admin-ui/src/styles.scss | 11 -- .../tailwind.config.customizations.js | 158 +++++++++--------- packages/admin-ui/tailwind.config.js | 18 +- packages/admin-ui/webiny.config.js | 14 +- 6 files changed, 104 insertions(+), 120 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js index f20aa79e7e9..15048ed1ce6 100644 --- a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js @@ -5,11 +5,11 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { const [color, variant] = variantName.split("-"); if (!acc[color]) { acc[color] = { - DEFAULT: `var(--bg-${color}-default)` + DEFAULT: `hsl(var(--bg-${color}-default))` }; } - acc[color][variant] = `var(--bg-${variantName})`; + acc[color][variant] = `hsl(var(--bg-${variantName}))`; } return acc; }, {}), @@ -18,11 +18,11 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { const [color, variant] = variantName.split("-"); if (!acc[color]) { acc[color] = { - DEFAULT: `var(--border-${color}-default)` + DEFAULT: `hsl(var(--border-${color}-default))` }; } - acc[color][variant] = `var(--border-${variantName})`; + acc[color][variant] = `hsl(var(--border-${variantName}))`; } return acc; }, {}), @@ -61,11 +61,11 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { const [color, variant] = variantName.split("-"); if (!acc[color]) { acc[color] = { - DEFAULT: `var(--text-${color}-default)` + DEFAULT: `hsl(var(--text-${color}-default))` }; } - acc[color][variant] = `var(--text-${variantName})`; + acc[color][variant] = `hsl(var(--text-${variantName}))`; } return acc; }, {}), diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt index 645ce4d25f4..82d0a4cd0d1 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -104,14 +104,3 @@ --radius: 8px; } } - -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground; - font-feature-settings: "rlig" 1, "calt" 1; - } -} diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index c604cf7df49..8138f419532 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -201,14 +201,3 @@ --radius: 8px; } } - -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground; - font-feature-settings: "rlig" 1, "calt" 1; - } -} diff --git a/packages/admin-ui/tailwind.config.customizations.js b/packages/admin-ui/tailwind.config.customizations.js index db2c9ddb318..795b4b64bb6 100644 --- a/packages/admin-ui/tailwind.config.customizations.js +++ b/packages/admin-ui/tailwind.config.customizations.js @@ -1,86 +1,86 @@ module.exports = { backgroundColor: { destructive: { - DEFAULT: "var(--bg-destructive-default)", - default: "var(--bg-destructive-default)", - disabled: "var(--bg-destructive-disabled)", - muted: "var(--bg-destructive-muted)", - strong: "var(--bg-destructive-strong)", - subtle: "var(--bg-destructive-subtle)", - xstrong: "var(--bg-destructive-xstrong)" + DEFAULT: "hsl(var(--bg-destructive-default))", + default: "hsl(var(--bg-destructive-default))", + disabled: "hsl(var(--bg-destructive-disabled))", + muted: "hsl(var(--bg-destructive-muted))", + strong: "hsl(var(--bg-destructive-strong))", + subtle: "hsl(var(--bg-destructive-subtle))", + xstrong: "hsl(var(--bg-destructive-xstrong))" }, neutral: { - DEFAULT: "var(--bg-neutral-default)", - base: "var(--bg-neutral-base)", - dark: "var(--bg-neutral-dark)", - dimmed: "var(--bg-neutral-dimmed)", - disabled: "var(--bg-neutral-disabled)", - light: "var(--bg-neutral-light)", - muted: "var(--bg-neutral-muted)", - strong: "var(--bg-neutral-strong)", - subtle: "var(--bg-neutral-subtle)", - xstrong: "var(--bg-neutral-xstrong)" + DEFAULT: "hsl(var(--bg-neutral-default))", + base: "hsl(var(--bg-neutral-base))", + dark: "hsl(var(--bg-neutral-dark))", + dimmed: "hsl(var(--bg-neutral-dimmed))", + disabled: "hsl(var(--bg-neutral-disabled))", + light: "hsl(var(--bg-neutral-light))", + muted: "hsl(var(--bg-neutral-muted))", + strong: "hsl(var(--bg-neutral-strong))", + subtle: "hsl(var(--bg-neutral-subtle))", + xstrong: "hsl(var(--bg-neutral-xstrong))" }, primary: { - DEFAULT: "var(--bg-primary-default)", - default: "var(--bg-primary-default)", - disabled: "var(--bg-primary-disabled)", - muted: "var(--bg-primary-muted)", - strong: "var(--bg-primary-strong)", - subtle: "var(--bg-primary-subtle)", - xstrong: "var(--bg-primary-xstrong)" + DEFAULT: "hsl(var(--bg-primary-default))", + default: "hsl(var(--bg-primary-default))", + disabled: "hsl(var(--bg-primary-disabled))", + muted: "hsl(var(--bg-primary-muted))", + strong: "hsl(var(--bg-primary-strong))", + subtle: "hsl(var(--bg-primary-subtle))", + xstrong: "hsl(var(--bg-primary-xstrong))" }, secondary: { - DEFAULT: "var(--bg-secondary-default)", - default: "var(--bg-secondary-default)", - disabled: "var(--bg-secondary-disabled)", - muted: "var(--bg-secondary-muted)", - strong: "var(--bg-secondary-strong)", - subtle: "var(--bg-secondary-subtle)", - xstrong: "var(--bg-secondary-xstrong)" + DEFAULT: "hsl(var(--bg-secondary-default))", + default: "hsl(var(--bg-secondary-default))", + disabled: "hsl(var(--bg-secondary-disabled))", + muted: "hsl(var(--bg-secondary-muted))", + strong: "hsl(var(--bg-secondary-strong))", + subtle: "hsl(var(--bg-secondary-subtle))", + xstrong: "hsl(var(--bg-secondary-xstrong))" }, success: { - DEFAULT: "var(--bg-success-default)", - default: "var(--bg-success-default)", - disabled: "var(--bg-success-disabled)", - muted: "var(--bg-success-muted)", - strong: "var(--bg-success-strong)", - subtle: "var(--bg-success-subtle)", - xstrong: "var(--bg-success-xstrong)" + DEFAULT: "hsl(var(--bg-success-default))", + default: "hsl(var(--bg-success-default))", + disabled: "hsl(var(--bg-success-disabled))", + muted: "hsl(var(--bg-success-muted))", + strong: "hsl(var(--bg-success-strong))", + subtle: "hsl(var(--bg-success-subtle))", + xstrong: "hsl(var(--bg-success-xstrong))" }, warning: { - DEFAULT: "var(--bg-warning-default)", - default: "var(--bg-warning-default)", - disabled: "var(--bg-warning-disabled)", - muted: "var(--bg-warning-muted)", - strong: "var(--bg-warning-strong)", - subtle: "var(--bg-warning-subtle)", - xstrong: "var(--bg-warning-xstrong)" + DEFAULT: "hsl(var(--bg-warning-default))", + default: "hsl(var(--bg-warning-default))", + disabled: "hsl(var(--bg-warning-disabled))", + muted: "hsl(var(--bg-warning-muted))", + strong: "hsl(var(--bg-warning-strong))", + subtle: "hsl(var(--bg-warning-subtle))", + xstrong: "hsl(var(--bg-warning-xstrong))" } }, borderColor: { accent: { - DEFAULT: "var(--border-accent-default)", - default: "var(--border-accent-default)", - dimmed: "var(--border-accent-dimmed)", - subtle: "var(--border-accent-subtle)" + DEFAULT: "hsl(var(--border-accent-default))", + default: "hsl(var(--border-accent-default))", + dimmed: "hsl(var(--border-accent-dimmed))", + subtle: "hsl(var(--border-accent-subtle))" }, destructive: { - DEFAULT: "var(--border-destructive-default)", - default: "var(--border-destructive-default)" + DEFAULT: "hsl(var(--border-destructive-default))", + default: "hsl(var(--border-destructive-default))" }, neutral: { - DEFAULT: "var(--border-neutral-default)", - black: "var(--border-neutral-black)", - dark: "var(--border-neutral-dark)", - dimmed: "var(--border-neutral-dimmed)", - muted: "var(--border-neutral-muted)", - strong: "var(--border-neutral-strong)", - subtle: "var(--border-neutral-subtle)" + DEFAULT: "hsl(var(--border-neutral-default))", + black: "hsl(var(--border-neutral-black))", + dark: "hsl(var(--border-neutral-dark))", + dimmed: "hsl(var(--border-neutral-dimmed))", + muted: "hsl(var(--border-neutral-muted))", + strong: "hsl(var(--border-neutral-strong))", + subtle: "hsl(var(--border-neutral-subtle))" }, sucess: { - DEFAULT: "var(--border-sucess-default)", - default: "var(--border-sucess-default)" + DEFAULT: "hsl(var(--border-sucess-default))", + default: "hsl(var(--border-sucess-default))" } }, borderRadius: { @@ -124,31 +124,31 @@ module.exports = { }, textColor: { accent: { - DEFAULT: "var(--text-accent-default)", - muted: "var(--text-accent-muted)", - primary: "var(--text-accent-primary)", - subtle: "var(--text-accent-subtle)" + DEFAULT: "hsl(var(--text-accent-default))", + muted: "hsl(var(--text-accent-muted))", + primary: "hsl(var(--text-accent-primary))", + subtle: "hsl(var(--text-accent-subtle))" }, destructive: { - DEFAULT: "var(--text-destructive-default)", - muted: "var(--text-destructive-muted)", - primary: "var(--text-destructive-primary)", - subtle: "var(--text-destructive-subtle)" + DEFAULT: "hsl(var(--text-destructive-default))", + muted: "hsl(var(--text-destructive-muted))", + primary: "hsl(var(--text-destructive-primary))", + subtle: "hsl(var(--text-destructive-subtle))" }, neutral: { - DEFAULT: "var(--text-neutral-default)", - dimmed: "var(--text-neutral-dimmed)", - disabled: "var(--text-neutral-disabled)", - light: "var(--text-neutral-light)", - muted: "var(--text-neutral-muted)", - primary: "var(--text-neutral-primary)", - strong: "var(--text-neutral-strong)" + DEFAULT: "hsl(var(--text-neutral-default))", + dimmed: "hsl(var(--text-neutral-dimmed))", + disabled: "hsl(var(--text-neutral-disabled))", + light: "hsl(var(--text-neutral-light))", + muted: "hsl(var(--text-neutral-muted))", + primary: "hsl(var(--text-neutral-primary))", + strong: "hsl(var(--text-neutral-strong))" }, sucess: { - DEFAULT: "var(--text-sucess-default)", - muted: "var(--text-sucess-muted)", - primary: "var(--text-sucess-primary)", - subtle: "var(--text-sucess-subtle)" + DEFAULT: "hsl(var(--text-sucess-default))", + muted: "hsl(var(--text-sucess-muted))", + primary: "hsl(var(--text-sucess-primary))", + subtle: "hsl(var(--text-sucess-subtle))" } } }; diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 261c7e4e195..0fbe9166efc 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -29,16 +29,16 @@ module.exports = { "2xl": "1400px" } }, - - backgroundColor, - borderColor, - borderRadius, - borderWidth, - margin, - padding, - spacing, - textColor, extend: { + backgroundColor, + borderColor, + borderRadius, + borderWidth, + margin, + padding, + spacing, + textColor, + fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans] }, diff --git a/packages/admin-ui/webiny.config.js b/packages/admin-ui/webiny.config.js index 0306bb741ca..864c5a6524d 100644 --- a/packages/admin-ui/webiny.config.js +++ b/packages/admin-ui/webiny.config.js @@ -6,10 +6,16 @@ module.exports = { commands: { build: async (options, context) => { await createBuildPackage({ cwd: __dirname })(options, context); - - const from = path.join(__dirname, "tailwind.config.js"); - const to = path.join(__dirname, "dist/tailwind.config.js"); - fs.cpSync(from, to); + { + const from = path.join(__dirname, "tailwind.config.js"); + const to = path.join(__dirname, "dist/tailwind.config.js"); + fs.cpSync(from, to); + } + { + const from = path.join(__dirname, "tailwind.config.customizations.js"); + const to = path.join(__dirname, "dist/tailwind.config.customizations.js"); + fs.cpSync(from, to); + } }, watch: createWatchPackage({ cwd: __dirname }) } From b7a346264e22fc65b8a4614fcc6eddaf23759686 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 24 Oct 2024 14:33:03 +0200 Subject: [PATCH 30/62] wip --- apps/admin/src/App.scss | 81 ----------------------------------------- 1 file changed, 81 deletions(-) diff --git a/apps/admin/src/App.scss b/apps/admin/src/App.scss index 49331b8e82a..2510ed232be 100644 --- a/apps/admin/src/App.scss +++ b/apps/admin/src/App.scss @@ -5,84 +5,3 @@ @import "~@webiny/admin-ui/styles.scss"; @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --primary: 14.5 95.6% 55.9%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 215 20.2% 65.1%; - - --radius: 8px; - - --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif; - } - - .dark { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; - - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --radius: 8px; - } -} - -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground; - font-feature-settings: "rlig" 1, "calt" 1; - } -} From 0523b82414282b3631b79e008cf03011b1b4b975 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 10:51:36 +0100 Subject: [PATCH 31/62] wip --- .../createTailwindConfigCustomizations.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js index 15048ed1ce6..90ec3e70b80 100644 --- a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js @@ -38,6 +38,15 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { } return acc; }, {}), + + // Not in Figma, we're manually setting the values here. + fontSize: { + xl: "1.25rem", + lg: "1rem", + md: "0.875rem", + sm: "0.75rem" + }, + margin: normalizedFigmaExport.reduce((acc, { type, variantName }) => { if (type === "margin") { acc[variantName] = `var(--margin-${variantName})`; From 61bce7b425d14990d1d5cd01a645cdfd02cdb5f0 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 10:52:01 +0100 Subject: [PATCH 32/62] wip --- packages/admin-ui/tailwind.config.customizations.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/admin-ui/tailwind.config.customizations.js b/packages/admin-ui/tailwind.config.customizations.js index 795b4b64bb6..d2577f1a9bf 100644 --- a/packages/admin-ui/tailwind.config.customizations.js +++ b/packages/admin-ui/tailwind.config.customizations.js @@ -95,6 +95,12 @@ module.exports = { md: "var(--border-width-md)", sm: "var(--border-width-sm)" }, + fontSize: { + xl: "1.25rem", + lg: "1rem", + md: "0.875rem", + sm: "0.75rem" + }, margin: { lg: "var(--margin-lg)", md: "var(--margin-md)", From 0320857b25c2af388afaaa218ced995c6e82c57f Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 10:56:08 +0100 Subject: [PATCH 33/62] wip --- packages/admin-ui/tailwind.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 0fbe9166efc..96af37bf4d7 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -14,7 +14,8 @@ const { margin, padding, spacing, - textColor + textColor, + fontSize } = require("./tailwind.config.customizations"); /** @type {import('tailwindcss').Config} */ @@ -34,6 +35,7 @@ module.exports = { borderColor, borderRadius, borderWidth, + fontSize, margin, padding, spacing, From 451188a592b657c273758256c49b434826343953 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 12:11:21 +0100 Subject: [PATCH 34/62] wip --- .../importFromFigma/exports/Alias tokens.json | 778 +++++++++++++++--- .../importFromFigma/normalizeFigmaExport.js | 20 +- packages/admin-ui/src/styles.scss | 12 +- .../tailwind.config.customizations.js | 18 +- 4 files changed, 694 insertions(+), 134 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json index 529dabef8ab..4f2104b3293 100644 --- a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json +++ b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json @@ -89,8 +89,12 @@ "VariableID:1148:690", "VariableID:1148:689", "VariableID:528:17123", + "VariableID:1516:33864", "VariableID:528:17124", + "VariableID:1516:33861", + "VariableID:1516:33862", "VariableID:528:17125", + "VariableID:1516:33863", "VariableID:528:17126", "VariableID:528:17127", "VariableID:528:17128", @@ -100,7 +104,10 @@ "VariableID:79:236", "VariableID:79:237", "VariableID:79:238", + "VariableID:1516:33865", + "VariableID:1516:15576", "VariableID:107:716", + "VariableID:1516:33674", "VariableID:528:17129", "VariableID:528:17130", "VariableID:528:17131", @@ -108,7 +115,10 @@ "VariableID:528:17133", "VariableID:528:17134", "VariableID:107:713", + "VariableID:1516:33668", + "VariableID:1516:33671", "VariableID:79:232", + "VariableID:1516:33672", "VariableID:79:233", "VariableID:79:234", "VariableID:203:4497", @@ -146,7 +156,9 @@ "aliasName": "colors/colors-neutral-900" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -173,7 +185,9 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -200,7 +214,9 @@ "aliasName": "colors/colors-neutral-50" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -212,7 +228,7 @@ "valuesByMode": { "37:2": { "type": "VARIABLE_ALIAS", - "id": "VariableID:39:124" + "id": "VariableID:823:2" } }, "resolvedValuesByMode": { @@ -223,11 +239,13 @@ "b": 1, "a": 1 }, - "alias": "VariableID:39:124", - "aliasName": "colors/white-500" + "alias": "VariableID:823:2", + "aliasName": "colors/colors-neutral-0" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -254,7 +272,9 @@ "aliasName": "colors/colors-neutral-200" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -281,7 +301,9 @@ "aliasName": "colors/colors-neutral-100" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -308,7 +330,9 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -335,7 +359,9 @@ "aliasName": "colors/colors-primary-300" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -362,7 +388,9 @@ "aliasName": "colors/colors-primary-100" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -389,7 +417,9 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -416,7 +446,9 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -443,7 +475,9 @@ "aliasName": "colors/colors-success-200" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -465,7 +499,9 @@ "aliasName": "radius/dimensions-border-radius-2" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -487,7 +523,9 @@ "aliasName": "radius/dimensions-border-radius-4" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -514,7 +552,9 @@ "aliasName": "colors/colors-neutral-900" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -541,7 +581,9 @@ "aliasName": "colors/colors-neutral-700" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -568,7 +610,9 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -595,7 +639,9 @@ "aliasName": "colors/white-500" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -622,7 +668,9 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -649,7 +697,9 @@ "aliasName": "colors/colors-primary-300" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -676,7 +726,9 @@ "aliasName": "colors/colors-primary-100" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -703,7 +755,9 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -730,7 +784,9 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -757,7 +813,9 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -784,7 +842,9 @@ "aliasName": "colors/colors-destructive-400" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -811,7 +871,9 @@ "aliasName": "colors/colors-destructive-100" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -838,7 +900,9 @@ "aliasName": "colors/colors-warning-500" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -865,7 +929,9 @@ "aliasName": "colors/colors-warning-300" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -892,7 +958,9 @@ "aliasName": "colors/colors-warning-100" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -919,7 +987,9 @@ "aliasName": "colors/colors-neutral-300" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -941,7 +1011,10 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -963,7 +1036,9 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -985,7 +1060,9 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1007,7 +1084,9 @@ "aliasName": "radius/dimensions-border-radius-8" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1029,7 +1108,9 @@ "aliasName": "radius/dimensions-border-radius-16" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1051,7 +1132,9 @@ "aliasName": "radius/dimensions-border-radius-24" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1073,7 +1156,9 @@ "aliasName": "radius/dimensions-border-radius-36" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1095,7 +1180,10 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1117,7 +1205,9 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1139,13 +1229,15 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, { "id": "VariableID:79:235", - "name": "elevation/elevation-flat", + "name": "shadow/shadow-flat", "description": "", "type": "FLOAT", "valuesByMode": { @@ -1157,7 +1249,9 @@ "alias": null } }, - "scopes": ["EFFECT_FLOAT"], + "scopes": [ + "EFFECT_FLOAT" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1179,7 +1273,9 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1201,7 +1297,9 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1223,13 +1321,15 @@ "aliasName": "space/dimensions-fixed-48" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, { "id": "VariableID:79:239", - "name": "elevation/elevation-sm", + "name": "shadow/shadow-sm", "description": "", "type": "FLOAT", "valuesByMode": { @@ -1241,13 +1341,15 @@ "alias": null } }, - "scopes": ["EFFECT_FLOAT"], + "scopes": [ + "EFFECT_FLOAT" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, { "id": "VariableID:80:242", - "name": "elevation/elevation-md", + "name": "shadow/shadow-md", "description": "", "type": "FLOAT", "valuesByMode": { @@ -1259,13 +1361,15 @@ "alias": null } }, - "scopes": ["EFFECT_FLOAT"], + "scopes": [ + "EFFECT_FLOAT" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, { "id": "VariableID:80:243", - "name": "elevation/elevation-lg", + "name": "shadow/shadow-lg", "description": "", "type": "FLOAT", "valuesByMode": { @@ -1277,13 +1381,15 @@ "alias": null } }, - "scopes": ["EFFECT_FLOAT"], + "scopes": [ + "EFFECT_FLOAT" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, { "id": "VariableID:80:244", - "name": "elevation/elevation-xl", + "name": "shadow/shadow-xl", "description": "", "type": "FLOAT", "valuesByMode": { @@ -1295,13 +1401,15 @@ "alias": null } }, - "scopes": ["EFFECT_FLOAT"], + "scopes": [ + "EFFECT_FLOAT" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, { "id": "VariableID:80:245", - "name": "elevation/elevation-xxl", + "name": "shadow/shadow-xxl", "description": "", "type": "FLOAT", "valuesByMode": { @@ -1313,7 +1421,9 @@ "alias": null } }, - "scopes": ["EFFECT_FLOAT"], + "scopes": [ + "EFFECT_FLOAT" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1335,7 +1445,10 @@ "aliasName": "borderWidth/dimensions-border-width-1" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1357,7 +1470,9 @@ "aliasName": "borderWidth/dimensions-border-width-2" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1384,7 +1499,11 @@ "aliasName": "colors/colors-neutral-800" } }, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1411,7 +1530,11 @@ "aliasName": "colors/colors-neutral-500" } }, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1438,7 +1561,11 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1465,7 +1592,11 @@ "aliasName": "colors/white-500" } }, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1487,7 +1618,10 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1509,7 +1643,10 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1536,7 +1673,9 @@ "aliasName": "colors/colors-neutral-900" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1563,7 +1702,9 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1590,7 +1731,9 @@ "aliasName": "colors/colors-neutral-200" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1617,7 +1760,9 @@ "aliasName": "colors/colors-neutral-100" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1644,7 +1789,9 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1671,7 +1818,9 @@ "aliasName": "colors/colors-primary-100" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1693,7 +1842,9 @@ "aliasName": "space/dimensions-fixed-48" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1715,7 +1866,10 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1737,7 +1891,10 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1759,7 +1916,10 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1781,7 +1941,9 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1803,7 +1965,9 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1825,7 +1989,9 @@ "aliasName": "space/dimensions-fixed-48" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1847,7 +2013,10 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1869,7 +2038,10 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1891,7 +2063,10 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1913,7 +2088,9 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1935,7 +2112,9 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1957,7 +2136,9 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1984,7 +2165,9 @@ "aliasName": "colors/colors-success-200" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2011,7 +2194,9 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2038,7 +2223,9 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2065,7 +2252,9 @@ "aliasName": "colors/colors-success-200" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2092,7 +2281,9 @@ "aliasName": "colors/colors-primary-700" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2119,7 +2310,9 @@ "aliasName": "colors/colors-success-700" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2146,7 +2339,9 @@ "aliasName": "colors/colors-secondary-700" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2173,7 +2368,9 @@ "aliasName": "colors/colors-destructive-600" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2200,7 +2397,9 @@ "aliasName": "colors/colors-warning-700" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2227,7 +2426,9 @@ "aliasName": "colors/colors-primary-900" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2254,7 +2455,9 @@ "aliasName": "colors/colors-success-900" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2281,7 +2484,9 @@ "aliasName": "colors/colors-secondary-900" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2308,7 +2513,9 @@ "aliasName": "colors/colors-destructive-800" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2335,7 +2542,9 @@ "aliasName": "colors/colors-warning-800" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2362,7 +2571,11 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2389,7 +2602,11 @@ "aliasName": "colors/colors-neutral-700" } }, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2416,13 +2633,15 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, { "id": "VariableID:849:784", - "name": "borderColor/borderColor-sucess-default", + "name": "borderColor/borderColor-success-default", "description": "", "type": "COLOR", "valuesByMode": { @@ -2443,7 +2662,9 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2470,7 +2691,9 @@ "aliasName": "colors/colors-neutral-500" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2497,7 +2720,9 @@ "aliasName": "colors/colors-neutral-500" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2524,7 +2749,9 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2551,7 +2778,9 @@ "aliasName": "colors/colors-neutral-700" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2578,7 +2807,9 @@ "aliasName": "colors/colors-neutral-200" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2605,7 +2836,9 @@ "aliasName": "colors/colors-primary-300" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2632,7 +2865,9 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2659,7 +2894,9 @@ "aliasName": "colors/colors-success-300" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2686,7 +2923,9 @@ "aliasName": "colors/colors-destructive-300" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2713,7 +2952,9 @@ "aliasName": "colors/colors-warning-200" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2740,7 +2981,9 @@ "aliasName": "colors/colors-primary-200" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2762,7 +3005,10 @@ "aliasName": "space/dimensions-fixed-2" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2784,7 +3030,9 @@ "aliasName": "space/dimensions-fixed-64" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2806,7 +3054,10 @@ "aliasName": "space/dimensions-fixed-2" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2828,7 +3079,10 @@ "aliasName": "space/dimensions-fixed-0" } }, - "scopes": ["WIDTH_HEIGHT", "GAP"], + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2855,7 +3109,9 @@ "aliasName": "colors/colors-neutral-600" } }, - "scopes": ["ALL_SCOPES"], + "scopes": [ + "ALL_SCOPES" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2882,7 +3138,11 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2909,7 +3169,11 @@ "aliasName": "colors/colors-warning-500" } }, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2936,7 +3200,11 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2963,7 +3231,9 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2990,7 +3260,9 @@ "aliasName": "colors/colors-destructive-300" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3017,9 +3289,261 @@ "aliasName": "colors/colors-destructive-100" } }, - "scopes": ["TEXT_FILL"], + "scopes": [ + "TEXT_FILL" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:15576", + "name": "padding/padding-xxs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4489" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:203:4489", + "aliasName": "space/dimensions-fixed-2" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33668", + "name": "padding/padding-sm-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1516:33669" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 10, + "alias": "VariableID:1516:33669", + "aliasName": "space/dimensions-fixed-10" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33671", + "name": "padding/padding-sm-extra", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:5688" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 12, + "alias": "VariableID:203:5688", + "aliasName": "space/dimensions-fixed-12" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33672", + "name": "padding/padding-md plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:5689" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 20, + "alias": "VariableID:203:5689", + "aliasName": "space/dimensions-fixed-20" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33674", + "name": "padding/padding-xs-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1516:33670" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 6, + "alias": "VariableID:1516:33670", + "aliasName": "space/dimensions-fixed-6" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33861", + "name": "spacing/spacing-sm-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1516:33669" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 10, + "alias": "VariableID:1516:33669", + "aliasName": "space/dimensions-fixed-10" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33862", + "name": "spacing/spacing-sm-extra", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:5688" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 12, + "alias": "VariableID:203:5688", + "aliasName": "space/dimensions-fixed-12" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33863", + "name": "spacing/spacing-md-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:5689" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 20, + "alias": "VariableID:203:5689", + "aliasName": "space/dimensions-fixed-20" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33864", + "name": "spacing/spacing-xs-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1516:33670" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 6, + "alias": "VariableID:1516:33670", + "aliasName": "space/dimensions-fixed-6" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33865", + "name": "padding/padding-none", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1148:691" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 0, + "alias": "VariableID:1148:691", + "aliasName": "space/dimensions-fixed-0" + } + }, + "scopes": [ + "WIDTH_HEIGHT", + "GAP" + ], "hiddenFromPublishing": false, "codeSyntax": {} } ] -} +} \ No newline at end of file diff --git a/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js index c0f63af091a..384bf6a9d05 100644 --- a/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js +++ b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js @@ -6,15 +6,26 @@ const VARIABLE_TYPES = [ "borderColor", "textColor", "padding", - "elevation", + "shadow", "fill", "spacing", "margin", "borderRadius", - "dimension", "borderWidth" ]; +const IGNORED_VARIABLE_TYPES = ["dimension"]; + +const isIgnoredVariableType = variableName => { + for (const type of IGNORED_VARIABLE_TYPES) { + if (variableName.startsWith(type + "/")) { + return true; + } + } + + return false; +}; + const getVariableType = variableName => { for (const type of VARIABLE_TYPES) { if (variableName.startsWith(type + "/")) { @@ -32,6 +43,10 @@ const normalizeFigmaExport = () => { const [, variantName] = variable.name.match(/[a-zA-Z]*?\/[a-zA-Z]*?-(.*)/); + if (isIgnoredVariableType(variable.name)) { + return null; + } + const type = getVariableType(variable.name); return { @@ -43,6 +58,7 @@ const normalizeFigmaExport = () => { resolvedValue }; }) + .filter(Boolean) .sort((variable1, variable2) => { // Order by variable.name, from A to Z. return variable1.name.localeCompare(variable2.name); diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index 8138f419532..a89cb28f922 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -66,7 +66,7 @@ --border-neutral-strong: 218, 10.7%, 65.3%; --border-neutral-subtle: 210, 14.3%, 97.3%; - --border-sucess-default: 170, 100%, 37.5%; + --border-success-default: 170, 100%, 37.5%; // Border radius. --radius-lg: 16px; @@ -91,19 +91,29 @@ // Padding. --padding-lg: 24px; --padding-md: 16px; + --padding-md-plus: 20px; + --padding-none: 0px; --padding-sm: 8px; + --padding-sm-extra: 12px; + --padding-sm-plus: 10px; --padding-xl: 32px; --padding-xs: 4px; + --padding-xs-plus: 6px; --padding-xxl: 48px; + --padding-xxs: 2px; // Spacing. --spacing-3xl: 64px; --spacing-lg: 24px; --spacing-md: 16px; + --spacing-md-plus: 20px; --spacing-none: 0px; --spacing-sm: 8px; + --spacing-sm-extra: 12px; + --spacing-sm-plus: 10px; --spacing-xl: 32px; --spacing-xs: 4px; + --spacing-xs-plus: 6px; --spacing-xxl: 48px; --spacing-xxs: 2px; diff --git a/packages/admin-ui/tailwind.config.customizations.js b/packages/admin-ui/tailwind.config.customizations.js index d2577f1a9bf..db0e8bc9d7b 100644 --- a/packages/admin-ui/tailwind.config.customizations.js +++ b/packages/admin-ui/tailwind.config.customizations.js @@ -78,9 +78,9 @@ module.exports = { strong: "hsl(var(--border-neutral-strong))", subtle: "hsl(var(--border-neutral-subtle))" }, - sucess: { - DEFAULT: "hsl(var(--border-sucess-default))", - default: "hsl(var(--border-sucess-default))" + success: { + DEFAULT: "hsl(var(--border-success-default))", + default: "hsl(var(--border-success-default))" } }, borderRadius: { @@ -112,19 +112,29 @@ module.exports = { padding: { lg: "var(--padding-lg)", md: "var(--padding-md)", + "md plus": "var(--padding-md plus)", + none: "var(--padding-none)", sm: "var(--padding-sm)", + "sm-extra": "var(--padding-sm-extra)", + "sm-plus": "var(--padding-sm-plus)", xl: "var(--padding-xl)", xs: "var(--padding-xs)", - xxl: "var(--padding-xxl)" + "xs-plus": "var(--padding-xs-plus)", + xxl: "var(--padding-xxl)", + xxs: "var(--padding-xxs)" }, spacing: { "3xl": "var(--spacing-3xl)", lg: "var(--spacing-lg)", md: "var(--spacing-md)", + "md-plus": "var(--spacing-md-plus)", none: "var(--spacing-none)", sm: "var(--spacing-sm)", + "sm-extra": "var(--spacing-sm-extra)", + "sm-plus": "var(--spacing-sm-plus)", xl: "var(--spacing-xl)", xs: "var(--spacing-xs)", + "xs-plus": "var(--spacing-xs-plus)", xxl: "var(--spacing-xxl)", xxs: "var(--spacing-xxs)" }, From 0bc04418a02d7441ad8692fc56a2d94386690a86 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 14:28:37 +0100 Subject: [PATCH 35/62] wip --- packages/admin-ui/DEVELOPMENT.md | 0 packages/admin-ui/README.md | 17 +++++------------ 2 files changed, 5 insertions(+), 12 deletions(-) create mode 100644 packages/admin-ui/DEVELOPMENT.md diff --git a/packages/admin-ui/DEVELOPMENT.md b/packages/admin-ui/DEVELOPMENT.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/admin-ui/README.md b/packages/admin-ui/README.md index ec7f16ff73e..0b1dc17cda3 100644 --- a/packages/admin-ui/README.md +++ b/packages/admin-ui/README.md @@ -1,15 +1,8 @@ # @webiny/admin-ui -[![](https://img.shields.io/npm/dw/@webiny/admin-ui.svg)](https://www.npmjs.com/package/@webiny/admin-ui) -[![](https://img.shields.io/npm/v/@webiny/admin-ui.svg)](https://www.npmjs.com/package/@webiny/admin-ui) -[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -## Install -``` -npm install --save @webiny/admin-ui -``` +> [!NOTE] +> This package is included in every Webiny project by default, and it's not meant to be used as a standalone package. -Or if you prefer yarn: -``` -yarn add @webiny/admin-ui -``` +This package contains the Admin UI React components and styles. + + \ No newline at end of file From 366308e2fc377313833cd0dc99a400af5865d5dd Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 14:31:43 +0100 Subject: [PATCH 36/62] wip --- packages/admin-ui/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/admin-ui/README.md b/packages/admin-ui/README.md index 0b1dc17cda3..cf6b9898d82 100644 --- a/packages/admin-ui/README.md +++ b/packages/admin-ui/README.md @@ -1,8 +1,10 @@ -# @webiny/admin-ui +# `@webiny/admin-ui` > [!NOTE] > This package is included in every Webiny project by default, and it's not meant to be used as a standalone package. -This package contains the Admin UI React components and styles. +## Short Description + +This package contains React components and styles for Webiny's Admin app. \ No newline at end of file From 2cc94349de3cf7ab8582cc3019c397b69458f09c Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 14:32:06 +0100 Subject: [PATCH 37/62] wip --- packages/admin-ui/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/admin-ui/README.md b/packages/admin-ui/README.md index cf6b9898d82..6d1a06ff2b4 100644 --- a/packages/admin-ui/README.md +++ b/packages/admin-ui/README.md @@ -1,10 +1,10 @@ # `@webiny/admin-ui` +This package contains React components and styles for Webiny's Admin app. + > [!NOTE] > This package is included in every Webiny project by default, and it's not meant to be used as a standalone package. -## Short Description - -This package contains React components and styles for Webiny's Admin app. + \ No newline at end of file From 6fa6ed449960ea30192cf0af8f9e281b68728a25 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 15:05:30 +0100 Subject: [PATCH 38/62] wip --- packages/admin-ui/DEVELOPMENT.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/admin-ui/DEVELOPMENT.md b/packages/admin-ui/DEVELOPMENT.md index e69de29bb2d..acd5d9cb2e0 100644 --- a/packages/admin-ui/DEVELOPMENT.md +++ b/packages/admin-ui/DEVELOPMENT.md @@ -0,0 +1,22 @@ +# Overview +This document covers different aspects of the development process for the `@webiny/admin-ui` package. + +## Tailwind CSS +Webiny's Admin app uses Tailwind CSS for styling. + +### Tailwind Configuration +Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. However, we also have a [`tailwind.config.customizations.js`](./tailwind.config.customizations.js) file, which is used to override the default Tailwind CSS configuration. More on this in the next section. + +### Default Theme +One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). + +### Transferring Figma To Code +Since manually transferring values from the mentioned Figma file into code has shown to be a very cumbersome process, we've created a script that basically takes a Figma export and generates all the necessary Tailwind CSS configuration. Note that when we say "Figma export", we basically mean an export of Alias tokens, created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin. + +Once the export is downloaded, we place it in `packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json`, and then we run the following command from project root: + +```bash +yarn webinyn-admin-import-from-figma +``` + +This will generate a new `tailwind.config.customizations.js` file, which will contain all the necessary Tailwind CSS configuration. On top of that, it will also generate a `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.customizations.js` file. From 5261222b2d8e573c65692256d809da4d3692a258 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 15:08:39 +0100 Subject: [PATCH 39/62] wip --- packages/admin-ui/DEVELOPMENT.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/admin-ui/DEVELOPMENT.md b/packages/admin-ui/DEVELOPMENT.md index acd5d9cb2e0..7c93d783b40 100644 --- a/packages/admin-ui/DEVELOPMENT.md +++ b/packages/admin-ui/DEVELOPMENT.md @@ -8,9 +8,9 @@ Webiny's Admin app uses Tailwind CSS for styling. Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. However, we also have a [`tailwind.config.customizations.js`](./tailwind.config.customizations.js) file, which is used to override the default Tailwind CSS configuration. More on this in the next section. ### Default Theme -One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). +One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). But note that the values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.customizations.js` file, which is a file that is generated from a Figma export (more on this in the next section). -### Transferring Figma To Code +### Figma To Code Since manually transferring values from the mentioned Figma file into code has shown to be a very cumbersome process, we've created a script that basically takes a Figma export and generates all the necessary Tailwind CSS configuration. Note that when we say "Figma export", we basically mean an export of Alias tokens, created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin. Once the export is downloaded, we place it in `packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json`, and then we run the following command from project root: From c5e6486526102e2cbea1766e890ac9c4a356b475 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 15:10:39 +0100 Subject: [PATCH 40/62] wip --- packages/admin-ui/DEVELOPMENT.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/admin-ui/DEVELOPMENT.md b/packages/admin-ui/DEVELOPMENT.md index 7c93d783b40..14bdd013aeb 100644 --- a/packages/admin-ui/DEVELOPMENT.md +++ b/packages/admin-ui/DEVELOPMENT.md @@ -5,7 +5,7 @@ This document covers different aspects of the development process for the `@webi Webiny's Admin app uses Tailwind CSS for styling. ### Tailwind Configuration -Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. However, we also have a [`tailwind.config.customizations.js`](./tailwind.config.customizations.js) file, which is used to override the default Tailwind CSS configuration. More on this in the next section. +Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. Among other things, this file defines the default Webiny theme, which is based on Webiny's design system. More on this in the next section. ### Default Theme One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). But note that the values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.customizations.js` file, which is a file that is generated from a Figma export (more on this in the next section). From 08d10d0c3e176cb2096311fc149465847a0c093c Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 15:11:28 +0100 Subject: [PATCH 41/62] wip --- packages/admin-ui/DEVELOPMENT.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/admin-ui/DEVELOPMENT.md b/packages/admin-ui/DEVELOPMENT.md index 14bdd013aeb..961f3359531 100644 --- a/packages/admin-ui/DEVELOPMENT.md +++ b/packages/admin-ui/DEVELOPMENT.md @@ -8,7 +8,9 @@ Webiny's Admin app uses Tailwind CSS for styling. Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. Among other things, this file defines the default Webiny theme, which is based on Webiny's design system. More on this in the next section. ### Default Theme -One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). But note that the values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.customizations.js` file, which is a file that is generated from a Figma export (more on this in the next section). +One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). + +But, do note that all the default theme-values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.customizations.js` file, which is a file that is generated from a Figma export (more on this in the next section). ### Figma To Code Since manually transferring values from the mentioned Figma file into code has shown to be a very cumbersome process, we've created a script that basically takes a Figma export and generates all the necessary Tailwind CSS configuration. Note that when we say "Figma export", we basically mean an export of Alias tokens, created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin. From f5795d94c4272384f5774dcd0566fd53fda9641b Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 15:47:45 +0100 Subject: [PATCH 42/62] wip --- .../importFromFigma/createStylesScss.js | 33 ++++++++++++++++--- .../createTailwindConfigCustomizations.js | 15 ++++++++- .../importFromFigma/exports/Alias tokens.json | 2 +- .../importFromFigma/normalizeFigmaExport.js | 2 +- .../importFromFigma/templates/styles.scss.txt | 3 ++ packages/admin-ui/src/styles.scss | 15 +++++++++ .../tailwind.config.customizations.js | 28 +++++++++++++++- packages/admin-ui/tailwind.config.js | 2 ++ 8 files changed, 92 insertions(+), 8 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js index 5a9aaa15ae0..69fd24eb345 100644 --- a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js +++ b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js @@ -76,7 +76,32 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{BORDER_WIDTH}", borderWidth.join("\n")); } - // 5. Margin. + // 5. Fill. + { + let currentFillColorGroup = null; + const fillColors = normalizedFigmaExport + .filter(item => item.type === "fill") + .map(variable => { + const [colorGroup] = variable.variantName.split("-"); + const cssVar = `--fill-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + + if (!currentFillColorGroup) { + currentFillColorGroup = colorGroup; + return cssVar; + } + + if (!currentFillColorGroup || currentFillColorGroup !== colorGroup) { + currentFillColorGroup = colorGroup; + return ["", cssVar]; + } + return cssVar; + }) + .flat(); + + stylesScss = stylesScss.replace("{FILL}", fillColors.join("\n")); + } + + // 6. Margin. { const margin = normalizedFigmaExport .filter(item => item.type === "margin") @@ -85,7 +110,7 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{MARGIN}", margin.join("\n")); } - // 6. Padding. + // 7. Padding. { const padding = normalizedFigmaExport .filter(item => item.type === "padding") @@ -94,7 +119,7 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{PADDING}", padding.join("\n")); } - // 7. Spacing. + // 8. Spacing. { const spacing = normalizedFigmaExport .filter(item => item.type === "spacing") @@ -103,7 +128,7 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{SPACING}", spacing.join("\n")); } - // 8. Text color. + // 9. Text color. { let currentTextColor = null; const textColors = normalizedFigmaExport diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js index 90ec3e70b80..86adcdfb410 100644 --- a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js @@ -38,6 +38,19 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { } return acc; }, {}), + fill: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "fill") { + const [color, variant] = variantName.split("-"); + if (!acc[color]) { + acc[color] = { + DEFAULT: `hsl(var(--fill-${color}-default))` + }; + } + + acc[color][variant] = `hsl(var(--fill-${variantName}))`; + } + return acc; + }, {}), // Not in Figma, we're manually setting the values here. fontSize: { @@ -77,7 +90,7 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { acc[color][variant] = `hsl(var(--text-${variantName}))`; } return acc; - }, {}), + }, {}) }; }; diff --git a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json index 4f2104b3293..6b38dff0a96 100644 --- a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json +++ b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json @@ -3372,7 +3372,7 @@ }, { "id": "VariableID:1516:33672", - "name": "padding/padding-md plus", + "name": "padding/padding-md-plus", "description": "", "type": "FLOAT", "valuesByMode": { diff --git a/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js index 384bf6a9d05..5dcac7e340b 100644 --- a/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js +++ b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js @@ -4,10 +4,10 @@ const { figmaRgbaToHsla } = require("./figmaRgbaToHsla"); const VARIABLE_TYPES = [ "backgroundColor", "borderColor", + "fill", "textColor", "padding", "shadow", - "fill", "spacing", "margin", "borderRadius", diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt index 82d0a4cd0d1..6ae8f33d0af 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -18,6 +18,9 @@ // Border width. {BORDER_WIDTH} + // Fill. + {FILL} + // Margin. {MARGIN} diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index a89cb28f922..dc9b584966f 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -80,6 +80,21 @@ --border-width-md: 2px; --border-width-sm: 1px; + // Fill. + --fill-accent-default: 15, 95.6%, 55.9%; + + --fill-destructive: 0, 71%, 48.6%; + + --fill-neutral-base: 0, 0%, 100%; + --fill-neutral-dark: 215, 11.1%, 21.2%; + --fill-neutral-disabled: 219, 12.1%, 77.3%; + --fill-neutral-strong: 218, 10.7%, 65.3%; + --fill-neutral-xstrong: 213, 10.1%, 38.8%; + + --fill-success: 170, 100%, 37.5%; + + --fill-warning: 45, 95.7%, 63.7%; + // Margin. --margin-lg: 24px; --margin-md: 16px; diff --git a/packages/admin-ui/tailwind.config.customizations.js b/packages/admin-ui/tailwind.config.customizations.js index db0e8bc9d7b..a4f42855cd0 100644 --- a/packages/admin-ui/tailwind.config.customizations.js +++ b/packages/admin-ui/tailwind.config.customizations.js @@ -95,6 +95,32 @@ module.exports = { md: "var(--border-width-md)", sm: "var(--border-width-sm)" }, + fill: { + accent: { + DEFAULT: "hsl(var(--fill-accent-default))", + default: "hsl(var(--fill-accent-default))" + }, + destructive: { + DEFAULT: "hsl(var(--fill-destructive-default))", + undefined: "hsl(var(--fill-destructive))" + }, + neutral: { + DEFAULT: "hsl(var(--fill-neutral-default))", + base: "hsl(var(--fill-neutral-base))", + dark: "hsl(var(--fill-neutral-dark))", + disabled: "hsl(var(--fill-neutral-disabled))", + strong: "hsl(var(--fill-neutral-strong))", + xstrong: "hsl(var(--fill-neutral-xstrong))" + }, + success: { + DEFAULT: "hsl(var(--fill-success-default))", + undefined: "hsl(var(--fill-success))" + }, + warning: { + DEFAULT: "hsl(var(--fill-warning-default))", + undefined: "hsl(var(--fill-warning))" + } + }, fontSize: { xl: "1.25rem", lg: "1rem", @@ -112,7 +138,7 @@ module.exports = { padding: { lg: "var(--padding-lg)", md: "var(--padding-md)", - "md plus": "var(--padding-md plus)", + "md-plus": "var(--padding-md-plus)", none: "var(--padding-none)", sm: "var(--padding-sm)", "sm-extra": "var(--padding-sm-extra)", diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 96af37bf4d7..ab88fe91315 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -11,6 +11,7 @@ const { borderColor, borderRadius, borderWidth, + fill, margin, padding, spacing, @@ -35,6 +36,7 @@ module.exports = { borderColor, borderRadius, borderWidth, + fill, fontSize, margin, padding, From ba2ff84acd59e8c5ac26a457a232d57ca372ede9 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 15:49:08 +0100 Subject: [PATCH 43/62] wip --- .../importFromFigma/exports/Alias tokens.json | 548 ++++-------------- 1 file changed, 127 insertions(+), 421 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json index 6b38dff0a96..fbfc7c65593 100644 --- a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json +++ b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json @@ -156,9 +156,7 @@ "aliasName": "colors/colors-neutral-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -185,9 +183,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -214,9 +210,7 @@ "aliasName": "colors/colors-neutral-50" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -243,9 +237,7 @@ "aliasName": "colors/colors-neutral-0" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -272,9 +264,7 @@ "aliasName": "colors/colors-neutral-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -301,9 +291,7 @@ "aliasName": "colors/colors-neutral-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -330,9 +318,7 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -359,9 +345,7 @@ "aliasName": "colors/colors-primary-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -388,9 +372,7 @@ "aliasName": "colors/colors-primary-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -417,9 +399,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -446,9 +426,7 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -475,9 +453,7 @@ "aliasName": "colors/colors-success-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -499,9 +475,7 @@ "aliasName": "radius/dimensions-border-radius-2" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -523,9 +497,7 @@ "aliasName": "radius/dimensions-border-radius-4" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -552,9 +524,7 @@ "aliasName": "colors/colors-neutral-900" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -581,9 +551,7 @@ "aliasName": "colors/colors-neutral-700" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -610,9 +578,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -639,9 +605,7 @@ "aliasName": "colors/white-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -668,9 +632,7 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -697,9 +659,7 @@ "aliasName": "colors/colors-primary-300" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -726,9 +686,7 @@ "aliasName": "colors/colors-primary-100" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -755,9 +713,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -784,9 +740,7 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -813,9 +767,7 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -842,9 +794,7 @@ "aliasName": "colors/colors-destructive-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -871,9 +821,7 @@ "aliasName": "colors/colors-destructive-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -900,9 +848,7 @@ "aliasName": "colors/colors-warning-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -929,9 +875,7 @@ "aliasName": "colors/colors-warning-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -958,9 +902,7 @@ "aliasName": "colors/colors-warning-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -987,9 +929,7 @@ "aliasName": "colors/colors-neutral-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1011,10 +951,7 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1036,9 +973,7 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1060,9 +995,7 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1084,9 +1017,7 @@ "aliasName": "radius/dimensions-border-radius-8" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1108,9 +1039,7 @@ "aliasName": "radius/dimensions-border-radius-16" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1132,9 +1061,7 @@ "aliasName": "radius/dimensions-border-radius-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1156,9 +1083,7 @@ "aliasName": "radius/dimensions-border-radius-36" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1180,10 +1105,7 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1205,9 +1127,7 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1229,9 +1149,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1249,9 +1167,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1273,9 +1189,7 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1297,9 +1211,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1321,9 +1233,7 @@ "aliasName": "space/dimensions-fixed-48" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1341,9 +1251,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1361,9 +1269,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1381,9 +1287,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1401,9 +1305,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1421,9 +1323,7 @@ "alias": null } }, - "scopes": [ - "EFFECT_FLOAT" - ], + "scopes": ["EFFECT_FLOAT"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1445,10 +1345,7 @@ "aliasName": "borderWidth/dimensions-border-width-1" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1470,9 +1367,7 @@ "aliasName": "borderWidth/dimensions-border-width-2" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1499,11 +1394,7 @@ "aliasName": "colors/colors-neutral-800" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1530,11 +1421,7 @@ "aliasName": "colors/colors-neutral-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1561,11 +1448,7 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1592,11 +1475,7 @@ "aliasName": "colors/white-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1618,10 +1497,7 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1643,10 +1519,7 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1673,9 +1546,7 @@ "aliasName": "colors/colors-neutral-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1702,9 +1573,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1731,9 +1600,7 @@ "aliasName": "colors/colors-neutral-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1760,9 +1627,7 @@ "aliasName": "colors/colors-neutral-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1789,9 +1654,7 @@ "aliasName": "colors/colors-primary-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1818,9 +1681,7 @@ "aliasName": "colors/colors-primary-100" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1842,9 +1703,7 @@ "aliasName": "space/dimensions-fixed-48" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1866,10 +1725,7 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1891,10 +1747,7 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1916,10 +1769,7 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1941,9 +1791,7 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1965,9 +1813,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -1989,9 +1835,7 @@ "aliasName": "space/dimensions-fixed-48" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2013,10 +1857,7 @@ "aliasName": "space/dimensions-fixed-4" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2038,10 +1879,7 @@ "aliasName": "space/dimensions-fixed-8" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2063,10 +1901,7 @@ "aliasName": "space/dimensions-fixed-16" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2088,9 +1923,7 @@ "aliasName": "space/dimensions-fixed-24" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2112,9 +1945,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2136,9 +1967,7 @@ "aliasName": "space/dimensions-fixed-32" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2165,9 +1994,7 @@ "aliasName": "colors/colors-success-200" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2194,9 +2021,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2223,9 +2048,7 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2252,9 +2075,7 @@ "aliasName": "colors/colors-success-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2281,9 +2102,7 @@ "aliasName": "colors/colors-primary-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2310,9 +2129,7 @@ "aliasName": "colors/colors-success-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2339,9 +2156,7 @@ "aliasName": "colors/colors-secondary-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2368,9 +2183,7 @@ "aliasName": "colors/colors-destructive-600" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2397,9 +2210,7 @@ "aliasName": "colors/colors-warning-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2426,9 +2237,7 @@ "aliasName": "colors/colors-primary-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2455,9 +2264,7 @@ "aliasName": "colors/colors-success-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2484,9 +2291,7 @@ "aliasName": "colors/colors-secondary-900" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2513,9 +2318,7 @@ "aliasName": "colors/colors-destructive-800" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2542,9 +2345,7 @@ "aliasName": "colors/colors-warning-800" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2571,11 +2372,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2602,11 +2399,7 @@ "aliasName": "colors/colors-neutral-700" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2633,9 +2426,7 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2662,9 +2453,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2691,9 +2480,7 @@ "aliasName": "colors/colors-neutral-500" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2720,9 +2507,7 @@ "aliasName": "colors/colors-neutral-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2749,9 +2534,7 @@ "aliasName": "colors/colors-neutral-400" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2778,9 +2561,7 @@ "aliasName": "colors/colors-neutral-700" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2807,9 +2588,7 @@ "aliasName": "colors/colors-neutral-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2836,9 +2615,7 @@ "aliasName": "colors/colors-primary-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2865,9 +2642,7 @@ "aliasName": "colors/colors-success-400" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2894,9 +2669,7 @@ "aliasName": "colors/colors-success-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2923,9 +2696,7 @@ "aliasName": "colors/colors-destructive-300" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2952,9 +2723,7 @@ "aliasName": "colors/colors-warning-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -2981,9 +2750,7 @@ "aliasName": "colors/colors-primary-200" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3005,10 +2772,7 @@ "aliasName": "space/dimensions-fixed-2" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3030,9 +2794,7 @@ "aliasName": "space/dimensions-fixed-64" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3054,10 +2816,7 @@ "aliasName": "space/dimensions-fixed-2" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3079,10 +2838,7 @@ "aliasName": "space/dimensions-fixed-0" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3109,9 +2865,7 @@ "aliasName": "colors/colors-neutral-600" } }, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3138,11 +2892,7 @@ "aliasName": "colors/colors-success-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3169,11 +2919,7 @@ "aliasName": "colors/colors-warning-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3200,11 +2946,7 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": [ - "FRAME_FILL", - "SHAPE_FILL", - "STROKE_COLOR" - ], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3231,9 +2973,7 @@ "aliasName": "colors/colors-destructive-500" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3260,9 +3000,7 @@ "aliasName": "colors/colors-destructive-300" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3289,9 +3027,7 @@ "aliasName": "colors/colors-destructive-100" } }, - "scopes": [ - "TEXT_FILL" - ], + "scopes": ["TEXT_FILL"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3313,10 +3049,7 @@ "aliasName": "space/dimensions-fixed-2" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3338,10 +3071,7 @@ "aliasName": "space/dimensions-fixed-10" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3363,10 +3093,7 @@ "aliasName": "space/dimensions-fixed-12" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3388,10 +3115,7 @@ "aliasName": "space/dimensions-fixed-20" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3413,10 +3137,7 @@ "aliasName": "space/dimensions-fixed-6" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3438,10 +3159,7 @@ "aliasName": "space/dimensions-fixed-10" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3463,10 +3181,7 @@ "aliasName": "space/dimensions-fixed-12" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3488,10 +3203,7 @@ "aliasName": "space/dimensions-fixed-20" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3513,10 +3225,7 @@ "aliasName": "space/dimensions-fixed-6" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} }, @@ -3538,12 +3247,9 @@ "aliasName": "space/dimensions-fixed-0" } }, - "scopes": [ - "WIDTH_HEIGHT", - "GAP" - ], + "scopes": ["WIDTH_HEIGHT", "GAP"], "hiddenFromPublishing": false, "codeSyntax": {} } ] -} \ No newline at end of file +} From b53d79186f214b8310ecffb7bc74e11d5ed445c7 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 16:21:10 +0100 Subject: [PATCH 44/62] wip --- .../importFromFigma/templates/styles.scss.txt | 72 ------------------ packages/admin-ui/src/styles.scss | 73 ------------------- 2 files changed, 145 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt index 6ae8f33d0af..99e9db08809 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -32,78 +32,6 @@ // Text color. {TEXT_COLOR} - - // Old vars (we'll delete these once we're done). - - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --primary: 15 96% 56%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --neutral: 210 40% 96.1%; - --neutral-strong: 210 40% 96.1%; - --neutral-muted: 210 40% 96.1%; - --neutral-dimmed: 210 40% 96.1%; - --neutral-disabled: 210 40% 96.1%; - --neutral-light: 0 0% 100%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 215 20.2% 65.1%; - - --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif; } - .dark { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; - - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --radius: 8px; - } } diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index dc9b584966f..233b2719c3c 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -151,78 +151,5 @@ --text-sucess-muted: 169, 59.8%, 64.9%; --text-sucess-primary: 170, 100%, 37.5%; --text-sucess-subtle: 170, 57.1%, 91.8%; - - // Old vars (we'll delete these once we're done). - - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --primary: 15 96% 56%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --neutral: 210 40% 96.1%; - --neutral-strong: 210 40% 96.1%; - --neutral-muted: 210 40% 96.1%; - --neutral-dimmed: 210 40% 96.1%; - --neutral-disabled: 210 40% 96.1%; - --neutral-light: 0 0% 100%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 215 20.2% 65.1%; - - --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif; - } - - .dark { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; - - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --radius: 8px; } } From 8b04ace090d5c554297f1964628d7ec4934b7872 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 16:21:57 +0100 Subject: [PATCH 45/62] wip --- .../admin-ui/scripts/importFromFigma/templates/styles.scss.txt | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt index 99e9db08809..63f50cd3179 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -4,8 +4,6 @@ @layer base { :root { - // New variables from design. - // Background colors. {BACKGROUND_COLOR} From 86a1579fabcbb8d2a8fe077a2572aed0944cbd93 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 28 Oct 2024 16:22:14 +0100 Subject: [PATCH 46/62] wip --- packages/admin-ui/src/styles.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index 233b2719c3c..431763c05f2 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -4,8 +4,6 @@ @layer base { :root { - // New variables from design. - // Background colors. --bg-destructive-default: 0, 71%, 48.6%; --bg-destructive-disabled: 1, 83.2%, 76.7%; From 50a6ffb1ce8608cda0c54ee6a1d10f7f7ab332f3 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 29 Oct 2024 05:26:17 +0100 Subject: [PATCH 47/62] wip --- packages/admin-ui/DEVELOPMENT.md | 2 +- .../importFromFigma/createStylesScss.js | 9 +++++++++ .../createTailwindConfigCustomizations.js | 6 ++++++ .../importFromFigma/templates/styles.scss.txt | 4 +++- packages/admin-ui/src/Button/Button.tsx | 20 +++++++++++-------- packages/admin-ui/src/styles.scss | 8 ++++++++ .../tailwind.config.customizations.js | 8 ++++++++ packages/admin-ui/tailwind.config.js | 2 ++ 8 files changed, 49 insertions(+), 10 deletions(-) diff --git a/packages/admin-ui/DEVELOPMENT.md b/packages/admin-ui/DEVELOPMENT.md index 961f3359531..966c3cf8086 100644 --- a/packages/admin-ui/DEVELOPMENT.md +++ b/packages/admin-ui/DEVELOPMENT.md @@ -18,7 +18,7 @@ Since manually transferring values from the mentioned Figma file into code has s Once the export is downloaded, we place it in `packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json`, and then we run the following command from project root: ```bash -yarn webinyn-admin-import-from-figma +yarn webiny-admin-import-from-figma ``` This will generate a new `tailwind.config.customizations.js` file, which will contain all the necessary Tailwind CSS configuration. On top of that, it will also generate a `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.customizations.js` file. diff --git a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js index 69fd24eb345..ba34eaaf882 100644 --- a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js +++ b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js @@ -119,6 +119,15 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{PADDING}", padding.join("\n")); } + // 8. Shadow. + { + const shadow = normalizedFigmaExport + .filter(item => item.type === "shadow") + .map(variable => `--shadow-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{SHADOW}", shadow.join("\n")); + } + // 8. Spacing. { const spacing = normalizedFigmaExport diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js index 86adcdfb410..c259341bce2 100644 --- a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js @@ -72,6 +72,12 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { } return acc; }, {}), + shadow: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "shadow") { + acc[variantName] = `var(--shadow-${variantName})`; + } + return acc; + }, {}), spacing: normalizedFigmaExport.reduce((acc, { type, variantName }) => { if (type === "spacing") { acc[variantName] = `var(--spacing-${variantName})`; diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt index 63f50cd3179..b417ca04f7b 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -25,11 +25,13 @@ // Padding. {PADDING} + // Shadow. + {SHADOW} + // Spacing. {SPACING} // Text color. {TEXT_COLOR} } - } diff --git a/packages/admin-ui/src/Button/Button.tsx b/packages/admin-ui/src/Button/Button.tsx index 4d42a5f43df..c2e910ecca2 100644 --- a/packages/admin-ui/src/Button/Button.tsx +++ b/packages/admin-ui/src/Button/Button.tsx @@ -3,14 +3,16 @@ import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "~/utils"; import { makeDecoratable } from "@webiny/react-composition"; +import { Text } from "~/Text"; const buttonVariants = cva( - "font-sans inline-flex items-center justify-center whitespace-nowrap leading-tight ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded radius-sm", + { variants: { variant: { primary: - "bg-primary text-primary-foreground hover:bg-primary/90 [&>svg]:fill-white", + "bg-primary text-neutral-light hover:bg-primary-strong active:bg-primary-xstrong [&>svg]:fill-neutral-base", secondary: "bg-gray-200 text-gray-900 fill-gray-900 border border-gray-200 hover:bg-gray-300 hover:border-gray-300 hover:text-gray-800", outline: @@ -18,15 +20,15 @@ const buttonVariants = cva( ghost: "bg-transparent border border-transparent text-gray-900 fill-gray-900 hover:bg-gray-200" }, size: { - sm: "p-1 rounded text-sm font-normal", - md: "py-1.5 px-2 rounded text-md font-normal", - lg: "py-2.5 px-3 rounded-lg text-base font-medium", - xl: "py-3.5 px-4 rounded-lg text-lg font-medium" + sm: "py-xs-plus px-sm-extra rounded text-sm font-normal", + md: "py-1.5 px-2", + lg: "py-2.5 px-3", + xl: "py-3.5 px-4 radius-sm" } }, defaultVariants: { variant: "primary", - size: "md" + size: "sm" } } ); @@ -50,7 +52,9 @@ const ButtonBase = React.forwardRef((props, ref) return ( {iconPosition !== "end" && icon} - {text} + + {text} + {iconPosition === "end" && icon} ); diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index 431763c05f2..83315511220 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -115,6 +115,14 @@ --padding-xxl: 48px; --padding-xxs: 2px; + // Shadow. + --shadow-flat: 0px; + --shadow-lg: 16px; + --shadow-md: 8px; + --shadow-sm: 4px; + --shadow-xl: 24px; + --shadow-xxl: 48px; + // Spacing. --spacing-3xl: 64px; --spacing-lg: 24px; diff --git a/packages/admin-ui/tailwind.config.customizations.js b/packages/admin-ui/tailwind.config.customizations.js index a4f42855cd0..4513be91bea 100644 --- a/packages/admin-ui/tailwind.config.customizations.js +++ b/packages/admin-ui/tailwind.config.customizations.js @@ -149,6 +149,14 @@ module.exports = { xxl: "var(--padding-xxl)", xxs: "var(--padding-xxs)" }, + shadow: { + flat: "var(--shadow-flat)", + lg: "var(--shadow-lg)", + md: "var(--shadow-md)", + sm: "var(--shadow-sm)", + xl: "var(--shadow-xl)", + xxl: "var(--shadow-xxl)" + }, spacing: { "3xl": "var(--spacing-3xl)", lg: "var(--spacing-lg)", diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index ab88fe91315..51a4b967c67 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -14,6 +14,7 @@ const { fill, margin, padding, + shadow, spacing, textColor, fontSize @@ -40,6 +41,7 @@ module.exports = { fontSize, margin, padding, + shadow, spacing, textColor, From e400c745281a9aa5ea4433713b540805db6e1160 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 29 Oct 2024 08:32:37 +0100 Subject: [PATCH 48/62] wip --- packages/admin-ui/.storybook/preview.ts | 1 + packages/admin-ui/.storybook/styles.scss | 1 + .../scripts/importFromFigma/createStylesScss.js | 16 +++++++++++----- .../importFromFigma/templates/styles.scss.txt | 3 +++ packages/admin-ui/src/Button/Button.tsx | 4 +--- packages/admin-ui/src/styles.scss | 3 +++ packages/admin-ui/tailwind.config.js | 4 +++- 7 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 packages/admin-ui/.storybook/styles.scss diff --git a/packages/admin-ui/.storybook/preview.ts b/packages/admin-ui/.storybook/preview.ts index 7925c2c61c6..5c8e442c746 100644 --- a/packages/admin-ui/.storybook/preview.ts +++ b/packages/admin-ui/.storybook/preview.ts @@ -1,5 +1,6 @@ import type { Preview } from "@storybook/react"; +import "./styles.scss"; import "../src/styles.scss"; const preview: Preview = { diff --git a/packages/admin-ui/.storybook/styles.scss b/packages/admin-ui/.storybook/styles.scss new file mode 100644 index 00000000000..de6a461e551 --- /dev/null +++ b/packages/admin-ui/.storybook/styles.scss @@ -0,0 +1 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); diff --git a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js index ba34eaaf882..da996ef89ad 100644 --- a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js +++ b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js @@ -101,7 +101,13 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{FILL}", fillColors.join("\n")); } - // 6. Margin. + // 6. Font. + { + // Font is not in Figma, we're manually setting the values here. + stylesScss = stylesScss.replace("{FONT}", `--font-sans: 'Inter', sans-serif;`); + } + + // 7. Margin. { const margin = normalizedFigmaExport .filter(item => item.type === "margin") @@ -110,7 +116,7 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{MARGIN}", margin.join("\n")); } - // 7. Padding. + // 8. Padding. { const padding = normalizedFigmaExport .filter(item => item.type === "padding") @@ -119,7 +125,7 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{PADDING}", padding.join("\n")); } - // 8. Shadow. + // 9. Shadow. { const shadow = normalizedFigmaExport .filter(item => item.type === "shadow") @@ -128,7 +134,7 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{SHADOW}", shadow.join("\n")); } - // 8. Spacing. + // 10. Spacing. { const spacing = normalizedFigmaExport .filter(item => item.type === "spacing") @@ -137,7 +143,7 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{SPACING}", spacing.join("\n")); } - // 9. Text color. + // 11. Text color. { let currentTextColor = null; const textColors = normalizedFigmaExport diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt index b417ca04f7b..8e413c6c831 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -19,6 +19,9 @@ // Fill. {FILL} + // Font. + {FONT} + // Margin. {MARGIN} diff --git a/packages/admin-ui/src/Button/Button.tsx b/packages/admin-ui/src/Button/Button.tsx index c2e910ecca2..9efd8962c10 100644 --- a/packages/admin-ui/src/Button/Button.tsx +++ b/packages/admin-ui/src/Button/Button.tsx @@ -52,9 +52,7 @@ const ButtonBase = React.forwardRef((props, ref) return ( {iconPosition !== "end" && icon} - - {text} - + {iconPosition === "end" && icon} ); diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index 83315511220..a033b6d599f 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -93,6 +93,9 @@ --fill-warning: 45, 95.7%, 63.7%; + // Font. + --font-sans: "Inter", sans-serif; + // Margin. --margin-lg: 24px; --margin-md: 16px; diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 51a4b967c67..09421a4666c 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -46,7 +46,9 @@ module.exports = { textColor, fontFamily: { - sans: ["var(--font-sans)", ...fontFamily.sans] + sans: ["var(--font-sans)", ...fontFamily.sans], + serif: ["var(--font-serif)", ...fontFamily.serif], + mono: ["var(--font-mono)", ...fontFamily.mono] }, keyframes: { From 3afc7b37832fbe66f48dd64467b4422575664c53 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 29 Oct 2024 08:37:53 +0100 Subject: [PATCH 49/62] wip --- packages/admin-ui/DEVELOPMENT.md | 4 ++-- packages/admin-ui/scripts/importFromFigma.js | 16 ++++++++-------- ...mizations.js => createTailwindConfigTheme.js} | 4 ++-- packages/admin-ui/tailwind.config.js | 2 +- ...ustomizations.js => tailwind.config.theme.js} | 0 packages/admin-ui/webiny.config.js | 4 ++-- 6 files changed, 15 insertions(+), 15 deletions(-) rename packages/admin-ui/scripts/importFromFigma/{createTailwindConfigCustomizations.js => createTailwindConfigTheme.js} (96%) rename packages/admin-ui/{tailwind.config.customizations.js => tailwind.config.theme.js} (100%) diff --git a/packages/admin-ui/DEVELOPMENT.md b/packages/admin-ui/DEVELOPMENT.md index 966c3cf8086..2938c866cdb 100644 --- a/packages/admin-ui/DEVELOPMENT.md +++ b/packages/admin-ui/DEVELOPMENT.md @@ -10,7 +10,7 @@ Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.c ### Default Theme One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). -But, do note that all the default theme-values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.customizations.js` file, which is a file that is generated from a Figma export (more on this in the next section). +But, do note that all the default theme-values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.theme.js` file, which is a file that is generated from a Figma export (more on this in the next section). ### Figma To Code Since manually transferring values from the mentioned Figma file into code has shown to be a very cumbersome process, we've created a script that basically takes a Figma export and generates all the necessary Tailwind CSS configuration. Note that when we say "Figma export", we basically mean an export of Alias tokens, created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin. @@ -21,4 +21,4 @@ Once the export is downloaded, we place it in `packages/admin-ui/scripts/importF yarn webiny-admin-import-from-figma ``` -This will generate a new `tailwind.config.customizations.js` file, which will contain all the necessary Tailwind CSS configuration. On top of that, it will also generate a `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.customizations.js` file. +This will generate a new `tailwind.config.theme.js` file, which will contain all the necessary Tailwind CSS configuration. On top of that, it will also generate a `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.theme.js` file. diff --git a/packages/admin-ui/scripts/importFromFigma.js b/packages/admin-ui/scripts/importFromFigma.js index 6e7c64afe3c..1dadfa41eb4 100644 --- a/packages/admin-ui/scripts/importFromFigma.js +++ b/packages/admin-ui/scripts/importFromFigma.js @@ -4,8 +4,8 @@ const path = require("path"); const aliasTokensExport = require("./importFromFigma/exports/Alias tokens.json"); const { normalizeFigmaExport } = require("./importFromFigma/normalizeFigmaExport"); const { - createTailwindConfigCustomizations -} = require("./importFromFigma/createTailwindConfigCustomizations"); + createTailwindConfigTheme +} = require("./importFromFigma/createTailwindConfigTheme"); const { createStylesScss } = require("./importFromFigma/createStylesScss"); const { formatCode } = require("./importFromFigma/formatCode"); @@ -16,13 +16,13 @@ const saveFileAndFormat = async (filePath, content) => { (async () => { const normalizedFigmaExport = normalizeFigmaExport(aliasTokensExport); - const tailwindConfigCustomizations = createTailwindConfigCustomizations(normalizedFigmaExport); + const tailwindConfigTheme = createTailwindConfigTheme(normalizedFigmaExport); const stylesScss = createStylesScss(normalizedFigmaExport); const paths = { cwd: process.cwd(), normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"), - tailwindConfigCustomizations: path.join(__dirname, "../tailwind.config.customizations.js"), + createTailwindConfigTheme: path.join(__dirname, "../tailwind.config.theme.js"), stylesScss: path.join(__dirname, "../src/styles.scss") }; @@ -33,8 +33,8 @@ const saveFileAndFormat = async (filePath, content) => { )}).` ); console.log( - `‣ Tailwind config customizations (${green( - path.relative(paths.cwd, paths.tailwindConfigCustomizations) + `‣ Tailwind config theme (${green( + path.relative(paths.cwd, paths.createTailwindConfigTheme) )}).` ); console.log(`‣ styles.scss (${green(path.relative(paths.cwd, paths.stylesScss))}).`); @@ -45,8 +45,8 @@ const saveFileAndFormat = async (filePath, content) => { ); await saveFileAndFormat( - paths.tailwindConfigCustomizations, - `module.exports = ${JSON.stringify(tailwindConfigCustomizations, null, 2)};` + paths.createTailwindConfigTheme, + `module.exports = ${JSON.stringify(tailwindConfigTheme, null, 2)};` ); await saveFileAndFormat(paths.stylesScss, stylesScss); diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js similarity index 96% rename from packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js rename to packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js index c259341bce2..66781dcf59d 100644 --- a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js @@ -1,4 +1,4 @@ -const createTailwindConfigCustomizations = normalizedFigmaExport => { +const createTailwindConfigTheme = normalizedFigmaExport => { return { backgroundColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => { if (type === "backgroundColor") { @@ -100,4 +100,4 @@ const createTailwindConfigCustomizations = normalizedFigmaExport => { }; }; -module.exports = { createTailwindConfigCustomizations }; +module.exports = { createTailwindConfigTheme }; diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 09421a4666c..dcf16b3e0c8 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -18,7 +18,7 @@ const { spacing, textColor, fontSize -} = require("./tailwind.config.customizations"); +} = require("./tailwind.config.theme"); /** @type {import('tailwindcss').Config} */ module.exports = { diff --git a/packages/admin-ui/tailwind.config.customizations.js b/packages/admin-ui/tailwind.config.theme.js similarity index 100% rename from packages/admin-ui/tailwind.config.customizations.js rename to packages/admin-ui/tailwind.config.theme.js diff --git a/packages/admin-ui/webiny.config.js b/packages/admin-ui/webiny.config.js index 864c5a6524d..b7d13bb2255 100644 --- a/packages/admin-ui/webiny.config.js +++ b/packages/admin-ui/webiny.config.js @@ -12,8 +12,8 @@ module.exports = { fs.cpSync(from, to); } { - const from = path.join(__dirname, "tailwind.config.customizations.js"); - const to = path.join(__dirname, "dist/tailwind.config.customizations.js"); + const from = path.join(__dirname, "tailwind.config.theme.js"); + const to = path.join(__dirname, "dist/tailwind.config.theme.js"); fs.cpSync(from, to); } }, From 369671e26f845ffa3e2005bcf7b4ee572e8c880d Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 29 Oct 2024 08:38:39 +0100 Subject: [PATCH 50/62] wip --- packages/admin-ui/scripts/importFromFigma.js | 4 +--- packages/admin-ui/src/Button/Button.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma.js b/packages/admin-ui/scripts/importFromFigma.js index 1dadfa41eb4..7d19a1c723d 100644 --- a/packages/admin-ui/scripts/importFromFigma.js +++ b/packages/admin-ui/scripts/importFromFigma.js @@ -3,9 +3,7 @@ const { green } = require("chalk"); const path = require("path"); const aliasTokensExport = require("./importFromFigma/exports/Alias tokens.json"); const { normalizeFigmaExport } = require("./importFromFigma/normalizeFigmaExport"); -const { - createTailwindConfigTheme -} = require("./importFromFigma/createTailwindConfigTheme"); +const { createTailwindConfigTheme } = require("./importFromFigma/createTailwindConfigTheme"); const { createStylesScss } = require("./importFromFigma/createStylesScss"); const { formatCode } = require("./importFromFigma/formatCode"); diff --git a/packages/admin-ui/src/Button/Button.tsx b/packages/admin-ui/src/Button/Button.tsx index 9efd8962c10..81c895598b3 100644 --- a/packages/admin-ui/src/Button/Button.tsx +++ b/packages/admin-ui/src/Button/Button.tsx @@ -52,7 +52,7 @@ const ButtonBase = React.forwardRef((props, ref) return ( {iconPosition !== "end" && icon} - + {iconPosition === "end" && icon} ); From bcd1d5a95480801292b9c3ad2fddf2ba3a25c041 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 29 Oct 2024 09:23:56 +0100 Subject: [PATCH 51/62] wip --- .../importFromFigma/createStylesScss.js | 51 +++++++++++++ .../createTailwindConfigTheme.js | 76 +++++++++++++++++-- .../importFromFigma/templates/styles.scss.txt | 3 + packages/admin-ui/src/styles.scss | 43 +++++++++++ packages/admin-ui/tailwind.config.theme.js | 74 +++++++++++++++++- 5 files changed, 238 insertions(+), 9 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js index da996ef89ad..6f6d6953e45 100644 --- a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js +++ b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js @@ -167,6 +167,57 @@ const createStylesScss = normalizedFigmaExport => { stylesScss = stylesScss.replace("{TEXT_COLOR}", textColors.join("\n")); } + + // 12. Text size. + { + // Not in Figma export, so we're manually setting the values here. + stylesScss = stylesScss.replace( + "{TEXT_SIZE}", + [ + "// Headings.", + "--text-h1: 3rem;", + "--text-h1-leading: 3.75rem;", + "--text-h1-tracking: -2%;", + "", + "--text-h2: 2.25rem;", + "--text-h2-leading: 2.75rem;", + "--text-h2-tracking: -2%;", + "", + "--text-h3: 1.875rem;", + "--text-h3-leading: 2.375rem;", + "--text-h3-tracking: inherit;", + "", + "--text-h4: 1.25rem;", + "--text-h4-leading: 1.875rem;", + "--text-h4-tracking: inherit;", + "", + "--text-h5: 1rem;", + "--text-h5-leading: 1.5rem;", + "--text-h5-tracking: inherit;", + "", + "--text-h6: 0.875rem;", + "--text-h6-leading: 1.25rem;", + "--text-h6-tracking: inherit;", + "", + "// Text.", + "--text-xl: 1.25rem;", + "--text-xl-leading: 1.875rem;", + "--text-xl-tracking: inherit;", + "", + "--text-lg: 1rem;", + "--text-lg-leading: 1.5rem;", + "--text-lg-tracking: inherit;", + "", + "--text-md: 0.875rem;", + "--text-md-leading: 1.375rem;", + "--text-md-tracking: inherit;", + "", + "--text-sm: 0.75rem;", + "--text-sm-leading: 1.125rem;", + "--text-sm-tracking: inherit;" + ].join("\n") + ); + } return stylesScss; }; diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js index 66781dcf59d..4839c48035a 100644 --- a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js @@ -52,12 +52,78 @@ const createTailwindConfigTheme = normalizedFigmaExport => { return acc; }, {}), - // Not in Figma, we're manually setting the values here. + // Not in Figma export, so we're manually setting the values here. fontSize: { - xl: "1.25rem", - lg: "1rem", - md: "0.875rem", - sm: "0.75rem" + h1: [ + "var(--text-h1)", + { + lineHeight: "var(--text-h1-leading)", + letterSpacing: "var(--text-h1-tracking)" + } + ], + h2: [ + "var(--text-h2)", + { + lineHeight: "var(--text-h2-leading)", + letterSpacing: "var(--text-h2-tracking)" + } + ], + h3: [ + "var(--text-h3)", + { + lineHeight: "var(--text-h3-leading)", + letterSpacing: "var(--text-h3-tracking)" + } + ], + h4: [ + "var(--text-h4)", + { + lineHeight: "var(--text-h4-leading)", + letterSpacing: "var(--text-h4-tracking)" + } + ], + h5: [ + "var(--text-h5)", + { + lineHeight: "var(--text-h5-leading)", + letterSpacing: "var(--text-h5-tracking)" + } + ], + h6: [ + "var(--text-h6)", + { + lineHeight: "var(--text-h6-leading)", + letterSpacing: "var(--text-h6-tracking)" + } + ], + xl: [ + "var(--text-xl)", + { + lineHeight: "var(--text-xl-leading)", + letterSpacing: "var(--text-xl-tracking)" + } + ], + lg: [ + "var(--text-lg)", + { + lineHeight: "var(--text-lg-leading)", + letterSpacing: "var(--text-lg-tracking)" + } + ], + md: [ + "var(--text-md)", + { + lineHeight: "var(--text-md-leading)", + letterSpacing: "var(--text-md-tracking)" + } + ], + sm: [ + "var(--text-sm)", + { + lineHeight: "var(--text-sm-leading)", + letterSpacing: "var(--text-sm-tracking)" + } + ] }, margin: normalizedFigmaExport.reduce((acc, { type, variantName }) => { diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt index 8e413c6c831..0829b61186a 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt @@ -36,5 +36,8 @@ // Text color. {TEXT_COLOR} + + // Text size. + {TEXT_SIZE} } } diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index a033b6d599f..28c6abb6bc6 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -160,5 +160,48 @@ --text-sucess-muted: 169, 59.8%, 64.9%; --text-sucess-primary: 170, 100%, 37.5%; --text-sucess-subtle: 170, 57.1%, 91.8%; + + // Text size. + // Headings. + --text-h1: 3rem; + --text-h1-leading: 3.75rem; + --text-h1-tracking: -2%; + + --text-h2: 2.25rem; + --text-h2-leading: 2.75rem; + --text-h2-tracking: -2%; + + --text-h3: 1.875rem; + --text-h3-leading: 2.375rem; + --text-h3-tracking: inherit; + + --text-h4: 1.25rem; + --text-h4-leading: 1.875rem; + --text-h4-tracking: inherit; + + --text-h5: 1rem; + --text-h5-leading: 1.5rem; + --text-h5-tracking: inherit; + + --text-h6: 0.875rem; + --text-h6-leading: 1.25rem; + --text-h6-tracking: inherit; + + // Text. + --text-xl: 1.25rem; + --text-xl-leading: 1.875rem; + --text-xl-tracking: inherit; + + --text-lg: 1rem; + --text-lg-leading: 1.5rem; + --text-lg-tracking: inherit; + + --text-md: 0.875rem; + --text-md-leading: 1.375rem; + --text-md-tracking: inherit; + + --text-sm: 0.75rem; + --text-sm-leading: 1.125rem; + --text-sm-tracking: inherit; } } diff --git a/packages/admin-ui/tailwind.config.theme.js b/packages/admin-ui/tailwind.config.theme.js index 4513be91bea..57b96652535 100644 --- a/packages/admin-ui/tailwind.config.theme.js +++ b/packages/admin-ui/tailwind.config.theme.js @@ -122,10 +122,76 @@ module.exports = { } }, fontSize: { - xl: "1.25rem", - lg: "1rem", - md: "0.875rem", - sm: "0.75rem" + h1: [ + "var(--text-h1)", + { + lineHeight: "var(--text-h1-leading)", + letterSpacing: "var(--text-h1-tracking)" + } + ], + h2: [ + "var(--text-h2)", + { + lineHeight: "var(--text-h2-leading)", + letterSpacing: "var(--text-h2-tracking)" + } + ], + h3: [ + "var(--text-h3)", + { + lineHeight: "var(--text-h3-leading)", + letterSpacing: "var(--text-h3-tracking)" + } + ], + h4: [ + "var(--text-h4)", + { + lineHeight: "var(--text-h4-leading)", + letterSpacing: "var(--text-h4-tracking)" + } + ], + h5: [ + "var(--text-h5)", + { + lineHeight: "var(--text-h5-leading)", + letterSpacing: "var(--text-h5-tracking)" + } + ], + h6: [ + "var(--text-h6)", + { + lineHeight: "var(--text-h6-leading)", + letterSpacing: "var(--text-h6-tracking)" + } + ], + xl: [ + "var(--text-xl)", + { + lineHeight: "var(--text-xl-leading)", + letterSpacing: "var(--text-xl-tracking)" + } + ], + lg: [ + "var(--text-lg)", + { + lineHeight: "var(--text-lg-leading)", + letterSpacing: "var(--text-lg-tracking)" + } + ], + md: [ + "var(--text-md)", + { + lineHeight: "var(--text-md-leading)", + letterSpacing: "var(--text-md-tracking)" + } + ], + sm: [ + "var(--text-sm)", + { + lineHeight: "var(--text-sm-leading)", + letterSpacing: "var(--text-sm-tracking)" + } + ] }, margin: { lg: "var(--margin-lg)", From dd15b89e64939d837885dfd8ef79f93d56e6c8da Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 29 Oct 2024 09:28:49 +0100 Subject: [PATCH 52/62] wip --- apps/admin/src/App.scss | 208 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 208 insertions(+) diff --git a/apps/admin/src/App.scss b/apps/admin/src/App.scss index 2510ed232be..dd31293e619 100644 --- a/apps/admin/src/App.scss +++ b/apps/admin/src/App.scss @@ -5,3 +5,211 @@ @import "~@webiny/admin-ui/styles.scss"; @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + // Background colors. + --bg-destructive-default: 0, 71%, 48.6%; + --bg-destructive-disabled: 1, 83.2%, 76.7%; + --bg-destructive-muted: 0, 66.3%, 62.7%; + --bg-destructive-strong: 0, 76.4%, 38.2%; + --bg-destructive-subtle: 0, 100%, 96.9%; + --bg-destructive-xstrong: 0, 83.6%, 21.6%; + + --bg-neutral-base: 0, 0%, 100%; + --bg-neutral-dark: 214, 12.3%, 11.2%; + --bg-neutral-dimmed: 220, 11.1%, 94.7%; + --bg-neutral-disabled: 220, 11.1%, 94.7%; + --bg-neutral-light: 210, 14.3%, 97.3%; + --bg-neutral-muted: 225, 16.7%, 90.6%; + --bg-neutral-strong: 219, 12.1%, 77.3%; + --bg-neutral-subtle: 180, 11.1%, 98.2%; + --bg-neutral-xstrong: 213, 10.1%, 38.8%; + + --bg-primary-default: 15, 95.6%, 55.9%; + --bg-primary-disabled: 14, 94.7%, 77.8%; + --bg-primary-muted: 14, 94.7%, 77.8%; + --bg-primary-strong: 14, 94.1%, 40%; + --bg-primary-subtle: 5, 100%, 97.5%; + --bg-primary-xstrong: 14, 100%, 25.5%; + + --bg-secondary-default: 170, 100%, 37.5%; + --bg-secondary-disabled: 169, 59.8%, 64.9%; + --bg-secondary-muted: 169, 59.8%, 64.9%; + --bg-secondary-strong: 165, 100%, 28.6%; + --bg-secondary-subtle: 170, 57.1%, 91.8%; + --bg-secondary-xstrong: 160, 100%, 14.5%; + + --bg-success-default: 170, 100%, 37.5%; + --bg-success-disabled: 168, 58.1%, 79.4%; + --bg-success-muted: 169, 59.8%, 64.9%; + --bg-success-strong: 165, 100%, 28.6%; + --bg-success-subtle: 170, 57.1%, 91.8%; + --bg-success-xstrong: 160, 100%, 14.5%; + + --bg-warning-default: 45, 95.7%, 63.7%; + --bg-warning-disabled: 45, 96.9%, 87.5%; + --bg-warning-muted: 45, 95.1%, 75.9%; + --bg-warning-strong: 45, 100%, 37.3%; + --bg-warning-subtle: 43, 100%, 96.5%; + --bg-warning-xstrong: 45, 98.2%, 21.6%; + + // Border color. + --border-accent-default: 15, 95.6%, 55.9%; + --border-accent-dimmed: 15, 94.2%, 86.5%; + --border-accent-subtle: 5, 100%, 97.5%; + + --border-destructive-default: 0, 71%, 48.6%; + + --border-neutral-black: 214, 12.3%, 11.2%; + --border-neutral-dark: 215, 9.6%, 51%; + --border-neutral-dimmed: 220, 11.1%, 94.7%; + --border-neutral-muted: 219, 12.1%, 77.3%; + --border-neutral-strong: 218, 10.7%, 65.3%; + --border-neutral-subtle: 210, 14.3%, 97.3%; + + --border-success-default: 170, 100%, 37.5%; + + // Border radius. + --radius-lg: 16px; + --radius-md: 8px; + --radius-sm: 4px; + --radius-xl: 24px; + --radius-xs: 2px; + --radius-xxl: 36px; + + // Border width. + --border-width-md: 2px; + --border-width-sm: 1px; + + // Fill. + --fill-accent-default: 15, 95.6%, 55.9%; + + --fill-destructive: 0, 71%, 48.6%; + + --fill-neutral-base: 0, 0%, 100%; + --fill-neutral-dark: 215, 11.1%, 21.2%; + --fill-neutral-disabled: 219, 12.1%, 77.3%; + --fill-neutral-strong: 218, 10.7%, 65.3%; + --fill-neutral-xstrong: 213, 10.1%, 38.8%; + + --fill-success: 170, 100%, 37.5%; + + --fill-warning: 45, 95.7%, 63.7%; + + // Font. + --font-sans: "Inter", sans-serif; + + // Margin. + --margin-lg: 24px; + --margin-md: 16px; + --margin-sm: 8px; + --margin-xl: 32px; + --margin-xs: 4px; + --margin-xxl: 32px; + + // Padding. + --padding-lg: 24px; + --padding-md: 16px; + --padding-md-plus: 20px; + --padding-none: 0px; + --padding-sm: 8px; + --padding-sm-extra: 12px; + --padding-sm-plus: 10px; + --padding-xl: 32px; + --padding-xs: 4px; + --padding-xs-plus: 6px; + --padding-xxl: 48px; + --padding-xxs: 2px; + + // Shadow. + --shadow-flat: 0px; + --shadow-lg: 16px; + --shadow-md: 8px; + --shadow-sm: 4px; + --shadow-xl: 24px; + --shadow-xxl: 48px; + + // Spacing. + --spacing-3xl: 64px; + --spacing-lg: 24px; + --spacing-md: 16px; + --spacing-md-plus: 20px; + --spacing-none: 0px; + --spacing-sm: 8px; + --spacing-sm-extra: 12px; + --spacing-sm-plus: 10px; + --spacing-xl: 32px; + --spacing-xs: 4px; + --spacing-xs-plus: 6px; + --spacing-xxl: 48px; + --spacing-xxs: 2px; + + // Text color. + --text-accent-muted: 14, 94.7%, 77.8%; + --text-accent-primary: 15, 95.6%, 55.9%; + --text-accent-subtle: 5, 100%, 97.5%; + + --text-destructive-muted: 1, 83.2%, 76.7%; + --text-destructive-primary: 0, 71%, 48.6%; + --text-destructive-subtle: 0, 100%, 96.9%; + + --text-neutral-dimmed: 219, 12.1%, 77.3%; + --text-neutral-disabled: 219, 12.1%, 77.3%; + --text-neutral-light: 0, 0%, 100%; + --text-neutral-muted: 218, 10.7%, 65.3%; + --text-neutral-primary: 214, 12.3%, 11.2%; + --text-neutral-strong: 213, 10.1%, 38.8%; + + --text-sucess-muted: 169, 59.8%, 64.9%; + --text-sucess-primary: 170, 100%, 37.5%; + --text-sucess-subtle: 170, 57.1%, 91.8%; + + // Text size. + // Headings. + --text-h1: 3rem; + --text-h1-leading: 3.75rem; + --text-h1-tracking: -2%; + + --text-h2: 2.25rem; + --text-h2-leading: 2.75rem; + --text-h2-tracking: -2%; + + --text-h3: 1.875rem; + --text-h3-leading: 2.375rem; + --text-h3-tracking: inherit; + + --text-h4: 1.25rem; + --text-h4-leading: 1.875rem; + --text-h4-tracking: inherit; + + --text-h5: 1rem; + --text-h5-leading: 1.5rem; + --text-h5-tracking: inherit; + + --text-h6: 0.875rem; + --text-h6-leading: 1.25rem; + --text-h6-tracking: inherit; + + // Text. + --text-xl: 1.25rem; + --text-xl-leading: 1.875rem; + --text-xl-tracking: inherit; + + --text-lg: 1rem; + --text-lg-leading: 1.5rem; + --text-lg-tracking: inherit; + + --text-md: 0.875rem; + --text-md-leading: 1.375rem; + --text-md-tracking: inherit; + + --text-sm: 0.75rem; + --text-sm-leading: 1.125rem; + --text-sm-tracking: inherit; + } +} From 3d6973f692d6df22ca7571c938f8dc499229b632 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 29 Oct 2024 09:29:21 +0100 Subject: [PATCH 53/62] wip --- apps/admin/src/App.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/admin/src/App.scss b/apps/admin/src/App.scss index dd31293e619..29b016b4b62 100644 --- a/apps/admin/src/App.scss +++ b/apps/admin/src/App.scss @@ -6,10 +6,6 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); -@tailwind base; -@tailwind components; -@tailwind utilities; - @layer base { :root { // Background colors. From 99d6dab82f4415b2a66dc34d6468abad82855cfc Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 29 Oct 2024 09:49:29 +0100 Subject: [PATCH 54/62] wip --- packages/admin-ui/src/Button/Button.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/admin-ui/src/Button/Button.tsx b/packages/admin-ui/src/Button/Button.tsx index 81c895598b3..4d42a5f43df 100644 --- a/packages/admin-ui/src/Button/Button.tsx +++ b/packages/admin-ui/src/Button/Button.tsx @@ -3,16 +3,14 @@ import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "~/utils"; import { makeDecoratable } from "@webiny/react-composition"; -import { Text } from "~/Text"; const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded radius-sm", - + "font-sans inline-flex items-center justify-center whitespace-nowrap leading-tight ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { primary: - "bg-primary text-neutral-light hover:bg-primary-strong active:bg-primary-xstrong [&>svg]:fill-neutral-base", + "bg-primary text-primary-foreground hover:bg-primary/90 [&>svg]:fill-white", secondary: "bg-gray-200 text-gray-900 fill-gray-900 border border-gray-200 hover:bg-gray-300 hover:border-gray-300 hover:text-gray-800", outline: @@ -20,15 +18,15 @@ const buttonVariants = cva( ghost: "bg-transparent border border-transparent text-gray-900 fill-gray-900 hover:bg-gray-200" }, size: { - sm: "py-xs-plus px-sm-extra rounded text-sm font-normal", - md: "py-1.5 px-2", - lg: "py-2.5 px-3", - xl: "py-3.5 px-4 radius-sm" + sm: "p-1 rounded text-sm font-normal", + md: "py-1.5 px-2 rounded text-md font-normal", + lg: "py-2.5 px-3 rounded-lg text-base font-medium", + xl: "py-3.5 px-4 rounded-lg text-lg font-medium" } }, defaultVariants: { variant: "primary", - size: "sm" + size: "md" } } ); @@ -52,7 +50,7 @@ const ButtonBase = React.forwardRef((props, ref) return ( {iconPosition !== "end" && icon} - + {text} {iconPosition === "end" && icon} ); From e3d6535732271e46bf45813972e8b7de8585ed67 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 29 Oct 2024 10:00:42 +0100 Subject: [PATCH 55/62] wip --- .../scripts/importFromFigma/createStylesScss.js | 16 ++++++++-------- packages/admin-ui/src/styles.scss | 16 ++++++++-------- packages/admin-ui/tailwind.config.js | 2 +- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js index 6f6d6953e45..c092ff27553 100644 --- a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js +++ b/packages/admin-ui/scripts/importFromFigma/createStylesScss.js @@ -185,36 +185,36 @@ const createStylesScss = normalizedFigmaExport => { "", "--text-h3: 1.875rem;", "--text-h3-leading: 2.375rem;", - "--text-h3-tracking: inherit;", + "--text-h3-tracking: initial;", "", "--text-h4: 1.25rem;", "--text-h4-leading: 1.875rem;", - "--text-h4-tracking: inherit;", + "--text-h4-tracking: initial;", "", "--text-h5: 1rem;", "--text-h5-leading: 1.5rem;", - "--text-h5-tracking: inherit;", + "--text-h5-tracking: initial;", "", "--text-h6: 0.875rem;", "--text-h6-leading: 1.25rem;", - "--text-h6-tracking: inherit;", + "--text-h6-tracking: initial;", "", "// Text.", "--text-xl: 1.25rem;", "--text-xl-leading: 1.875rem;", - "--text-xl-tracking: inherit;", + "--text-xl-tracking: initial;", "", "--text-lg: 1rem;", "--text-lg-leading: 1.5rem;", - "--text-lg-tracking: inherit;", + "--text-lg-tracking: initial;", "", "--text-md: 0.875rem;", "--text-md-leading: 1.375rem;", - "--text-md-tracking: inherit;", + "--text-md-tracking: initial;", "", "--text-sm: 0.75rem;", "--text-sm-leading: 1.125rem;", - "--text-sm-tracking: inherit;" + "--text-sm-tracking: initial;" ].join("\n") ); } diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index 28c6abb6bc6..81e4de98c59 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -173,35 +173,35 @@ --text-h3: 1.875rem; --text-h3-leading: 2.375rem; - --text-h3-tracking: inherit; + --text-h3-tracking: initial; --text-h4: 1.25rem; --text-h4-leading: 1.875rem; - --text-h4-tracking: inherit; + --text-h4-tracking: initial; --text-h5: 1rem; --text-h5-leading: 1.5rem; - --text-h5-tracking: inherit; + --text-h5-tracking: initial; --text-h6: 0.875rem; --text-h6-leading: 1.25rem; - --text-h6-tracking: inherit; + --text-h6-tracking: initial; // Text. --text-xl: 1.25rem; --text-xl-leading: 1.875rem; - --text-xl-tracking: inherit; + --text-xl-tracking: initial; --text-lg: 1rem; --text-lg-leading: 1.5rem; - --text-lg-tracking: inherit; + --text-lg-tracking: initial; --text-md: 0.875rem; --text-md-leading: 1.375rem; - --text-md-tracking: inherit; + --text-md-tracking: initial; --text-sm: 0.75rem; --text-sm-leading: 1.125rem; - --text-sm-tracking: inherit; + --text-sm-tracking: initial; } } diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index dcf16b3e0c8..e966459d131 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -12,12 +12,12 @@ const { borderRadius, borderWidth, fill, + fontSize, margin, padding, shadow, spacing, textColor, - fontSize } = require("./tailwind.config.theme"); /** @type {import('tailwindcss').Config} */ From 044c9e76de8dfcca6b73124c1aad1dd30c5c2909 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 31 Oct 2024 05:48:53 +0100 Subject: [PATCH 56/62] wip --- apps/admin/src/App.scss | 210 +----------------- packages/admin-ui/src/styles.scss | 209 +---------------- packages/admin-ui/src/theme.scss | 209 +++++++++++++++++ .../template/common/apps/admin/src/App.scss | 9 + 4 files changed, 224 insertions(+), 413 deletions(-) create mode 100644 packages/admin-ui/src/theme.scss diff --git a/apps/admin/src/App.scss b/apps/admin/src/App.scss index 29b016b4b62..9db8cb92f8a 100644 --- a/apps/admin/src/App.scss +++ b/apps/admin/src/App.scss @@ -1,211 +1,9 @@ -// OLD +// OLD - Will probably be removed. @import "~@webiny/app-serverless-cms/styles.scss"; // NEW +// Base styles. @import "~@webiny/admin-ui/styles.scss"; -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); - -@layer base { - :root { - // Background colors. - --bg-destructive-default: 0, 71%, 48.6%; - --bg-destructive-disabled: 1, 83.2%, 76.7%; - --bg-destructive-muted: 0, 66.3%, 62.7%; - --bg-destructive-strong: 0, 76.4%, 38.2%; - --bg-destructive-subtle: 0, 100%, 96.9%; - --bg-destructive-xstrong: 0, 83.6%, 21.6%; - - --bg-neutral-base: 0, 0%, 100%; - --bg-neutral-dark: 214, 12.3%, 11.2%; - --bg-neutral-dimmed: 220, 11.1%, 94.7%; - --bg-neutral-disabled: 220, 11.1%, 94.7%; - --bg-neutral-light: 210, 14.3%, 97.3%; - --bg-neutral-muted: 225, 16.7%, 90.6%; - --bg-neutral-strong: 219, 12.1%, 77.3%; - --bg-neutral-subtle: 180, 11.1%, 98.2%; - --bg-neutral-xstrong: 213, 10.1%, 38.8%; - - --bg-primary-default: 15, 95.6%, 55.9%; - --bg-primary-disabled: 14, 94.7%, 77.8%; - --bg-primary-muted: 14, 94.7%, 77.8%; - --bg-primary-strong: 14, 94.1%, 40%; - --bg-primary-subtle: 5, 100%, 97.5%; - --bg-primary-xstrong: 14, 100%, 25.5%; - - --bg-secondary-default: 170, 100%, 37.5%; - --bg-secondary-disabled: 169, 59.8%, 64.9%; - --bg-secondary-muted: 169, 59.8%, 64.9%; - --bg-secondary-strong: 165, 100%, 28.6%; - --bg-secondary-subtle: 170, 57.1%, 91.8%; - --bg-secondary-xstrong: 160, 100%, 14.5%; - - --bg-success-default: 170, 100%, 37.5%; - --bg-success-disabled: 168, 58.1%, 79.4%; - --bg-success-muted: 169, 59.8%, 64.9%; - --bg-success-strong: 165, 100%, 28.6%; - --bg-success-subtle: 170, 57.1%, 91.8%; - --bg-success-xstrong: 160, 100%, 14.5%; - - --bg-warning-default: 45, 95.7%, 63.7%; - --bg-warning-disabled: 45, 96.9%, 87.5%; - --bg-warning-muted: 45, 95.1%, 75.9%; - --bg-warning-strong: 45, 100%, 37.3%; - --bg-warning-subtle: 43, 100%, 96.5%; - --bg-warning-xstrong: 45, 98.2%, 21.6%; - - // Border color. - --border-accent-default: 15, 95.6%, 55.9%; - --border-accent-dimmed: 15, 94.2%, 86.5%; - --border-accent-subtle: 5, 100%, 97.5%; - - --border-destructive-default: 0, 71%, 48.6%; - - --border-neutral-black: 214, 12.3%, 11.2%; - --border-neutral-dark: 215, 9.6%, 51%; - --border-neutral-dimmed: 220, 11.1%, 94.7%; - --border-neutral-muted: 219, 12.1%, 77.3%; - --border-neutral-strong: 218, 10.7%, 65.3%; - --border-neutral-subtle: 210, 14.3%, 97.3%; - - --border-success-default: 170, 100%, 37.5%; - - // Border radius. - --radius-lg: 16px; - --radius-md: 8px; - --radius-sm: 4px; - --radius-xl: 24px; - --radius-xs: 2px; - --radius-xxl: 36px; - - // Border width. - --border-width-md: 2px; - --border-width-sm: 1px; - - // Fill. - --fill-accent-default: 15, 95.6%, 55.9%; - - --fill-destructive: 0, 71%, 48.6%; - - --fill-neutral-base: 0, 0%, 100%; - --fill-neutral-dark: 215, 11.1%, 21.2%; - --fill-neutral-disabled: 219, 12.1%, 77.3%; - --fill-neutral-strong: 218, 10.7%, 65.3%; - --fill-neutral-xstrong: 213, 10.1%, 38.8%; - - --fill-success: 170, 100%, 37.5%; - - --fill-warning: 45, 95.7%, 63.7%; - - // Font. - --font-sans: "Inter", sans-serif; - - // Margin. - --margin-lg: 24px; - --margin-md: 16px; - --margin-sm: 8px; - --margin-xl: 32px; - --margin-xs: 4px; - --margin-xxl: 32px; - - // Padding. - --padding-lg: 24px; - --padding-md: 16px; - --padding-md-plus: 20px; - --padding-none: 0px; - --padding-sm: 8px; - --padding-sm-extra: 12px; - --padding-sm-plus: 10px; - --padding-xl: 32px; - --padding-xs: 4px; - --padding-xs-plus: 6px; - --padding-xxl: 48px; - --padding-xxs: 2px; - - // Shadow. - --shadow-flat: 0px; - --shadow-lg: 16px; - --shadow-md: 8px; - --shadow-sm: 4px; - --shadow-xl: 24px; - --shadow-xxl: 48px; - - // Spacing. - --spacing-3xl: 64px; - --spacing-lg: 24px; - --spacing-md: 16px; - --spacing-md-plus: 20px; - --spacing-none: 0px; - --spacing-sm: 8px; - --spacing-sm-extra: 12px; - --spacing-sm-plus: 10px; - --spacing-xl: 32px; - --spacing-xs: 4px; - --spacing-xs-plus: 6px; - --spacing-xxl: 48px; - --spacing-xxs: 2px; - - // Text color. - --text-accent-muted: 14, 94.7%, 77.8%; - --text-accent-primary: 15, 95.6%, 55.9%; - --text-accent-subtle: 5, 100%, 97.5%; - - --text-destructive-muted: 1, 83.2%, 76.7%; - --text-destructive-primary: 0, 71%, 48.6%; - --text-destructive-subtle: 0, 100%, 96.9%; - - --text-neutral-dimmed: 219, 12.1%, 77.3%; - --text-neutral-disabled: 219, 12.1%, 77.3%; - --text-neutral-light: 0, 0%, 100%; - --text-neutral-muted: 218, 10.7%, 65.3%; - --text-neutral-primary: 214, 12.3%, 11.2%; - --text-neutral-strong: 213, 10.1%, 38.8%; - - --text-sucess-muted: 169, 59.8%, 64.9%; - --text-sucess-primary: 170, 100%, 37.5%; - --text-sucess-subtle: 170, 57.1%, 91.8%; - - // Text size. - // Headings. - --text-h1: 3rem; - --text-h1-leading: 3.75rem; - --text-h1-tracking: -2%; - - --text-h2: 2.25rem; - --text-h2-leading: 2.75rem; - --text-h2-tracking: -2%; - - --text-h3: 1.875rem; - --text-h3-leading: 2.375rem; - --text-h3-tracking: inherit; - - --text-h4: 1.25rem; - --text-h4-leading: 1.875rem; - --text-h4-tracking: inherit; - - --text-h5: 1rem; - --text-h5-leading: 1.5rem; - --text-h5-tracking: inherit; - - --text-h6: 0.875rem; - --text-h6-leading: 1.25rem; - --text-h6-tracking: inherit; - - // Text. - --text-xl: 1.25rem; - --text-xl-leading: 1.875rem; - --text-xl-tracking: inherit; - - --text-lg: 1rem; - --text-lg-leading: 1.5rem; - --text-lg-tracking: inherit; - - --text-md: 0.875rem; - --text-md-leading: 1.375rem; - --text-md-tracking: inherit; - - --text-sm: 0.75rem; - --text-sm-leading: 1.125rem; - --text-sm-tracking: inherit; - } -} +// The default theme. Learn more: https://webiny.link/admin-themes. +@import "~@webiny/admin-ui/theme.scss"; \ No newline at end of file diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index 81e4de98c59..e5621db4931 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -1,207 +1,2 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - :root { - // Background colors. - --bg-destructive-default: 0, 71%, 48.6%; - --bg-destructive-disabled: 1, 83.2%, 76.7%; - --bg-destructive-muted: 0, 66.3%, 62.7%; - --bg-destructive-strong: 0, 76.4%, 38.2%; - --bg-destructive-subtle: 0, 100%, 96.9%; - --bg-destructive-xstrong: 0, 83.6%, 21.6%; - - --bg-neutral-base: 0, 0%, 100%; - --bg-neutral-dark: 214, 12.3%, 11.2%; - --bg-neutral-dimmed: 220, 11.1%, 94.7%; - --bg-neutral-disabled: 220, 11.1%, 94.7%; - --bg-neutral-light: 210, 14.3%, 97.3%; - --bg-neutral-muted: 225, 16.7%, 90.6%; - --bg-neutral-strong: 219, 12.1%, 77.3%; - --bg-neutral-subtle: 180, 11.1%, 98.2%; - --bg-neutral-xstrong: 213, 10.1%, 38.8%; - - --bg-primary-default: 15, 95.6%, 55.9%; - --bg-primary-disabled: 14, 94.7%, 77.8%; - --bg-primary-muted: 14, 94.7%, 77.8%; - --bg-primary-strong: 14, 94.1%, 40%; - --bg-primary-subtle: 5, 100%, 97.5%; - --bg-primary-xstrong: 14, 100%, 25.5%; - - --bg-secondary-default: 170, 100%, 37.5%; - --bg-secondary-disabled: 169, 59.8%, 64.9%; - --bg-secondary-muted: 169, 59.8%, 64.9%; - --bg-secondary-strong: 165, 100%, 28.6%; - --bg-secondary-subtle: 170, 57.1%, 91.8%; - --bg-secondary-xstrong: 160, 100%, 14.5%; - - --bg-success-default: 170, 100%, 37.5%; - --bg-success-disabled: 168, 58.1%, 79.4%; - --bg-success-muted: 169, 59.8%, 64.9%; - --bg-success-strong: 165, 100%, 28.6%; - --bg-success-subtle: 170, 57.1%, 91.8%; - --bg-success-xstrong: 160, 100%, 14.5%; - - --bg-warning-default: 45, 95.7%, 63.7%; - --bg-warning-disabled: 45, 96.9%, 87.5%; - --bg-warning-muted: 45, 95.1%, 75.9%; - --bg-warning-strong: 45, 100%, 37.3%; - --bg-warning-subtle: 43, 100%, 96.5%; - --bg-warning-xstrong: 45, 98.2%, 21.6%; - - // Border color. - --border-accent-default: 15, 95.6%, 55.9%; - --border-accent-dimmed: 15, 94.2%, 86.5%; - --border-accent-subtle: 5, 100%, 97.5%; - - --border-destructive-default: 0, 71%, 48.6%; - - --border-neutral-black: 214, 12.3%, 11.2%; - --border-neutral-dark: 215, 9.6%, 51%; - --border-neutral-dimmed: 220, 11.1%, 94.7%; - --border-neutral-muted: 219, 12.1%, 77.3%; - --border-neutral-strong: 218, 10.7%, 65.3%; - --border-neutral-subtle: 210, 14.3%, 97.3%; - - --border-success-default: 170, 100%, 37.5%; - - // Border radius. - --radius-lg: 16px; - --radius-md: 8px; - --radius-sm: 4px; - --radius-xl: 24px; - --radius-xs: 2px; - --radius-xxl: 36px; - - // Border width. - --border-width-md: 2px; - --border-width-sm: 1px; - - // Fill. - --fill-accent-default: 15, 95.6%, 55.9%; - - --fill-destructive: 0, 71%, 48.6%; - - --fill-neutral-base: 0, 0%, 100%; - --fill-neutral-dark: 215, 11.1%, 21.2%; - --fill-neutral-disabled: 219, 12.1%, 77.3%; - --fill-neutral-strong: 218, 10.7%, 65.3%; - --fill-neutral-xstrong: 213, 10.1%, 38.8%; - - --fill-success: 170, 100%, 37.5%; - - --fill-warning: 45, 95.7%, 63.7%; - - // Font. - --font-sans: "Inter", sans-serif; - - // Margin. - --margin-lg: 24px; - --margin-md: 16px; - --margin-sm: 8px; - --margin-xl: 32px; - --margin-xs: 4px; - --margin-xxl: 32px; - - // Padding. - --padding-lg: 24px; - --padding-md: 16px; - --padding-md-plus: 20px; - --padding-none: 0px; - --padding-sm: 8px; - --padding-sm-extra: 12px; - --padding-sm-plus: 10px; - --padding-xl: 32px; - --padding-xs: 4px; - --padding-xs-plus: 6px; - --padding-xxl: 48px; - --padding-xxs: 2px; - - // Shadow. - --shadow-flat: 0px; - --shadow-lg: 16px; - --shadow-md: 8px; - --shadow-sm: 4px; - --shadow-xl: 24px; - --shadow-xxl: 48px; - - // Spacing. - --spacing-3xl: 64px; - --spacing-lg: 24px; - --spacing-md: 16px; - --spacing-md-plus: 20px; - --spacing-none: 0px; - --spacing-sm: 8px; - --spacing-sm-extra: 12px; - --spacing-sm-plus: 10px; - --spacing-xl: 32px; - --spacing-xs: 4px; - --spacing-xs-plus: 6px; - --spacing-xxl: 48px; - --spacing-xxs: 2px; - - // Text color. - --text-accent-muted: 14, 94.7%, 77.8%; - --text-accent-primary: 15, 95.6%, 55.9%; - --text-accent-subtle: 5, 100%, 97.5%; - - --text-destructive-muted: 1, 83.2%, 76.7%; - --text-destructive-primary: 0, 71%, 48.6%; - --text-destructive-subtle: 0, 100%, 96.9%; - - --text-neutral-dimmed: 219, 12.1%, 77.3%; - --text-neutral-disabled: 219, 12.1%, 77.3%; - --text-neutral-light: 0, 0%, 100%; - --text-neutral-muted: 218, 10.7%, 65.3%; - --text-neutral-primary: 214, 12.3%, 11.2%; - --text-neutral-strong: 213, 10.1%, 38.8%; - - --text-sucess-muted: 169, 59.8%, 64.9%; - --text-sucess-primary: 170, 100%, 37.5%; - --text-sucess-subtle: 170, 57.1%, 91.8%; - - // Text size. - // Headings. - --text-h1: 3rem; - --text-h1-leading: 3.75rem; - --text-h1-tracking: -2%; - - --text-h2: 2.25rem; - --text-h2-leading: 2.75rem; - --text-h2-tracking: -2%; - - --text-h3: 1.875rem; - --text-h3-leading: 2.375rem; - --text-h3-tracking: initial; - - --text-h4: 1.25rem; - --text-h4-leading: 1.875rem; - --text-h4-tracking: initial; - - --text-h5: 1rem; - --text-h5-leading: 1.5rem; - --text-h5-tracking: initial; - - --text-h6: 0.875rem; - --text-h6-leading: 1.25rem; - --text-h6-tracking: initial; - - // Text. - --text-xl: 1.25rem; - --text-xl-leading: 1.875rem; - --text-xl-tracking: initial; - - --text-lg: 1rem; - --text-lg-leading: 1.5rem; - --text-lg-tracking: initial; - - --text-md: 0.875rem; - --text-md-leading: 1.375rem; - --text-md-tracking: initial; - - --text-sm: 0.75rem; - --text-sm-leading: 1.125rem; - --text-sm-tracking: initial; - } -} +// Some global styles might end up here. +// We'll see how it goes. \ No newline at end of file diff --git a/packages/admin-ui/src/theme.scss b/packages/admin-ui/src/theme.scss new file mode 100644 index 00000000000..38fc311d752 --- /dev/null +++ b/packages/admin-ui/src/theme.scss @@ -0,0 +1,209 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); + +@layer base { + :root { + // Background colors. + --bg-destructive-default: 0, 71%, 48.6%; + --bg-destructive-disabled: 1, 83.2%, 76.7%; + --bg-destructive-muted: 0, 66.3%, 62.7%; + --bg-destructive-strong: 0, 76.4%, 38.2%; + --bg-destructive-subtle: 0, 100%, 96.9%; + --bg-destructive-xstrong: 0, 83.6%, 21.6%; + + --bg-neutral-base: 0, 0%, 100%; + --bg-neutral-dark: 214, 12.3%, 11.2%; + --bg-neutral-dimmed: 220, 11.1%, 94.7%; + --bg-neutral-disabled: 220, 11.1%, 94.7%; + --bg-neutral-light: 210, 14.3%, 97.3%; + --bg-neutral-muted: 225, 16.7%, 90.6%; + --bg-neutral-strong: 219, 12.1%, 77.3%; + --bg-neutral-subtle: 180, 11.1%, 98.2%; + --bg-neutral-xstrong: 213, 10.1%, 38.8%; + + --bg-primary-default: 15, 95.6%, 55.9%; + --bg-primary-disabled: 14, 94.7%, 77.8%; + --bg-primary-muted: 14, 94.7%, 77.8%; + --bg-primary-strong: 14, 94.1%, 40%; + --bg-primary-subtle: 5, 100%, 97.5%; + --bg-primary-xstrong: 14, 100%, 25.5%; + + --bg-secondary-default: 170, 100%, 37.5%; + --bg-secondary-disabled: 169, 59.8%, 64.9%; + --bg-secondary-muted: 169, 59.8%, 64.9%; + --bg-secondary-strong: 165, 100%, 28.6%; + --bg-secondary-subtle: 170, 57.1%, 91.8%; + --bg-secondary-xstrong: 160, 100%, 14.5%; + + --bg-success-default: 170, 100%, 37.5%; + --bg-success-disabled: 168, 58.1%, 79.4%; + --bg-success-muted: 169, 59.8%, 64.9%; + --bg-success-strong: 165, 100%, 28.6%; + --bg-success-subtle: 170, 57.1%, 91.8%; + --bg-success-xstrong: 160, 100%, 14.5%; + + --bg-warning-default: 45, 95.7%, 63.7%; + --bg-warning-disabled: 45, 96.9%, 87.5%; + --bg-warning-muted: 45, 95.1%, 75.9%; + --bg-warning-strong: 45, 100%, 37.3%; + --bg-warning-subtle: 43, 100%, 96.5%; + --bg-warning-xstrong: 45, 98.2%, 21.6%; + + // Border color. + --border-accent-default: 15, 95.6%, 55.9%; + --border-accent-dimmed: 15, 94.2%, 86.5%; + --border-accent-subtle: 5, 100%, 97.5%; + + --border-destructive-default: 0, 71%, 48.6%; + + --border-neutral-black: 214, 12.3%, 11.2%; + --border-neutral-dark: 215, 9.6%, 51%; + --border-neutral-dimmed: 220, 11.1%, 94.7%; + --border-neutral-muted: 219, 12.1%, 77.3%; + --border-neutral-strong: 218, 10.7%, 65.3%; + --border-neutral-subtle: 210, 14.3%, 97.3%; + + --border-success-default: 170, 100%, 37.5%; + + // Border radius. + --radius-lg: 16px; + --radius-md: 8px; + --radius-sm: 4px; + --radius-xl: 24px; + --radius-xs: 2px; + --radius-xxl: 36px; + + // Border width. + --border-width-md: 2px; + --border-width-sm: 1px; + + // Fill. + --fill-accent-default: 15, 95.6%, 55.9%; + + --fill-destructive: 0, 71%, 48.6%; + + --fill-neutral-base: 0, 0%, 100%; + --fill-neutral-dark: 215, 11.1%, 21.2%; + --fill-neutral-disabled: 219, 12.1%, 77.3%; + --fill-neutral-strong: 218, 10.7%, 65.3%; + --fill-neutral-xstrong: 213, 10.1%, 38.8%; + + --fill-success: 170, 100%, 37.5%; + + --fill-warning: 45, 95.7%, 63.7%; + + // Font. + --font-sans: "Inter", sans-serif; + + // Margin. + --margin-lg: 24px; + --margin-md: 16px; + --margin-sm: 8px; + --margin-xl: 32px; + --margin-xs: 4px; + --margin-xxl: 32px; + + // Padding. + --padding-lg: 24px; + --padding-md: 16px; + --padding-md-plus: 20px; + --padding-none: 0px; + --padding-sm: 8px; + --padding-sm-extra: 12px; + --padding-sm-plus: 10px; + --padding-xl: 32px; + --padding-xs: 4px; + --padding-xs-plus: 6px; + --padding-xxl: 48px; + --padding-xxs: 2px; + + // Shadow. + --shadow-flat: 0px; + --shadow-lg: 16px; + --shadow-md: 8px; + --shadow-sm: 4px; + --shadow-xl: 24px; + --shadow-xxl: 48px; + + // Spacing. + --spacing-3xl: 64px; + --spacing-lg: 24px; + --spacing-md: 16px; + --spacing-md-plus: 20px; + --spacing-none: 0px; + --spacing-sm: 8px; + --spacing-sm-extra: 12px; + --spacing-sm-plus: 10px; + --spacing-xl: 32px; + --spacing-xs: 4px; + --spacing-xs-plus: 6px; + --spacing-xxl: 48px; + --spacing-xxs: 2px; + + // Text color. + --text-accent-muted: 14, 94.7%, 77.8%; + --text-accent-primary: 15, 95.6%, 55.9%; + --text-accent-subtle: 5, 100%, 97.5%; + + --text-destructive-muted: 1, 83.2%, 76.7%; + --text-destructive-primary: 0, 71%, 48.6%; + --text-destructive-subtle: 0, 100%, 96.9%; + + --text-neutral-dimmed: 219, 12.1%, 77.3%; + --text-neutral-disabled: 219, 12.1%, 77.3%; + --text-neutral-light: 0, 0%, 100%; + --text-neutral-muted: 218, 10.7%, 65.3%; + --text-neutral-primary: 214, 12.3%, 11.2%; + --text-neutral-strong: 213, 10.1%, 38.8%; + + --text-sucess-muted: 169, 59.8%, 64.9%; + --text-sucess-primary: 170, 100%, 37.5%; + --text-sucess-subtle: 170, 57.1%, 91.8%; + + // Text size. + // Headings. + --text-h1: 3rem; + --text-h1-leading: 3.75rem; + --text-h1-tracking: -2%; + + --text-h2: 2.25rem; + --text-h2-leading: 2.75rem; + --text-h2-tracking: -2%; + + --text-h3: 1.875rem; + --text-h3-leading: 2.375rem; + --text-h3-tracking: initial; + + --text-h4: 1.25rem; + --text-h4-leading: 1.875rem; + --text-h4-tracking: initial; + + --text-h5: 1rem; + --text-h5-leading: 1.5rem; + --text-h5-tracking: initial; + + --text-h6: 0.875rem; + --text-h6-leading: 1.25rem; + --text-h6-tracking: initial; + + // Text. + --text-xl: 1.25rem; + --text-xl-leading: 1.875rem; + --text-xl-tracking: initial; + + --text-lg: 1rem; + --text-lg-leading: 1.5rem; + --text-lg-tracking: initial; + + --text-md: 0.875rem; + --text-md-leading: 1.375rem; + --text-md-tracking: initial; + + --text-sm: 0.75rem; + --text-sm-leading: 1.125rem; + --text-sm-tracking: initial; + } +} diff --git a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss index 086b65a2dfd..fc9bebb5202 100644 --- a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss +++ b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss @@ -1,3 +1,5 @@ +// OLD - Will probably be removed. + // Webiny theme variables $webiny-theme-light-primary: #fa5723; $webiny-theme-light-secondary: #00ccb0; @@ -15,3 +17,10 @@ $webiny-theme-typography-font-family: "Source Sans Pro"; // Import admin app styles @import "~@webiny/app-serverless-cms/styles.scss"; + +// NEW +// Base styles. +@import "~@webiny/admin-ui/styles.scss"; + +// The default theme. Learn more: https://webiny.link/admin-themes. +@import "~@webiny/admin-ui/theme.scss"; \ No newline at end of file From 1e88e4435f6ab079d94106e0db79cdac75666e0f Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 31 Oct 2024 05:57:30 +0100 Subject: [PATCH 57/62] wip --- packages/admin-ui/.storybook/preview.ts | 3 +-- packages/admin-ui/.storybook/styles.scss | 1 - .../{createStylesScss.js => createThemeScss.js} | 4 ++-- .../templates/{styles.scss.txt => theme.scss.txt} | 2 ++ 4 files changed, 5 insertions(+), 5 deletions(-) delete mode 100644 packages/admin-ui/.storybook/styles.scss rename packages/admin-ui/scripts/importFromFigma/{createStylesScss.js => createThemeScss.js} (98%) rename packages/admin-ui/scripts/importFromFigma/templates/{styles.scss.txt => theme.scss.txt} (84%) diff --git a/packages/admin-ui/.storybook/preview.ts b/packages/admin-ui/.storybook/preview.ts index 5c8e442c746..2aef0f83262 100644 --- a/packages/admin-ui/.storybook/preview.ts +++ b/packages/admin-ui/.storybook/preview.ts @@ -1,7 +1,6 @@ import type { Preview } from "@storybook/react"; -import "./styles.scss"; -import "../src/styles.scss"; +import "../src/theme.scss"; const preview: Preview = { parameters: { diff --git a/packages/admin-ui/.storybook/styles.scss b/packages/admin-ui/.storybook/styles.scss deleted file mode 100644 index de6a461e551..00000000000 --- a/packages/admin-ui/.storybook/styles.scss +++ /dev/null @@ -1 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); diff --git a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js b/packages/admin-ui/scripts/importFromFigma/createThemeScss.js similarity index 98% rename from packages/admin-ui/scripts/importFromFigma/createStylesScss.js rename to packages/admin-ui/scripts/importFromFigma/createThemeScss.js index c092ff27553..7bc3b65cefa 100644 --- a/packages/admin-ui/scripts/importFromFigma/createStylesScss.js +++ b/packages/admin-ui/scripts/importFromFigma/createThemeScss.js @@ -1,8 +1,8 @@ const fs = require("fs"); const createStylesScss = normalizedFigmaExport => { - // Generate `styles.scss` file. - let stylesScss = fs.readFileSync(__dirname + "/templates/styles.scss.txt", "utf8"); + // Generate `theme.scss` file. + let stylesScss = fs.readFileSync(__dirname + "/templates/theme.scss.txt", "utf8"); // 1. Background color. { diff --git a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/theme.scss.txt similarity index 84% rename from packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt rename to packages/admin-ui/scripts/importFromFigma/templates/theme.scss.txt index 0829b61186a..18d28fb4464 100644 --- a/packages/admin-ui/scripts/importFromFigma/templates/styles.scss.txt +++ b/packages/admin-ui/scripts/importFromFigma/templates/theme.scss.txt @@ -2,6 +2,8 @@ @tailwind components; @tailwind utilities; +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); + @layer base { :root { // Background colors. From 2576141b93e97527139db73d1c4c7e127dd700ce Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 31 Oct 2024 05:58:41 +0100 Subject: [PATCH 58/62] wip --- packages/admin-ui/scripts/importFromFigma.js | 6 +++--- .../admin-ui/scripts/importFromFigma/createThemeScss.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/admin-ui/scripts/importFromFigma.js b/packages/admin-ui/scripts/importFromFigma.js index 7d19a1c723d..6688b8ad4bd 100644 --- a/packages/admin-ui/scripts/importFromFigma.js +++ b/packages/admin-ui/scripts/importFromFigma.js @@ -4,7 +4,7 @@ const path = require("path"); const aliasTokensExport = require("./importFromFigma/exports/Alias tokens.json"); const { normalizeFigmaExport } = require("./importFromFigma/normalizeFigmaExport"); const { createTailwindConfigTheme } = require("./importFromFigma/createTailwindConfigTheme"); -const { createStylesScss } = require("./importFromFigma/createStylesScss"); +const { createThemeScss } = require("./importFromFigma/createThemeScss"); const { formatCode } = require("./importFromFigma/formatCode"); const saveFileAndFormat = async (filePath, content) => { @@ -15,13 +15,13 @@ const saveFileAndFormat = async (filePath, content) => { (async () => { const normalizedFigmaExport = normalizeFigmaExport(aliasTokensExport); const tailwindConfigTheme = createTailwindConfigTheme(normalizedFigmaExport); - const stylesScss = createStylesScss(normalizedFigmaExport); + const stylesScss = createThemeScss(normalizedFigmaExport); const paths = { cwd: process.cwd(), normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"), createTailwindConfigTheme: path.join(__dirname, "../tailwind.config.theme.js"), - stylesScss: path.join(__dirname, "../src/styles.scss") + stylesScss: path.join(__dirname, "../src/theme.scss") }; console.log("Storing..."); diff --git a/packages/admin-ui/scripts/importFromFigma/createThemeScss.js b/packages/admin-ui/scripts/importFromFigma/createThemeScss.js index 7bc3b65cefa..f0c2867714e 100644 --- a/packages/admin-ui/scripts/importFromFigma/createThemeScss.js +++ b/packages/admin-ui/scripts/importFromFigma/createThemeScss.js @@ -1,6 +1,6 @@ const fs = require("fs"); -const createStylesScss = normalizedFigmaExport => { +const createThemeScss = normalizedFigmaExport => { // Generate `theme.scss` file. let stylesScss = fs.readFileSync(__dirname + "/templates/theme.scss.txt", "utf8"); @@ -221,4 +221,4 @@ const createStylesScss = normalizedFigmaExport => { return stylesScss; }; -module.exports = { createStylesScss }; +module.exports = { createThemeScss }; From ea3b6ede79ad370e09f5a31af7be069623f60a28 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 31 Oct 2024 06:08:54 +0100 Subject: [PATCH 59/62] wip --- packages/admin-ui/tailwind.config.js | 57 ++++++++++++++-------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index e966459d131..91d811bbd30 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -32,39 +32,38 @@ module.exports = { "2xl": "1400px" } }, - extend: { - backgroundColor, - borderColor, - borderRadius, - borderWidth, - fill, - fontSize, - margin, - padding, - shadow, - spacing, - textColor, - fontFamily: { - sans: ["var(--font-sans)", ...fontFamily.sans], - serif: ["var(--font-serif)", ...fontFamily.serif], - mono: ["var(--font-mono)", ...fontFamily.mono] - }, + backgroundColor, + borderColor, + borderRadius, + borderWidth, + fill, + fontSize, + margin, + padding, + shadow, + spacing, + textColor, + + fontFamily: { + sans: ["var(--font-sans)", ...fontFamily.sans], + serif: ["var(--font-serif)", ...fontFamily.serif], + mono: ["var(--font-mono)", ...fontFamily.mono] + }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" } - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" } - } + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" } }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out" + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" } } + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out" } }, plugins: [require("tailwindcss-animate")] From 2e844f49b6fb54d9750ef6f54038a3d27fd9689d Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 31 Oct 2024 06:13:45 +0100 Subject: [PATCH 60/62] wip --- apps/admin/src/App.scss | 2 +- packages/admin-ui/src/styles.scss | 2 +- packages/admin-ui/tailwind.config.js | 2 +- .../cwp-template-aws/template/common/apps/admin/src/App.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/admin/src/App.scss b/apps/admin/src/App.scss index 9db8cb92f8a..37bfacb9cc4 100644 --- a/apps/admin/src/App.scss +++ b/apps/admin/src/App.scss @@ -6,4 +6,4 @@ @import "~@webiny/admin-ui/styles.scss"; // The default theme. Learn more: https://webiny.link/admin-themes. -@import "~@webiny/admin-ui/theme.scss"; \ No newline at end of file +@import "~@webiny/admin-ui/theme.scss"; diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index e5621db4931..bcfea48aa09 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -1,2 +1,2 @@ // Some global styles might end up here. -// We'll see how it goes. \ No newline at end of file +// We'll see how it goes. diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 91d811bbd30..61d18db3891 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -17,7 +17,7 @@ const { padding, shadow, spacing, - textColor, + textColor } = require("./tailwind.config.theme"); /** @type {import('tailwindcss').Config} */ diff --git a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss index fc9bebb5202..cfac00fa601 100644 --- a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss +++ b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss @@ -23,4 +23,4 @@ $webiny-theme-typography-font-family: "Source Sans Pro"; @import "~@webiny/admin-ui/styles.scss"; // The default theme. Learn more: https://webiny.link/admin-themes. -@import "~@webiny/admin-ui/theme.scss"; \ No newline at end of file +@import "~@webiny/admin-ui/theme.scss"; From 5626e88e22e5708739b2cf8e79776a0f5581aac6 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 31 Oct 2024 09:51:44 +0100 Subject: [PATCH 61/62] wip --- packages/admin-ui/src/utils.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/admin-ui/src/utils.ts b/packages/admin-ui/src/utils.ts index 35edc5647fc..d52a8ce4c86 100644 --- a/packages/admin-ui/src/utils.ts +++ b/packages/admin-ui/src/utils.ts @@ -1,6 +1,13 @@ import { clsx, type ClassValue } from "clsx"; import { generateId as baseGenerateId } from "@webiny/utils/generateId"; -import { twMerge } from "tailwind-merge"; +import { extendTailwindMerge } from "tailwind-merge"; +import { cva, type VariantProps } from "class-variance-authority"; + +const twMerge = extendTailwindMerge({ + override: { + theme: { borderWidth: ["sm", "md"] } + } +}); export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); @@ -12,3 +19,5 @@ export const generateId = (initialId?: string) => { } return "wby-" + baseGenerateId(4); }; + +export { cva, type VariantProps }; From b34dca6a6fb0db4c16b724a3eca0eef227c22de9 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 31 Oct 2024 09:54:28 +0100 Subject: [PATCH 62/62] wip --- packages/admin-ui/src/utils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/admin-ui/src/utils.ts b/packages/admin-ui/src/utils.ts index d52a8ce4c86..85b11dccbf6 100644 --- a/packages/admin-ui/src/utils.ts +++ b/packages/admin-ui/src/utils.ts @@ -2,6 +2,7 @@ import { clsx, type ClassValue } from "clsx"; import { generateId as baseGenerateId } from "@webiny/utils/generateId"; import { extendTailwindMerge } from "tailwind-merge"; import { cva, type VariantProps } from "class-variance-authority"; +export { makeDecoratable } from "@webiny/react-composition"; const twMerge = extendTailwindMerge({ override: {