diff --git a/.github/workflows/build-figma-tokens.yml b/.github/workflows/build-figma-tokens.yml deleted file mode 100644 index 08253e5f8878..000000000000 --- a/.github/workflows/build-figma-tokens.yml +++ /dev/null @@ -1,37 +0,0 @@ -name: Build and commit Figma tokens - -on: - push: - branches: - - figma-tokens - paths: - - packages/design-system/src/__generated__/figma-design-tokens.json - -jobs: - main: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v4 - with: - # We don't need a token to push from an action, - # but we need it if want the commit to trigger other workflows as normal - token: ${{ secrets.ACCESS_TOKEN_FOR_FIGMA_TOKENS }} - - - uses: ./.github/actions/ci-setup - - - name: Configure git - run: | - git config --global user.name 'Bot (build-figma-tokens.yml)' - git config --global user.email 'bot@localhost' - - - name: Switch branch - run: git checkout figma-tokens - - - name: Build tokens - run: pnpm build-figma-tokens - - - name: Commit and push - run: | - [[ -z `git status | grep figma-design-tokens.ts` ]] || git commit -m "Update figma-design-tokens.ts" packages/design-system/src/__generated__/figma-design-tokens.ts - git push diff --git a/.github/workflows/re-create-figma-tokens-branch.yml b/.github/workflows/re-create-figma-tokens-branch.yml deleted file mode 100644 index 95d409ad50d8..000000000000 --- a/.github/workflows/re-create-figma-tokens-branch.yml +++ /dev/null @@ -1,23 +0,0 @@ -name: Re-create branch for Figma tokens - -on: delete - -permissions: - contents: write - -jobs: - main: - runs-on: ubuntu-latest - - # run if figma-tokens was deleted - if: ${{ github.event.ref == 'figma-tokens'}} - - steps: - - name: Checkout - uses: actions/checkout@v4 - - - name: Re-create branch - run: | - git checkout main - git checkout -b figma-tokens - git push --set-upstream origin figma-tokens diff --git a/apps/builder/app/builder/features/style-panel/style-source/style-source-badge.tsx b/apps/builder/app/builder/features/style-panel/style-source/style-source-badge.tsx index cee45392c424..34d8e55d00b0 100644 --- a/apps/builder/app/builder/features/style-panel/style-source/style-source-badge.tsx +++ b/apps/builder/app/builder/features/style-panel/style-source/style-source-badge.tsx @@ -16,10 +16,10 @@ export const StyleSourceBadge = styled(Text, { variants: { source: { local: { - backgroundColor: theme.colors.backgroundStyleSourceLocal, + backgroundColor: theme.colors.backgroundStyleSourceSelected, }, token: { - backgroundColor: theme.colors.backgroundStyleSourceToken, + backgroundColor: theme.colors.backgroundStyleSourceSelected, }, tag: { backgroundColor: theme.colors.backgroundStyleSourceTag, diff --git a/apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx b/apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx index 7b0e8d87e955..2f7316e6fc93 100644 --- a/apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx +++ b/apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx @@ -96,14 +96,14 @@ const StyleSourceContainer = styled(Box, { source: { local: { order: 1, - backgroundColor: theme.colors.backgroundStyleSourceLocal, + backgroundColor: theme.colors.backgroundStyleSourceSelected, [menuTriggerGradientVar]: - theme.colors.backgroundStyleSourceGradientLocal, + theme.colors.backgroundStyleSourceGradientSelected, }, token: { - backgroundColor: theme.colors.backgroundStyleSourceToken, + backgroundColor: theme.colors.backgroundStyleSourceSelected, [menuTriggerGradientVar]: - theme.colors.backgroundStyleSourceGradientToken, + theme.colors.backgroundStyleSourceGradientSelected, }, tag: { backgroundColor: theme.colors.backgroundStyleSourceTag, @@ -161,10 +161,10 @@ const StyleSourceState = styled(Text, { variants: { source: { local: { - backgroundColor: theme.colors.backgroundStyleSourceLocal, + backgroundColor: theme.colors.backgroundStyleSourceSelected, }, token: { - backgroundColor: theme.colors.backgroundStyleSourceToken, + backgroundColor: theme.colors.backgroundStyleSourceSelected, }, tag: { backgroundColor: theme.colors.backgroundStyleSourceTag, diff --git a/apps/builder/app/builder/shared/binding-popover.tsx b/apps/builder/app/builder/shared/binding-popover.tsx index 6c0afac1c3be..c3cb1d3db42d 100644 --- a/apps/builder/app/builder/shared/binding-popover.tsx +++ b/apps/builder/app/builder/shared/binding-popover.tsx @@ -327,12 +327,12 @@ const BindingButton = forwardRef< width: 12, height: 12, borderRadius: "50%", - backgroundColor: theme.colors.backgroundStyleSourceToken, + backgroundColor: theme.colors.backgroundStyleSourceSelected, display: "flex", justifyContent: "center", alignItems: "center", "&[data-variant=bound]": { - backgroundColor: theme.colors.backgroundStyleSourceLocal, + backgroundColor: theme.colors.backgroundStyleSourceSelected, }, "&[data-variant=overwritten]": { backgroundColor: theme.colors.borderOverwrittenMain, diff --git a/fixtures/ssg-cloudflare-pages/pages/another-page/+Page.tsx b/fixtures/ssg-cloudflare-pages/pages/another-page/+Page.tsx index b2fa65b703a4..9dd77cf5e3fe 100644 --- a/fixtures/ssg-cloudflare-pages/pages/another-page/+Page.tsx +++ b/fixtures/ssg-cloudflare-pages/pages/another-page/+Page.tsx @@ -1,3 +1,4 @@ +import { type ComponentProps, memo, useMemo } from "react"; import type { PageContext } from "vike/types"; import { PageSettingsMeta, @@ -12,21 +13,40 @@ import { siteName, } from "../../app/__generated__/[another-page]._index"; +const getPageKey = (url: string) => { + const { origin, pathname, search } = new URL(url); + return `${origin}${pathname}${search}`; +}; + +const PageBoundary = memo( + ({ pageKey, system }: ComponentProps & { pageKey: string }) => { + // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages + return ; + }, + // Vike can rerender the current page during client-side navigation and + // hash-only URL updates. Keep the generated page out of that render path, + // but let actual page URL changes remount it. + (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey +); + const PageComponent = ({ data }: { data: PageContext["data"] }) => { const { system, resources, url, pageMeta } = data; + const pageKey = getPageKey(url); + const sdkContext = useMemo( + () => ({ + imageLoader, + assetBaseUrl, + resources, + breakpoints, + onError: console.error, + }), + [resources] + ); + return ( - + - {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */} - + { + const { origin, pathname, search } = new URL(url); + return `${origin}${pathname}${search}`; +}; + +const PageBoundary = memo( + ({ pageKey, system }: ComponentProps & { pageKey: string }) => { + // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages + return ; + }, + // Vike can rerender the current page during client-side navigation and + // hash-only URL updates. Keep the generated page out of that render path, + // but let actual page URL changes remount it. + (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey +); + const PageComponent = ({ data }: { data: PageContext["data"] }) => { const { system, resources, url, pageMeta } = data; + const pageKey = getPageKey(url); + const sdkContext = useMemo( + () => ({ + imageLoader, + assetBaseUrl, + resources, + breakpoints, + onError: console.error, + }), + [resources] + ); + return ( - + - {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */} - + { ); if (root === undefined) { - root = createRoot(document.documentElement); + root = hydrateRoot(document.documentElement, htmlContent); + return; } document.documentElement.lang = lang; root.render(htmlContent); diff --git a/fixtures/ssg-netlify-by-project-id/pages/index/+Page.tsx b/fixtures/ssg-netlify-by-project-id/pages/index/+Page.tsx index 0a55084475b8..f65c32c4771e 100644 --- a/fixtures/ssg-netlify-by-project-id/pages/index/+Page.tsx +++ b/fixtures/ssg-netlify-by-project-id/pages/index/+Page.tsx @@ -1,3 +1,4 @@ +import { type ComponentProps, memo, useMemo } from "react"; import type { PageContext } from "vike/types"; import { PageSettingsMeta, @@ -8,21 +9,40 @@ import { LinkCurrentUrlContext } from "@webstudio-is/sdk-components-react"; import { assetBaseUrl, imageLoader } from "../../app/constants.mjs"; import { Page, breakpoints, siteName } from "../../app/__generated__/_index"; +const getPageKey = (url: string) => { + const { origin, pathname, search } = new URL(url); + return `${origin}${pathname}${search}`; +}; + +const PageBoundary = memo( + ({ pageKey, system }: ComponentProps & { pageKey: string }) => { + // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages + return ; + }, + // Vike can rerender the current page during client-side navigation and + // hash-only URL updates. Keep the generated page out of that render path, + // but let actual page URL changes remount it. + (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey +); + const PageComponent = ({ data }: { data: PageContext["data"] }) => { const { system, resources, url, pageMeta } = data; + const pageKey = getPageKey(url); + const sdkContext = useMemo( + () => ({ + imageLoader, + assetBaseUrl, + resources, + breakpoints, + onError: console.error, + }), + [resources] + ); + return ( - + - {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */} - + { + const { origin, pathname, search } = new URL(url); + return `${origin}${pathname}${search}`; +}; + +const PageBoundary = memo( + ({ pageKey, system }: ComponentProps & { pageKey: string }) => { + // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages + return ; + }, + // Vike can rerender the current page during client-side navigation and + // hash-only URL updates. Keep the generated page out of that render path, + // but let actual page URL changes remount it. + (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey +); + const PageComponent = ({ data }: { data: PageContext["data"] }) => { const { system, resources, url, pageMeta } = data; + const pageKey = getPageKey(url); + const sdkContext = useMemo( + () => ({ + imageLoader, + assetBaseUrl, + resources, + breakpoints, + onError: console.error, + }), + [resources] + ); + return ( - + - {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */} - + { ); if (root === undefined) { - root = createRoot(document.documentElement); + root = hydrateRoot(document.documentElement, htmlContent); + return; } document.documentElement.lang = lang; root.render(htmlContent); diff --git a/package.json b/package.json index d1d3df70e25a..7d54d3ba4d76 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "storybook:dev": "storybook dev -p 6006", "storybook:build": "storybook build", "migrations": "pnpm --filter=@webstudio-is/prisma-client generate && pnpm --filter=./packages/prisma-client migrations --dev --cwd ../../apps/builder", - "build-figma-tokens": "cd packages/design-system && pnpm build-figma-tokens", "prepare": "which git && git config core.hooksPath .git/hooks/ && simple-git-hooks || echo git not installed", "local:version-snapshot": "pnpm -r exec pnpm version prepatch --preid $(cat /dev/urandom | LC_ALL=C tr -dc 'a-z' | fold -w 8 | head -n 1)", "local:publish-snapshot": "pnpm -r publish --access public --no-git-checks --registry http://localhost:4873", diff --git a/packages/cli/templates/ssg/app/route-templates/html/+Page.tsx b/packages/cli/templates/ssg/app/route-templates/html/+Page.tsx index d959cb6a3206..1778f4f60641 100644 --- a/packages/cli/templates/ssg/app/route-templates/html/+Page.tsx +++ b/packages/cli/templates/ssg/app/route-templates/html/+Page.tsx @@ -1,3 +1,4 @@ +import { type ComponentProps, memo, useMemo } from "react"; import type { PageContext } from "vike/types"; import { PageSettingsMeta, @@ -8,21 +9,40 @@ import { LinkCurrentUrlContext } from "@webstudio-is/sdk-components-react"; import { assetBaseUrl, imageLoader } from "__CONSTANTS__"; import { Page, breakpoints, siteName } from "__CLIENT__"; +const getPageKey = (url: string) => { + const { origin, pathname, search } = new URL(url); + return `${origin}${pathname}${search}`; +}; + +const PageBoundary = memo( + ({ pageKey, system }: ComponentProps & { pageKey: string }) => { + // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages + return ; + }, + // Vike can rerender the current page during client-side navigation and + // hash-only URL updates. Keep the generated page out of that render path, + // but let actual page URL changes remount it. + (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey +); + const PageComponent = ({ data }: { data: PageContext["data"] }) => { const { system, resources, url, pageMeta } = data; + const pageKey = getPageKey(url); + const sdkContext = useMemo( + () => ({ + imageLoader, + assetBaseUrl, + resources, + breakpoints, + onError: console.error, + }), + [resources] + ); + return ( - + - {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */} - + { ); if (root === undefined) { - root = createRoot(document.documentElement); + root = hydrateRoot(document.documentElement, htmlContent); + return; } document.documentElement.lang = lang; root.render(htmlContent); diff --git a/packages/design-system/bin/transform-figma-tokens.ts b/packages/design-system/bin/transform-figma-tokens.ts deleted file mode 100644 index 9cc88648c6e1..000000000000 --- a/packages/design-system/bin/transform-figma-tokens.ts +++ /dev/null @@ -1,336 +0,0 @@ -import { readFileSync, writeFileSync, existsSync, rmSync } from "node:fs"; -import { execSync } from "node:child_process"; -import { camelCase } from "change-case"; -import { z, type ZodType, type ZodTypeDef } from "zod"; - -const SOURCE_FILE = "./src/__generated__/figma-design-tokens.json"; -const TMP_OUTPUT_FILE = "./src/__generated__/figma-design-tokens.tmp"; -const OUTPUT_FILE = "./src/__generated__/figma-design-tokens.ts"; - -// https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping -// (hopefully the fonts we use, Figma, Tokens plugin — all follow this convention) -const fontWeightMapping = { - thin: 100, - hairline: 100, - extralight: 200, - ultralight: 200, - light: 300, - normal: 400, - regular: 400, - medium: 500, - semibold: 600, - demibold: 600, - bold: 700, - extrabold: 800, - ultrabold: 800, - black: 900, - heavy: 900, - extrablack: 950, - ultrablack: 950, -} as const; - -const fontFamilies = { - Inter: - "Inter Variable, InterVariable, Inter, -apple-system, system-ui, sans-serif", - Manrope: "Manrope Variable, ManropeVariable, Manrope, sans-serif", - Roboto: "Roboto Mono, RobotoMono, menlo, monospace", -} as const; -const fontFamilyMapping = { - ...fontFamilies, - InterVariable: fontFamilies.Inter, - "Inter Variable": fontFamilies.Inter, - ManropeVariable: fontFamilies.Manrope, - "Manrope Variable": fontFamilies.Manrope, - "Roboto Mono": fontFamilies.Roboto, -} as const; - -const TreeLeaf = z.object({ - type: z.string(), - value: z.unknown(), -}); - -const FontWeight = z.preprocess( - (x) => (typeof x === "string" ? x.toLowerCase().replace(/\s+/g, "") : x), - z.enum(Object.keys(fontWeightMapping) as [keyof typeof fontWeightMapping]) -); - -const FontFamily = z.string(); - -const LineHeight = z.union([z.string(), z.number()]); - -const FontSize = z.number(); - -const LetterSpacing = z.union([z.string(), z.number()]); - -const TextCase = z.enum(["uppercase", "lowercase", "capitalize", "none"]); - -const TextDecoration = z.enum([ - "none", - "underline", - "overline", - "line-through", -]); - -const Dimention = z.union([z.string(), z.number()]); - -const Typography = z.object({ - fontFamily: z.unknown(), - fontWeight: z.unknown(), - lineHeight: z.unknown(), - fontSize: z.unknown(), - letterSpacing: z.unknown(), - textCase: z.unknown(), - textDecoration: z.unknown(), - paragraphIndent: z.unknown(), -}); - -const SingleShadow = z.object({ - color: z.string(), - type: z.enum(["dropShadow", "innerShadow"]), - x: z.number(), - y: z.number(), - blur: z.number(), - spread: z.number(), -}); - -const Shadow = z.union([SingleShadow, z.array(SingleShadow)]); - -const parse = ( - path: string[], - value: unknown, - schema: ZodType -) => { - const result = schema.safeParse(value); - if (result.success === false) { - throw new Error( - `Could not parse ${path.join(" > ")}. Got a error: ${ - result.error.message - }` - ); - } - return result.data; -}; - -const printShadow = (path: string[], unparsedValue: unknown) => { - const shadow = parse(path, unparsedValue, Shadow); - const printSingle = (shadow: z.infer) => { - return [ - shadow.type === "innerShadow" ? "inset" : "", - `${shadow.x}px`, - `${shadow.y}px`, - `${shadow.blur}px`, - `${shadow.spread}px`, - `${shadow.color}`, - ] - .join(" ") - .trim(); - }; - return Array.isArray(shadow) - ? shadow.map(printSingle).join(", ") - : printSingle(shadow); -}; - -const printLineHeight = (path: string[], unparsedValue: unknown) => { - const value = parse(path, unparsedValue, LineHeight); - - if (typeof value === "number") { - return `${value}px`; - } - // @todo: figure out how to convert AUTO to pixels or something - // https://discord.com/channels/955905230107738152/1065939291479478343 - if (value === "AUTO") { - return; - } - if (value.endsWith("%")) { - return value; - } - throw new Error( - `Could not parse "${path.join(" > ")} > lineHeight": ${value}` - ); -}; - -const printLetterSpacing = (path: string[], unparsedValue: unknown) => { - const value = parse(path, unparsedValue, LetterSpacing); - - if (typeof value === "number") { - return `${value}px`; - } - if (/^-?[0-9]+(.[0-9]+)?%$/.test(value)) { - const fraction = Number.parseFloat(value) / 100; - return `${fraction}em`; - } - throw new Error( - `Could not parse "${path.join(" > ")} > letterSpacing": ${value}` - ); -}; - -const printFontWeight = (path: string[], unparsedValue: unknown) => { - const value = parse(path, unparsedValue, FontWeight); - return fontWeightMapping[value]; -}; - -const printFontFamily = (path: string[], unparsedValue: unknown) => { - const value = parse(path, unparsedValue, FontFamily); - return fontFamilyMapping[value as keyof typeof fontFamilyMapping] || value; -}; - -const printFontSize = (path: string[], unparsedValue: unknown) => { - const value = parse(path, unparsedValue, FontSize); - return `${value}px`; -}; - -const printTextCase = (path: string[], unparsedValue: unknown) => { - return parse(path, unparsedValue, TextCase); -}; - -const printTextDecoration = (path: string[], unparsedValue: unknown) => { - return parse(path, unparsedValue, TextDecoration); -}; - -const printDimension = (path: string[], unparsedValue: unknown) => { - const value = parse(path, unparsedValue, Dimention); - if (typeof value === "number") { - return `${value}px`; - } - return value; -}; - -const printTypography = (path: string[], unparsedValue: unknown) => { - const value = parse(path, unparsedValue, Typography); - return { - fontFamily: printFontFamily(path, value.fontFamily), - fontWeight: printFontWeight(path, value.fontWeight), - fontSize: printFontSize(path, value.fontSize), - lineHeight: printLineHeight(path, value.lineHeight), - letterSpacing: printLetterSpacing(path, value.letterSpacing), - textTransform: printTextCase(path, value.textCase), - textDecoration: printTextDecoration(path, value.textDecoration), - textIndent: printDimension(path, value.paragraphIndent), - }; -}; - -const printerByType = { - boxShadow: printShadow, - typography: printTypography, - letterSpacing: printLetterSpacing, - lineHeights: printLineHeight, - fontWeights: printFontWeight, - fontSizes: printFontSize, - fontFamilies: printFontFamily, - textCase: printTextCase, - textDecoration: printTextDecoration, - dimension: printDimension, -} as const; - -const traverse = ( - node: unknown, - nodePath: string[], - fn: (path: string[], type: string, value: unknown) => void -) => { - if (typeof node !== "object" || node === null) { - return; - } - - const asLeaf = TreeLeaf.safeParse(node); - if (asLeaf.success && asLeaf.data.value !== undefined) { - fn(nodePath, asLeaf.data.type, asLeaf.data.value); - return; - } - - for (const [key, value] of Object.entries(node)) { - traverse(value, [...nodePath, key], fn); - } -}; - -const pathToName = (path: string[], type: string) => { - const cleanedUp = camelCase(path.join(" ").replace(/[^a-z0-9]+/gi, " "), { - locale: false, - }); - - const withoutType = cleanedUp - .toLocaleLowerCase() - .startsWith(type.toLocaleLowerCase()) - ? cleanedUp.slice(type.length) - : cleanedUp; - - // apply camelCase again to make sure - // the first letter is lowercase after removing the type - return camelCase(withoutType, { locale: false }); -}; - -const detectBrokenLinks = (data: unknown) => { - const brokenLinks: string[] = []; - const testForBrokenLink = (path: string[], type: string, value: unknown) => { - if (typeof value === "string" && /^{.+}$/.test(value)) { - brokenLinks.push([type, ...path].join(" > ")); - } - }; - traverse(data, [], (path, type, value) => { - if (typeof value === "object" && value !== null) { - for (const [key, val] of Object.entries(value)) { - testForBrokenLink([...path, key], type, val); - } - } else { - testForBrokenLink(path, type, value); - } - }); - if (brokenLinks.length > 0) { - throw new Error(`Broken links found:\n${brokenLinks.join("\n")}`); - } -}; - -const main = () => { - execSync(`token-transformer ${SOURCE_FILE} ${TMP_OUTPUT_FILE}`, { - stdio: "inherit", - }); - - const data = JSON.parse(readFileSync(TMP_OUTPUT_FILE, "utf-8")); - - detectBrokenLinks(data); - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const byType = new Map>(); - - traverse(data, [], (path, type, value) => { - const record = byType.get(type) ?? {}; - byType.set(type, record); - - // no need to check for __proto__ (prototype polution) - // because we know pathToName returns a string without "_" - record[pathToName(path, type)] = - type in printerByType - ? printerByType[type as keyof typeof printerByType](path, value) - : value; - }); - - writeFileSync( - OUTPUT_FILE, - `// Generated by transform-figma-tokens.ts from ${SOURCE_FILE}\n\n` + - [...byType.entries()] - .map( - ([type, values]) => - `export const ${type} = ${JSON.stringify(values)} as const` - ) - .join(";\n\n") - ); - - execSync(`prettier --write ${OUTPUT_FILE}`, { stdio: "inherit" }); -}; - -const cleanup = () => { - if (existsSync(TMP_OUTPUT_FILE)) { - rmSync(TMP_OUTPUT_FILE); - } -}; - -try { - main(); -} catch (error) { - try { - cleanup(); - } catch (cleanupError) { - console.error("Cleanup failed:", cleanupError); - } - throw error; -} -cleanup(); diff --git a/packages/design-system/documentation/assets/1.png b/packages/design-system/documentation/assets/1.png deleted file mode 100644 index b57a070ca3cd..000000000000 Binary files a/packages/design-system/documentation/assets/1.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/10.png b/packages/design-system/documentation/assets/10.png deleted file mode 100644 index 39eea7115061..000000000000 Binary files a/packages/design-system/documentation/assets/10.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/11.png b/packages/design-system/documentation/assets/11.png deleted file mode 100644 index 964e9b9af6e7..000000000000 Binary files a/packages/design-system/documentation/assets/11.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/12.png b/packages/design-system/documentation/assets/12.png deleted file mode 100644 index 2dd7ae93b356..000000000000 Binary files a/packages/design-system/documentation/assets/12.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/13.png b/packages/design-system/documentation/assets/13.png deleted file mode 100644 index 7d96cea4c662..000000000000 Binary files a/packages/design-system/documentation/assets/13.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/14.png b/packages/design-system/documentation/assets/14.png deleted file mode 100644 index 18982d4dc158..000000000000 Binary files a/packages/design-system/documentation/assets/14.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/15.png b/packages/design-system/documentation/assets/15.png deleted file mode 100644 index 06673a421343..000000000000 Binary files a/packages/design-system/documentation/assets/15.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/16.png b/packages/design-system/documentation/assets/16.png deleted file mode 100644 index 80eee663fc00..000000000000 Binary files a/packages/design-system/documentation/assets/16.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/17.png b/packages/design-system/documentation/assets/17.png deleted file mode 100644 index 1fb025b65371..000000000000 Binary files a/packages/design-system/documentation/assets/17.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/2.png b/packages/design-system/documentation/assets/2.png deleted file mode 100644 index 001b5cd9f3ba..000000000000 Binary files a/packages/design-system/documentation/assets/2.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/3.png b/packages/design-system/documentation/assets/3.png deleted file mode 100644 index c3c1b2cd85ac..000000000000 Binary files a/packages/design-system/documentation/assets/3.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/4.png b/packages/design-system/documentation/assets/4.png deleted file mode 100644 index 2da32dca768a..000000000000 Binary files a/packages/design-system/documentation/assets/4.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/5.png b/packages/design-system/documentation/assets/5.png deleted file mode 100644 index 87f903a934c0..000000000000 Binary files a/packages/design-system/documentation/assets/5.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/6.png b/packages/design-system/documentation/assets/6.png deleted file mode 100644 index f4fdfbd33740..000000000000 Binary files a/packages/design-system/documentation/assets/6.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/7.png b/packages/design-system/documentation/assets/7.png deleted file mode 100644 index 9d454600ef40..000000000000 Binary files a/packages/design-system/documentation/assets/7.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/8.png b/packages/design-system/documentation/assets/8.png deleted file mode 100644 index a6430c21586a..000000000000 Binary files a/packages/design-system/documentation/assets/8.png and /dev/null differ diff --git a/packages/design-system/documentation/assets/9.png b/packages/design-system/documentation/assets/9.png deleted file mode 100644 index 2c23bb78d49e..000000000000 Binary files a/packages/design-system/documentation/assets/9.png and /dev/null differ diff --git a/packages/design-system/documentation/figma-design-tokens.md b/packages/design-system/documentation/figma-design-tokens.md deleted file mode 100644 index 9829682219f4..000000000000 --- a/packages/design-system/documentation/figma-design-tokens.md +++ /dev/null @@ -1,68 +0,0 @@ -# Figma Design Tokens - -We use [Tokens Studio for Figma](https://docs.tokens.studio) plugin to sync design tokens between Figma and our code. - -- [`__generated__/figma-design-tokens.json`](../src/__generated__/figma-design-tokens.json) — this file is synced with Figma by the plugin. -- [`__generated__/figma-design-tokens.ts`](../src/__generated__/figma-design-tokens.ts) — this file is generated from `figma-design-tokens.json` by [`transform-figma-tokens.ts`](../bin/transform-figma-tokens.ts) and contains data in format ready to be used in code. - -### Generating Access Token for sync - -1. Create a GitHub account if you don't have one. -2. Ask Oleg to add you to the `@webstudio-is/core` team if you are not already in it. -3. Go to https://github.com/settings/personal-access-tokens/new - - Under "Resource owner" choose "webstudio-is"
- - Under "Repository access" choose `webstudio-is/webstudio`
- - Set "Repository permissions" / "Contents" to "Read and write", and leave other permissions as is
- - Press "Generate token and request access" - - COPY THE TOKEN NOW AND SAVE IT SOMEWHERE SAFE (you won't be able to see it again) -4. Ask Oleg to approve your token using [this instruction](https://docs.github.com/en/organizations/managing-programmatic-access-to-your-organization/managing-requests-for-personal-access-tokens-in-your-organization). - -### Syncing via plugin UI - -1. Open a Figma file with design tokens, such as: https://www.figma.com/file/xCBegXEWxROLqA1Y31z2Xo/%F0%9F%93%96-Webstudio-Design-Docs -2. Click "Resources" in the topbar, then "Plugins" > "Tokens Studio for Figma" > Run
-3. You might be asked for an access token. You can generate one by following the instructions above, or ask someone to share theirs (not recommended). -4. You should be able to sync with GitHub using ↧ and ↥ buttons at the bottom of the plugin window.
- -In case sync provider is not configured in the plugin, you can add one using these settings: - -- Name: up to you -- Personal Access Token: token generated using the instructions above -- Repository: `webstudio-is/webstudio` -- Branch: `figma-tokens` -- File Path: `packages/design-system/src/__generated__/figma-design-tokens.json` -- baseUrl: leave empty - -### Creating a Pull Request - -After you've synced the tokens, the updates will be applied in the `figma-tokens` branch but not in the `main` branch yet. To merge the changes into `main`, you need to create a Pull Request. - -You don't have to create the Pull Request after every sync, you can do a bunch of syncs and then create a single PR with all the changes. - -Only one PR can be open at a time. If a PR is already open, you can continue to do syncs and the changes will be added to the existing PR. - -The process: - -1. At the last step of the sync you should see a "Create Pull Request" button. Click it.
-2. You'll be redirected to GitHub. Enter any title and description. You can describe the changes if they are not obvious. -3. Assign some reviewers. Feel free to always assign me (@rpominov). A Pull Request can't be merged without at least one review. Also you might need a developer's help if you've renamed or removed a token that was used in code.
-4. Click "Create pull request" button. (It might be hidden behind "Draft pull request")
-5. In the PR you can already see the changes in the deployed app
-6. Also, you can see the cnahges in a Storybook using this link https://figma-tokens--638affb61acca1e593c6e558.chromatic.com/ or by going to the bottom of PR page > "Show all checks" > "Storybook Publish: !webstudio-is/webstudio" > "Details"
-7. If you see "This branch is out-of-date with the base branch" message at the bottom, this means that when you look at the changes with the links above, you see all your changes applied, but some of the changes made by developers might not be applied. To fix that, click "Update branch" button, but make sure to choose "Update with merge commit"
-8. Sometimes a visual regression test may fail in the PR. Next sections describes how to fix it. - -### Reviewing failed visual regression tests - -1. At the bottom of the PR you may see a failed "Lost Pixel" check. Click on "Details"
-2. You'll be redirected to lost-pixel.com and it should ask you to login with your GitHub account. -3. After you login you should see a page like this, if not, repeat step 1
-4. Click on "Start review". You'll be presented with series of before/after screenshots of our demos
-5. Approve each screenshot unless there's something wrong -6. If everything is fine, click "Update baselines"
-7. An "update lost pixel baseline" commit should appear in the PR and the failed check should pass
- -### Links - -- https://docs.tokens.studio/sync/github — documentation on sync with GitHub by plugin authors -- https://github.com/tokens-studio/figma-plugin/issues/1285 — why we use fine-grained tokens unlike what the documentation above suggests diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 02c54a2bd1d2..6b4bbf1cfba5 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -6,7 +6,6 @@ "homepage": "https://webstudio.is", "type": "module", "scripts": { - "build-figma-tokens": "tsx ./bin/transform-figma-tokens.ts", "typecheck": "tsgo --noEmit -p tsconfig.typecheck.json", "test": "vitest run" }, @@ -68,7 +67,6 @@ "match-sorter": "^8.0.0", "react-colorful": "^5.6.1", "react-hot-toast": "^2.5.1", - "token-transformer": "^0.0.28", "type-fest": "^4.37.0", "use-debounce": "^10.0.4", "warn-once": "^0.1.1" diff --git a/packages/design-system/src/__generated__/figma-design-tokens.json b/packages/design-system/src/__generated__/figma-design-tokens.json deleted file mode 100644 index 09549c35e6f7..000000000000 --- a/packages/design-system/src/__generated__/figma-design-tokens.json +++ /dev/null @@ -1,1498 +0,0 @@ -{ - "global": { - "menu drop shadow": { - "value": [ - { - "color": "#0000001a", - "type": "dropShadow", - "x": "0", - "y": "2", - "blur": "7", - "spread": "0" - }, - { - "color": "#0000004d", - "type": "dropShadow", - "x": "0", - "y": "5", - "blur": "17", - "spread": "0" - } - ], - "type": "boxShadow" - }, - "fontFamilies": { - "inter": { - "value": "Inter", - "type": "fontFamilies" - }, - "manrope": { - "value": "Manrope", - "type": "fontFamilies" - }, - "roboto-mono": { - "value": "Roboto Mono", - "type": "fontFamilies" - } - }, - "lineHeights": { - "0": { - "value": "16", - "type": "lineHeights" - }, - "1": { - "value": "8", - "type": "lineHeights" - }, - "2": { - "value": "12", - "type": "lineHeights" - }, - "3": { - "value": "10", - "type": "lineHeights" - }, - "4": { - "value": "39", - "type": "lineHeights" - }, - "5": { - "value": "11", - "type": "lineHeights" - }, - "6": { - "value": "27", - "type": "lineHeights" - }, - "7": { - "value": "58", - "type": "lineHeights" - }, - "8": { - "value": "22", - "type": "lineHeights" - }, - "9": { - "value": "38", - "type": "lineHeights" - }, - "10": { - "value": "260", - "type": "lineHeights" - } - }, - "fontWeights": { - "inter-0": { - "value": "Regular", - "type": "fontWeights" - }, - "inter-1": { - "value": "Bold", - "type": "fontWeights" - }, - "inter-2": { - "value": "Medium", - "type": "fontWeights" - }, - "inter-3": { - "value": "Bold", - "type": "fontWeights" - }, - "inter-4": { - "value": "Semi Bold", - "type": "fontWeights" - }, - "roboto-mono-4": { - "value": "Bold", - "type": "fontWeights" - }, - "manrope-5": { - "value": "Bold", - "type": "fontWeights" - }, - "manrope-6": { - "value": "Regular", - "type": "fontWeights" - }, - "manrope-7": { - "value": "SemiBold", - "type": "fontWeights" - }, - "manrope-8": { - "value": "ExtraLight", - "type": "fontWeights" - }, - "manrope-9": { - "value": "ExtraBold", - "type": "fontWeights" - }, - "roboto-mono-3": { - "value": "Medium", - "type": "fontWeights" - }, - "inter-5": { - "value": "Semi Bold", - "type": "fontWeights" - }, - "manrope-10": { - "value": "ExtraBold", - "type": "fontWeights" - } - }, - "letterSpacing": { - "0": { - "value": "0.5%", - "type": "letterSpacing" - }, - "1": { - "value": "1%", - "type": "letterSpacing" - }, - "2": { - "value": "0%", - "type": "letterSpacing" - }, - "3": { - "value": "-2%", - "type": "letterSpacing" - }, - "4": { - "value": "2%", - "type": "letterSpacing" - }, - "5": { - "value": "-5%", - "type": "letterSpacing" - } - }, - "paragraphSpacing": { - "0": { - "value": "0", - "type": "paragraphSpacing" - } - }, - "Regular": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-0}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.0}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Labels - Title Case": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-2}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.0}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.capitalize}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Labels - Sentence case": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-2}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.0}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Titles": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-1}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.capitalize}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Small": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-0}", - "lineHeight": "{lineHeights.5}", - "fontSize": "{fontSize.1}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography", - "description": "When Regular is too big and Tiny is too tiny." - }, - "Tiny": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-2}", - "lineHeight": "{lineHeights.1}", - "fontSize": "{fontSize.0}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Unit": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-2}", - "lineHeight": "{lineHeights.2}", - "fontSize": "{fontSize.1}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.uppercase}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Mono": { - "value": { - "fontFamily": "{fontFamilies.roboto-mono}", - "fontWeight": "{fontWeights.roboto-mono-3}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography", - "description": "Where code is displayed, it should be Mono." - }, - "Big Title": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-2}", - "lineHeight": "{lineHeights.4}", - "fontSize": "{fontSize.5}", - "letterSpacing": "{letterSpacing.0}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Space Section Unit Text": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-2}", - "lineHeight": "{lineHeights.1}", - "fontSize": "{fontSize.0}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.uppercase}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Space Section Value Text": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-2}", - "lineHeight": "{lineHeights.3}", - "fontSize": "{fontSize.1}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "textCase": { - "none": { - "value": "none", - "type": "textCase" - }, - "uppercase": { - "value": "uppercase", - "type": "textCase" - }, - "capitalize": { - "value": "capitalize", - "type": "textCase" - } - }, - "textDecoration": { - "none": { - "value": "none", - "type": "textDecoration" - }, - "underline": { - "value": "underline", - "type": "textDecoration" - } - }, - "borderRadius": { - "0": { - "value": "1px", - "type": "borderRadius" - }, - "1": { - "value": "2px", - "type": "borderRadius" - }, - "2": { - "value": "3px", - "type": "borderRadius" - }, - "3": { - "value": "4px", - "type": "borderRadius" - }, - "4": { - "value": "5px", - "type": "borderRadius" - }, - "5": { - "value": "6px", - "type": "borderRadius" - } - }, - "white": { - "value": "#ffffff", - "type": "color" - }, - "black": { - "value": "#000000", - "type": "color" - }, - "background": { - "panel": { - "value": "#fff", - "type": "color", - "description": "background color for all panels, titles, columns and rows." - }, - "primary": { - "value": "#096cff", - "type": "color", - "description": "primary color, used in button" - }, - "hover": { - "value": "#efefef", - "type": "color", - "description": "hover color for toggle group button, icon button, toggle button, small icon button, small toggle button, nested select button, menu item large" - }, - "active": { - "value": "#096cff", - "type": "color", - "description": "color for active elements" - }, - "menu": { - "value": "#fff", - "type": "color", - "description": "background color for menu and select menu" - }, - "controls": { - "value": "#f5f5f5", - "type": "color", - "description": "background color for text input, toggle group, input field, color input, select button, panel button, text-area, search field, checkbox, spacing, flex control" - }, - "assetcard-hover": { - "value": "#e6e8eb", - "type": "color", - "description": "used only for the hover state for the asset card component" - }, - "neutral": { - "main": { - "value": "#d7dbdf", - "type": "color", - "description": "used for neutral button" - }, - "accent": { - "value": "#11181c", - "type": "color", - "description": "accent color on neutral toast" - }, - "notification": { - "value": "#ffffff", - "type": "color", - "description": "background color on neutral toast" - }, - "dark": { - "value": "#b2b2b2", - "type": "color" - } - }, - "destructive": { - "main": { - "value": "#dc2929", - "type": "color", - "description": "used for destructive button and accent color on destructive toast" - }, - "notification": { - "value": "#ffe9e9", - "type": "color", - "description": "background for destructive toast" - } - }, - "success": { - "main": { - "value": "#00894a", - "type": "color", - "description": "used for success button and accent color on success toast" - }, - "notification": { - "value": "#e9f9ee", - "type": "color", - "description": "background for success banner & toast" - } - }, - "alert": { - "main": { - "value": "#f5d90a", - "type": "color", - "description": "used for alert button and accent color on alert toast" - }, - "notification": { - "value": "#fffbd1", - "type": "color", - "description": "background for alert banner & toast" - } - }, - "info": { - "main": { - "value": "#0175dc", - "type": "color" - }, - "notification": { - "value": "#e0f0ff", - "type": "color", - "description": "background for info banner & toast" - } - }, - "preset": { - "main": { - "value": "#e6e6e6", - "type": "color" - }, - "hover": { - "value": "#dfe3e6", - "type": "color" - } - }, - "local": { - "main": { - "value": "#e1f0ff", - "type": "color" - }, - "hover": { - "value": "#cee7fe", - "type": "color" - } - }, - "remote": { - "main": { - "value": "#ffe8d7", - "type": "color" - }, - "hover": { - "value": "#ffdcc3", - "type": "color" - } - }, - "input": { - "selected": { - "value": "#b7d9f8", - "type": "color", - "description": "background color for selected text" - }, - "disabled": { - "value": "#f8f8f8", - "type": "color", - "description": "background for disabled text fields" - }, - "highlight": { - "value": "#b7d9f8", - "type": "color", - "description": "background color for highlighted/selected text" - } - }, - "button": { - "hover": { - "value": "#00000010", - "type": "color", - "description": "transparent color to create the hover state for button" - }, - "pressed": { - "value": "#0000001c", - "type": "color", - "description": "transparent color to create the pressed state for button" - }, - "disabled": { - "value": "#e9ebed", - "type": "color", - "description": "disabled state for button" - }, - "disabled-dark": { - "value": "#646464", - "type": "color", - "description": "For disabled controls that are against a dark background." - } - }, - "item": { - "current": { - "value": "#e1f0ff", - "type": "color", - "description": "color for current item in the navigator item, menu item, pages panel item components" - }, - "current-child": { - "value": "#eef6ff", - "type": "color", - "description": "color for child of current item in the navigator item, pages panel item components" - }, - "current-hidden": { - "value": "#7e868c", - "type": "color", - "description": "color for the hidden current item in the navigator item component" - }, - "menu-item-hover": { - "value": "#efefef", - "type": "color", - "description": "The hover state on menu item components." - } - }, - "tooltip": { - "main": { - "value": "#11181c", - "type": "color" - }, - "builder": { - "value": "#ffffff", - "type": "color" - }, - "designer": { - "value": "#ffffff", - "type": "color" - } - }, - "spacing": { - "top-bottom": { - "value": "#f8f8f8", - "type": "color" - }, - "left-right": { - "value": "#f1f3f5", - "type": "color", - "description": "Left and right padding and margin background colors for the Position section UI." - }, - "hover": { - "value": "#e3e3e3", - "type": "color" - } - }, - "style-source": { - "token": { - "value": "{foreground.reusable}", - "type": "color", - "description": "Style sources that are tokens" - }, - "tag": { - "value": "#d54113", - "type": "color", - "description": "For the HTML tag variant of the Style Source component." - }, - "state": { - "value": "#00894a", - "type": "color", - "description": "For the state variant of the Style Source component." - }, - "neutral": { - "value": "#687076", - "type": "color", - "description": "For the inactive variant of the Style Source component." - }, - "disabled": { - "value": "#9da2a6", - "type": "color", - "description": "For the disabled state of the token variant of the Style Source component." - }, - "gradient": { - "token": { - "value": "linear-gradient(90deg, #834df400 0%, #834df4 31.87%)", - "type": "color" - }, - "tag": { - "value": "linear-gradient(90deg, #d5411300 0%, #d54113 31.87%)", - "type": "color" - }, - "unselected": { - "value": "linear-gradient(90deg, #68707600 0%, #687076 31.87%)", - "type": "color" - }, - "local": { - "value": "linear-gradient(90deg, #096cff00 0%, #096cff 31.87%)", - "type": "color" - } - }, - "breakpoint": { - "value": "#bd2fdb", - "type": "color", - "description": "The color of the style source badge that represents a breakpoint. Used in tooltips." - }, - "local": { - "value": "#096cff", - "type": "color", - "description": "For the local variant of the Style Source component." - } - }, - "canvas": { - "value": "#eee", - "type": "color", - "description": "The color of the Builder UI canvas area background." - }, - "topbar": { - "value": "#2d2d2d", - "type": "color", - "description": "For the Builder UI top bar background color." - }, - "gradient": { - "primary": { - "value": "linear-gradient(135deg, #1774ff 0%, #bd2fdb 100%)", - "type": "color", - "description": "For buttons and other larger UI elements that use a brand gradient. (experimental)" - }, - "vertical": { - "value": "linear-gradient(180deg, #096cff 0%, #096cff 0.01%, #bd2fdb 100%)", - "type": "color", - "description": "For vertically-oriented elements in the Builder UI that use a brand gradient background." - }, - "horizontal": { - "value": "linear-gradient(90deg, #4a4efa 0%, #bd2fdb 100%)", - "type": "color", - "description": "For horizontally-oriented elements in the Builder UI that use a brand gradient background." - }, - "horizontal-reverse": { - "value": "linear-gradient(90deg, #bd2fdb 0%, #4a4efa 100%)", - "type": "color", - "description": "Like horizontal brand gradient, but opposite direction." - } - }, - "menu-hint": { - "value": "#efefef", - "type": "color", - "description": "For the background of the hint menu item." - }, - "topbar-hover": { - "value": "#383838", - "type": "color", - "description": "For tabs and button backgrounds that are in the top toolbar" - }, - "workspace": { - "value": "#a9a9a9", - "type": "color", - "description": "The color of the Builder UI canvas area background." - }, - "icon-subtle": { - "value": "#3e3e3e", - "type": "color" - }, - "primary-light": { - "value": "#2e82ff", - "type": "color", - "description": "A lighter version of primary blue. Not to be used with or as text. Used for drag handles." - }, - "overwritten": { - "main": { - "value": "#ffd9d9", - "type": "color", - "description": "Background color for labels on properties whose values are overwritten." - }, - "hover": { - "value": "#fec4c4", - "type": "color", - "description": "Hover background for overwritten labels." - } - }, - "disabled-dark": { - "value": "#323232", - "type": "color", - "description": "For disabled controls that are against a dark background." - } - }, - "brand": { - "background": { - "project-card": { - "front": { - "value": "linear-gradient(0deg, #fbf8ff 0%, #e2e2e2 100%)", - "type": "color", - "description": "big text color in the project card component" - }, - "back": { - "value": "linear-gradient(0deg, #fbf8ff 0%, #c7c7c7 100%)", - "type": "color" - }, - "text-area": { - "value": "#ffffff", - "type": "color" - } - }, - "published-main": { - "value": "#39fbbb", - "type": "color" - }, - "gradient": { - "value": "linear-gradient(180deg, #e63cfe 0%, #ffae3c 100%)", - "type": "color" - }, - "published-contrast": { - "value": "#ebfffc", - "type": "color" - }, - "dashboard": { - "value": "radial-gradient(65.88% 47.48% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),linear-gradient(0deg, rgba(255, 255, 255, 0) 49.46%, rgba(255, 255, 255, 0.33) 100%), linear-gradient(180deg, rgba(255, 174, 60, 0) 0%, rgba(230, 60, 254, 0.33) 100%),radial-gradient(211.58% 161.63% at 3.13% 100%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%), radial-gradient(107.1% 32.15% at 92.96% 5.04%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%), #EBFFFC;", - "type": "color" - }, - "regular-button-selected": { - "value": "linear-gradient(180deg, #bffeec 0%, #fbfff6 100%)", - "type": "color" - }, - "cta-button": { - "value": "linear-gradient(135deg, #4a4efa 0%, #bd2fdb 100%)", - "type": "color" - } - }, - "foreground": { - "published": { - "value": "#00894a", - "type": "color" - } - }, - "border": { - "published": { - "value": "#ebfffc", - "type": "color" - }, - "full-gradient": { - "value": "linear-gradient(135deg, #92fddc 0%, #7d7ffb 31.94%, #ed72fe 64.24%, #fdd791 100%)", - "type": "color" - }, - "navbar": { - "value": "linear-gradient(90deg, #39fbbb00 0%, #39fbbb 20%, #4a4efa 40.03%, #e63cfe 60.02%, #ffae3c 80.04%, #ffae3c00 100%, #ffae3c00 100%)", - "type": "color" - } - }, - "spinner-turquoise": { - "value": "#39fbbb", - "type": "color" - }, - "spinner-blue": { - "value": "#4a4efa", - "type": "color" - }, - "spinner-purple": { - "value": "#e63cfe", - "type": "color" - }, - "spinner-orange": { - "value": "#ffae3c", - "type": "color" - } - }, - "border": { - "main": { - "value": "#e6e6e6", - "type": "color", - "description": "color for separators, panel borders, preset borders, input fields, select buttons, panel buttons, text area, search field, menu, select menu, spacing controls," - }, - "focus": { - "value": "#096cff", - "type": "color", - "description": "border color for all focus elements" - }, - "menu-inner": { - "value": "#fcfcfc", - "type": "color", - "description": "inner border color for menu and select menu" - }, - "color-swatch": { - "value": "#687076", - "type": "color", - "description": "border color for color swatch" - }, - "neutral": { - "value": "#e8e8e8", - "type": "color", - "description": "border color for neutral toast" - }, - "success": { - "value": "#00894a", - "type": "color", - "description": "border color for success banner & toast" - }, - "alert": { - "value": "#e2c802", - "type": "color", - "description": "border color for alert banner & toast" - }, - "info": { - "value": "#096cff", - "type": "color", - "description": "border color for info banner & toast" - }, - "contrast": { - "value": "#ffffff", - "type": "color", - "description": "border color to create contrast on dark/colored elements. Used in button, new position indicator for navigator" - }, - "item": { - "child-line": { - "value": "#889096", - "type": "color", - "description": "color of child lines within the navigator item & pages panel item" - }, - "child-line-current": { - "value": "#96c7f2", - "type": "color", - "description": "color of child lines within the current item of the navigator item & pages panel item" - } - }, - "local": { - "main": { - "value": "#b7d9f8", - "type": "color", - "description": "border color of set elements" - }, - "flex-ui": { - "value": "#096cff", - "type": "color", - "description": "border color of set elements within the flex controls ui" - } - }, - "remote": { - "main": { - "value": "#fbc69f", - "type": "color", - "description": "border color of inherited elements" - }, - "flex-ui": { - "value": "#fa934e", - "type": "color", - "description": "border color of inherited elements within the flex controls ui" - } - }, - "destructive": { - "main": { - "value": "#d13a3a", - "type": "color", - "description": "border color for destructive input field, text area and search field" - }, - "notification": { - "value": "#f9c6c6", - "type": "color", - "description": "border color for destructive toast" - } - }, - "dark": { - "value": "#595c5d", - "type": "color", - "description": "For borders that use dark mode colors in light mode like the Builder UI top bar." - }, - "overwritten": { - "main": { - "value": "#fdaaab", - "type": "color", - "description": "Border color for labels on properties whose values are overwritten." - }, - "flex-ui": { - "value": "#dc3d43", - "type": "color", - "description": "For the flex control grid border when the value is overwritten." - } - }, - "primary": { - "value": "#096cff", - "type": "color" - } - }, - "foreground": { - "main": { - "value": "#11181c", - "type": "color", - "description": "default color for all text and icons" - }, - "subtle": { - "value": "#656869", - "type": "color", - "description": "color for less prominent elements. Used in small icon button, nested select button, input field, color input, select button, panel button, text area, search field & toast" - }, - "category-label": { - "value": "#889096", - "type": "color", - "description": "foreground color for the category label element within the font item component" - }, - "text-subtle": { - "value": "#687076", - "type": "color", - "description": "foreground color for spacing controls text" - }, - "destructive": { - "value": "#d13a3a", - "type": "color", - "description": "destructive foreground color. Used in input field, text field, search area, & toast" - }, - "success": { - "value": "#00b661", - "type": "color", - "description": "A brighter success color for use with icons and text against a dark bg. Not for use with text against light bg." - }, - "info": { - "value": "#096cff", - "type": "color", - "description": "info foreground color. Used in toast" - }, - "disabled": { - "value": "#c1c8cd", - "type": "color", - "description": "color for disabled foreground elements" - }, - "hidden-item": { - "value": "#7e868c", - "type": "color", - "description": "color for hidden item element within navigator item component" - }, - "flex-ui": { - "main": { - "value": "#c7c7c7", - "type": "color", - "description": "color for flex control ui elements" - }, - "hover": { - "value": "#e3e3e3", - "type": "color", - "description": "color for hovered state of flex control ui elements" - } - }, - "contrast": { - "main": { - "value": "#ffffff", - "type": "color", - "description": "color to create contrast over colored and dark backgrounds" - }, - "subtle": { - "value": "#c1c8cd", - "type": "color", - "description": "color to create a more subtle contrast over colored and dark backgrounds" - } - }, - "local": { - "main": { - "value": "#016ccc", - "type": "color", - "description": "foreground color for set elements" - }, - "flex-ui": { - "value": "#237cff", - "type": "color", - "description": "foreground color for flex-ui set elements" - } - }, - "remote": { - "main": { - "value": "#b74900", - "type": "color", - "description": "foreground color for inherited elements" - }, - "flex-ui": { - "value": "#fa934e", - "type": "color", - "description": "foreground color for flex-ui inherited elements" - } - }, - "text-more-subtle": { - "value": "#8d949a", - "type": "color", - "description": "for subtle text that needs to be even more subtle \nthan \"text-subtle\"\n\nused as the color for text on title tab triggers and the category label of the font item component" - }, - "primary": { - "value": "#096cff", - "type": "color" - }, - "success-text": { - "value": "#008447", - "type": "color", - "description": "Success color that is dark enough for text. Same color as background/success" - }, - "grid-controls": { - "dot": { - "value": "#c7c7c7", - "type": "color", - "description": "color for flex control ui elements" - }, - "dot-hover": { - "value": "#707375", - "type": "color" - }, - "flex-hover": { - "value": "#e3e3e3", - "type": "color", - "description": "color for hovered state of flex control ui elements" - } - }, - "icon": { - "secondary": { - "value": "#c1c8cd", - "type": "color" - }, - "main": { - "value": "#11181c", - "type": "color" - } - }, - "more-subtle": { - "value": "#adb1b4", - "type": "color", - "description": "The scroll bar, and anything that needs to be a bit lighter than foreground/subtle" - }, - "scroll-bar": { - "value": "#a7acaf99", - "type": "color", - "description": "For the scroll bar thumb only" - }, - "overwritten": { - "main": { - "value": "#bf0007", - "type": "color", - "description": "Foreground (text & icon) color for labels on properties whose values are overwritten." - }, - "flex-ui": { - "value": "#dc3d43", - "type": "color", - "description": "For the flex control grid when the value is overwritten." - } - }, - "inverse-primary": { - "value": "#ff22ae", - "type": "color", - "description": "The inverse color of our primary blue, when we want a contrasting highlight." - }, - "reusable": { - "value": "#834df4", - "type": "color" - } - }, - "Brand": { - "elevation-small": { - "value": { - "color": "#1717171a", - "type": "dropShadow", - "x": "0", - "y": "4", - "blur": "4", - "spread": "0" - }, - "type": "boxShadow", - "description": "elevation for small things within the dashboard" - }, - "elevation-big": { - "value": { - "color": "#1717171a", - "type": "dropShadow", - "x": "0", - "y": "8", - "blur": "16", - "spread": "0" - }, - "type": "boxShadow", - "description": "elevation for big things within the dashboard" - }, - "Large Title": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-5}", - "lineHeight": "{lineHeights.7}", - "fontSize": "{fontSize.6}", - "letterSpacing": "{letterSpacing.3}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Medium Title": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-5}", - "lineHeight": "{lineHeights.9}", - "fontSize": "{fontSize.5}", - "letterSpacing": "{letterSpacing.3}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Section Title": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-5}", - "lineHeight": "{lineHeights.6}", - "fontSize": "{fontSize.4}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "regular": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-6}", - "lineHeight": "{lineHeights.8}", - "fontSize": "{fontSize.3}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "small": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-7}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.4}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Thumbnail Large": { - "Default": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-8}", - "lineHeight": "{lineHeights.10}", - "fontSize": "{fontSize.7}", - "letterSpacing": "{letterSpacing.5}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Hover": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-9}", - "lineHeight": "{lineHeights.10}", - "fontSize": "{fontSize.7}", - "letterSpacing": "{letterSpacing.5}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - } - }, - "Thumbnail Small": { - "Default": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-6}", - "lineHeight": "{lineHeights.7}", - "fontSize": "{fontSize.6}", - "letterSpacing": "{letterSpacing.3}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "Hover": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-9}", - "lineHeight": "{lineHeights.7}", - "fontSize": "{fontSize.6}", - "letterSpacing": "{letterSpacing.3}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - } - }, - "button": { - "regular": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-7}", - "lineHeight": "{lineHeights.8}", - "fontSize": "{fontSize.3}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "cta": { - "value": { - "fontFamily": "{fontFamilies.manrope}", - "fontWeight": "{fontWeights.manrope-5}", - "lineHeight": "{lineHeights.4}", - "fontSize": "{fontSize.5}", - "letterSpacing": "{letterSpacing.3}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - } - } - }, - "maintenance": { - "light": { - "value": "#ededed", - "type": "color" - }, - "medium": { - "value": "#c7c7c7", - "type": "color" - }, - "dark": { - "value": "#858585", - "type": "color" - }, - "spacerViz": { - "value": "#f9c6c6", - "type": "color" - } - }, - "border-width": { - "0": { - "value": "1", - "type": "borderWidth", - "description": "sets border width value to 1" - }, - "1": { - "value": "2", - "type": "borderWidth", - "description": "sets border width value to 2. Used for focus borders (among other things)" - } - }, - "paragraphIndent": { - "0": { - "value": "0px", - "type": "dimension" - } - }, - "fontSize": { - "0": { - "value": "8", - "type": "fontSizes" - }, - "1": { - "value": "10", - "type": "fontSizes" - }, - "2": { - "value": "12", - "type": "fontSizes" - }, - "3": { - "value": "16", - "type": "fontSizes" - }, - "4": { - "value": "20", - "type": "fontSizes" - }, - "5": { - "value": "32", - "type": "fontSizes" - }, - "6": { - "value": "48", - "type": "fontSizes" - }, - "7": { - "value": "260", - "type": "fontSizes" - } - }, - "panel section drop shadow": { - "value": [ - { - "color": "#00000014", - "type": "dropShadow", - "x": "0", - "y": "4", - "blur": "15", - "spread": "0" - }, - { - "color": "#00000014", - "type": "dropShadow", - "x": "0", - "y": "1", - "blur": "7", - "spread": "0" - } - ], - "type": "boxShadow", - "description": "Shadow for sections that overlap other sections within the same panel. More subtle than the menu drop shadow." - }, - "Regular Bold": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-1}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.0}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography", - "description": "Regular text, except it's bold." - }, - "Mono Bold": { - "value": { - "fontFamily": "{fontFamilies.roboto-mono}", - "fontWeight": "{fontWeights.roboto-mono-4}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography", - "description": "Labels with code syntax, such as CSS property labels within tooltips" - }, - "darkBlue-Fade": { - "value": "linear-gradient(180deg, #11273f 0%, #11273f00 100%)", - "type": "color" - }, - "Stroke-Fade": { - "value": "linear-gradient(180deg, #9697fc 0%, #4a4efa00 100%)", - "type": "color" - }, - "Link": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-0}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.0}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.underline}" - }, - "type": "typography", - "description": "link text" - }, - "Regular Link": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-0}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.0}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.underline}" - }, - "type": "typography", - "description": "Regular text underlined to represent links within a body of Regular text" - }, - "Label Link": { - "value": { - "fontFamily": "{fontFamilies.inter}", - "fontWeight": "{fontWeights.inter-2}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.0}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.underline}" - }, - "type": "typography", - "description": "Label text with underline to represent links in Label text. Sentence case." - }, - "Mono Bold Link": { - "value": { - "fontFamily": "{fontFamilies.roboto-mono}", - "fontWeight": "{fontWeights.roboto-mono-4}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.underline}" - }, - "type": "typography", - "description": "Mono Bold text style with underline to indicate a text link" - }, - "Mono Link": { - "value": { - "fontFamily": "{fontFamilies.roboto-mono}", - "fontWeight": "{fontWeights.roboto-mono-3}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.underline}" - }, - "type": "typography", - "description": "Mono text style with underline to indicate a text link" - } - }, - "$themes": [], - "$metadata": { - "tokenSetOrder": ["global"] - } -} diff --git a/packages/design-system/src/components/text.ts b/packages/design-system/src/components/text.ts index e44ccdb017f9..0da933666704 100644 --- a/packages/design-system/src/components/text.ts +++ b/packages/design-system/src/components/text.ts @@ -1,6 +1,6 @@ import { css, theme, styled } from "../stitches.config"; import { truncate } from "../utilities"; -import { typography } from "../__generated__/figma-design-tokens"; +import { typography } from "../design-tokens"; const normalize = { userSelect: "none", diff --git a/packages/design-system/src/__generated__/figma-design-tokens.ts b/packages/design-system/src/design-tokens.ts similarity index 98% rename from packages/design-system/src/__generated__/figma-design-tokens.ts rename to packages/design-system/src/design-tokens.ts index d4277fd6d4fc..496115bc8517 100644 --- a/packages/design-system/src/__generated__/figma-design-tokens.ts +++ b/packages/design-system/src/design-tokens.ts @@ -1,4 +1,4 @@ -// Generated by transform-figma-tokens.ts from ./src/__generated__/figma-design-tokens.json +// Design tokens used by the Webstudio design system. export const boxShadow = { menuDropShadow: "0px 2px 7px 0px #0000001a, 0px 5px 17px 0px #0000004d", @@ -413,21 +413,18 @@ export const color = { backgroundSpacingTopBottom: "#f8f8f8", backgroundSpacingLeftRight: "#f1f3f5", backgroundSpacingHover: "#e3e3e3", - backgroundStyleSourceToken: "#834df4", + backgroundStyleSourceSelected: "#096cff", backgroundStyleSourceTag: "#d54113", backgroundStyleSourceState: "#00894a", backgroundStyleSourceNeutral: "#687076", backgroundStyleSourceDisabled: "#9da2a6", - backgroundStyleSourceGradientToken: - "linear-gradient(90deg, #834df400 0%, #834df4 31.87%)", + backgroundStyleSourceGradientSelected: + "linear-gradient(90deg, #096cff00 0%, #096cff 31.87%)", backgroundStyleSourceGradientTag: "linear-gradient(90deg, #d5411300 0%, #d54113 31.87%)", backgroundStyleSourceGradientUnselected: "linear-gradient(90deg, #68707600 0%, #687076 31.87%)", - backgroundStyleSourceGradientLocal: - "linear-gradient(90deg, #096cff00 0%, #096cff 31.87%)", backgroundStyleSourceBreakpoint: "#bd2fdb", - backgroundStyleSourceLocal: "#096cff", backgroundCanvas: "#eee", backgroundTopbar: "#2d2d2d", backgroundGradientPrimary: diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts index 9e7b4f0f1b8b..b38b1883bc19 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -1,7 +1,7 @@ import { createStitches } from "@stitches/react"; import type * as Stitches from "@stitches/react"; export type { VariantProps } from "@stitches/react"; -import * as figma from "./__generated__/figma-design-tokens"; +import * as tokens from "./design-tokens"; const spacing = { 0: "0px", @@ -45,11 +45,11 @@ const spacing = { const { styled, css, getCssText, globalCss, keyframes, config, reset } = createStitches({ theme: { - colors: figma.color, + colors: tokens.color, fonts: { - ...figma.fontFamilies, - sans: figma.fontFamilies.inter, - mono: figma.fontFamilies.robotoMono, + ...tokens.fontFamilies, + sans: tokens.fontFamilies.inter, + mono: tokens.fontFamilies.robotoMono, }, opacity: { @@ -94,7 +94,7 @@ const { styled, css, getCssText, globalCss, keyframes, config, reset } = easeOutQuart: "cubic-bezier(0.25, 1, 0.5, 1)", easeOut: "cubic-bezier(0.16, 1, 0.3, 1)", }, - shadows: figma.boxShadow, + shadows: tokens.boxShadow, // Semantic values panel: { diff --git a/packages/sdk-components-animation/private-src b/packages/sdk-components-animation/private-src index aceca8f788bb..29181fed1668 160000 --- a/packages/sdk-components-animation/private-src +++ b/packages/sdk-components-animation/private-src @@ -1 +1 @@ -Subproject commit aceca8f788bbaa307414bb4374287883eb5cb26c +Subproject commit 29181fed16686af08e67123a7931e8ef00a81f7d diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d2ebd465be33..93c28461af2c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1540,9 +1540,6 @@ importers: react-hot-toast: specifier: ^2.5.1 version: 2.5.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318) - token-transformer: - specifier: ^0.0.28 - version: 0.0.28 type-fest: specifier: ^4.37.0 version: 4.37.0 @@ -9076,11 +9073,6 @@ packages: resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} engines: {node: '>=0.6'} - token-transformer@0.0.28: - resolution: {integrity: sha512-DINP+5T3ruZwOWMNd5mJMiM3h5YvwZEoRL+NAKZf+e93/5Vy1P0R5eWeaynCWcqprPNm4ceV5CPgjqo1u48big==} - deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. - hasBin: true - toml@3.0.0: resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==} @@ -17072,10 +17064,6 @@ snapshots: toidentifier@1.0.1: {} - token-transformer@0.0.28: - dependencies: - yargs: 17.7.2 - toml@3.0.0: {} totalist@3.0.1: {}