feat: Bring back blue token color on style source and remove Figma token sync pipeline (#5812)

Originally we made the token color purple to make it more distinct from local style source, but now local style source is visually different and having both blue makes sense because when its blue, active style values are matching the blue color and it makes it more clear what that blue color on values means.
2026-10-27 23:27:09 +09:00 · 2026-06-12 12:43:14 +02:00
1 parent f52545a2e9
commit db78ae4dcc
@@ -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
@@ -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
@@ -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,
@@ -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,
@@ -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,
@@ -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",
@@ -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 = <Output, Def extends ZodTypeDef, Input>(
-  path: string[],
-  value: unknown,
-  schema: ZodType<Output, Def, Input>
-) => {
-  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<typeof SingleShadow>) => {
-    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<string, Record<string, any>>();
-
-  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();
@@ -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" <br /><img src="./assets/1.png" width="349" />
-   - Under "Repository access" choose `webstudio-is/webstudio` <br /><img src="./assets/2.png" width="514" />
-   - Set "Repository permissions" / "Contents" to "Read and write", and leave other permissions as is <br /><img src="./assets/3.png" width="806" />
-   - 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 <br/><img src="./assets/4.png" width="611" />
-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. <br/><img src="./assets/5.png" width="420" />
-
-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. <br/><img src="./assets/11.png" width="418" />
-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. <br/><img src="./assets/10.png" width="329" />
-4. Click "Create pull request" button. (It might be hidden behind "Draft pull request") <br/><img src="./assets/12.png" width="372" />
-5. In the PR you can already see the changes in the deployed app <br/><img src="./assets/8.png" width="926" />
-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" <br/><img src="./assets/9.png" width="924" />
-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" <br/><img src="./assets/7.png" width="1029" />
-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" <br/><img src="./assets/13.png" width="922" />
-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 <br/><img src="./assets/14.png" width="1222" />
-4. Click on "Start review". You'll be presented with series of before/after screenshots of our demos <br/><img src="./assets/15.png" width="1222" />
-5. Approve each screenshot unless there's something wrong
-6. If everything is fine, click "Update baselines" <br/><img src="./assets/16.png" width="1222" />
-7. An "update lost pixel baseline" commit should appear in the PR and the failed check should pass <br/><img src="./assets/17.png" width="867" />
-
-### 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
@@ -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"
@@ -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",
@@ -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:
@@ -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: {
@@ -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: {}