@ponti-studios/ui 2.0.1 → 3.0.0

package/src/styles/tokens/scripts/check-foundations.mjs

@@ -1,126 +0,0 @@
-import { readFileSync } from "node:fs";
-import { createRequire } from "node:module";
-
-const require = createRequire(import.meta.url);
-const tailwindTheme = require.resolve("tailwindcss/theme.css");
-const tailwind = readFileSync(tailwindTheme, "utf8");
-const sourceTokens = JSON.parse(
-  readFileSync(new URL("../source/foundations.tokens.json", import.meta.url), "utf8"),
-);
-const generated = readFileSync(new URL("../generated/foundations.css", import.meta.url), "utf8");
-
-const declarations = (css) =>
-  [...css.matchAll(/(--[\w-]+):\s*([^;]+);/g)].map(([, name, value]) => [name, value.trim()]);
-const expected = declarations(tailwind);
-const actual = declarations(generated);
-const failures = [];
-const normalize = (value) =>
-  value
-    .replaceAll(/\b0px\b/g, "0")
-    .replaceAll(/ 0 0 (rgb\()/g, " $1")
-    .replaceAll(/\s+/g, " ")
-    .trim();
-const expectedValues = new Map(expected);
-const generatedNames = new Set();
-
-const requiredNames = [
-  "--spacing",
-  "--font-sans",
-  "--font-serif",
-  "--font-mono",
-  ...[
-    "xs",
-    "sm",
-    "base",
-    "lg",
-    "xl",
-    "2xl",
-    "3xl",
-    "4xl",
-    "5xl",
-    "6xl",
-    "7xl",
-    "8xl",
-    "9xl",
-  ].flatMap((name) => [`--text-${name}`, `--text-line-height-${name}`]),
-  ...[
-    "thin",
-    "extralight",
-    "light",
-    "normal",
-    "medium",
-    "semibold",
-    "bold",
-    "extrabold",
-    "black",
-  ].map((name) => `--font-weight-${name}`),
-  ...["tighter", "tight", "normal", "wide", "wider", "widest"].map((name) => `--tracking-${name}`),
-  ...["tight", "snug", "normal", "relaxed", "loose"].map((name) => `--leading-${name}`),
-  ...["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"].map((name) => `--radius-${name}`),
-  ...["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "none"].map((name) => `--shadow-${name}`),
-  ...["sm", "md", "lg", "xl", "2xl"].map((name) => `--breakpoint-${name}`),
-  ...["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"].map(
-    (name) => `--container-${name}`,
-  ),
-  ...["auto", "0", "10", "20", "30", "40", "50"].map((name) => `--z-index-${name}`),
-  ...["in", "out", "in-out"].map((name) => `--ease-${name}`),
-  ...["75", "100", "150", "200", "300", "500", "700", "1000"].map((name) => `--duration-${name}`),
-  ...["spin", "ping", "pulse", "bounce"].map((name) => `--animate-${name}`),
-];
-
-const sourceNames = new Set();
-const collectSourceNames = (node, path = []) => {
-  if (!node || typeof node !== "object") return;
-  if (Object.hasOwn(node, "$value")) {
-    sourceNames.add(`--${path.join("-")}`);
-    return;
-  }
-  for (const [key, value] of Object.entries(node)) {
-    if (!key.startsWith("$")) collectSourceNames(value, [...path, key]);
-  }
-};
-collectSourceNames(sourceTokens);
-
-// Font families use our own system-ui stack ordering rather than Tailwind's
-// exact default wording — every other foundation name is meant to stay
-// aligned with Tailwind's own scale, but font-* is exempt from that check.
-const brandOverrideNames = new Set(["--font-sans", "--font-serif", "--font-mono"]);
-
-for (const [name, value] of actual) {
-  if (generatedNames.has(name)) failures.push(`duplicate generated foundation variable: ${name}`);
-  generatedNames.add(name);
-
-  if (brandOverrideNames.has(name)) continue;
-
-  const tailwindValue = expectedValues.get(name);
-  if (tailwindValue !== undefined && normalize(value) !== normalize(tailwindValue)) {
-    failures.push(`${name}: generated ${value}; Tailwind ${tailwindValue}`);
-  }
-}
-
-for (const name of requiredNames) {
-  if (!generatedNames.has(name))
-    failures.push(`required Tailwind foundation variable is missing: ${name}`);
-}
-
-for (const name of sourceNames) {
-  if (!generatedNames.has(name)) failures.push(`missing generated foundation variable: ${name}`);
-}
-for (const name of generatedNames) {
-  if (!sourceNames.has(name))
-    failures.push(`generated foundation variable has no source token: ${name}`);
-}
-
-if (/--[\w-]+:\s*var\(--[\w-]+\)/.test(generated))
-  failures.push("generated foundations contain a custom-property alias");
-if (/--tracking-[\w-]+:\s*-?\d+(?:\.\d+)?\s*;/.test(generated))
-  failures.push("tracking values must carry a CSS unit");
-
-if (failures.length) {
-  console.error(failures.join("\n"));
-  process.exit(1);
-}
-
-console.log(
-  `Foundation conformance passed (${actual.length} generated variables; ${expectedValues.size} Tailwind variables available for comparison).`,
-);

package/src/styles/tokens/scripts/check-source.mjs

@@ -1,53 +0,0 @@
-import { fileURLToPath } from "node:url";
-import { readdirSync, readFileSync, statSync } from "node:fs";
-import { join, relative } from "node:path";
-
-const sourceDirectory = fileURLToPath(new URL("../../../", import.meta.url));
-const sourceFiles = [];
-
-function collectFiles(directory) {
-  for (const entry of readdirSync(directory)) {
-    const path = join(directory, entry);
-    if (entry === "generated" && statSync(path).isDirectory()) continue;
-    if (statSync(path).isDirectory()) collectFiles(path);
-    else if (/\.(css|ts|tsx)$/.test(entry)) sourceFiles.push(path);
-  }
-}
-
-collectFiles(sourceDirectory);
-
-const checks = [
-  { name: "Radix imports", pattern: /@radix-ui\// },
-  { name: "legacy semantic utility classes", pattern: /(?:\bbg-canvas\b|\bborder-default\b)/ },
-  {
-    name: "invalid shadcn semantic classes",
-    pattern: /(?:text|bg|border)-foreground-foreground\b/,
-  },
-];
-const failures = [];
-
-for (const file of sourceFiles) {
-  const source = readFileSync(file, "utf8");
-  for (const check of checks) {
-    if (check.name === "legacy semantic utility classes" && file.endsWith(".css")) continue;
-    // Native styles address semantic color tokens through bracket notation;
-    // these are token lookups, not the deprecated utility classes.
-    if (check.name === "legacy semantic utility classes") {
-      let tokenSource = source.replace(/\[\s*["'](?:bg-canvas|border-default)["']\s*\]/g, "__semantic_token_access__");
-      if (file.endsWith("color-systems.stories.tsx")) {
-        tokenSource = tokenSource.replace(/token:\s*"(?:bg-canvas|border-default)"/g, 'token: "__token-name__"');
-      }
-      if (check.pattern.test(tokenSource)) failures.push(`${check.name}: ${relative(sourceDirectory, file)}`);
-      continue;
-    }
-    if (check.pattern.test(source))
-      failures.push(`${check.name}: ${relative(sourceDirectory, file)}`);
-  }
-}
-
-if (failures.length > 0) {
-  console.error(failures.join("\n"));
-  process.exit(1);
-}
-
-console.log(`Source contract passed (${sourceFiles.length} source files checked).`);

package/src/styles/tokens/source/dark.tokens.json

@@ -1,138 +0,0 @@
-{
-  "$extensions": {
-    "org.ponti.license": "MIT",
-    "org.ponti.identity": "mono"
-  },
-  "background": {
-    "$type": "color",
-    "$value": "rgb(10, 10, 10)"
-  },
-  "card": {
-    "$type": "color",
-    "$value": "rgb(17, 17, 17)"
-  },
-  "secondary": {
-    "$type": "color",
-    "$value": "rgb(26, 26, 26)"
-  },
-  "popover": {
-    "$type": "color",
-    "$value": "rgb(17, 17, 17)"
-  },
-  "muted": {
-    "$type": "color",
-    "$value": "rgb(20, 20, 20)"
-  },
-  "text-primary": {
-    "$type": "color",
-    "$value": "rgb(250, 250, 250)"
-  },
-  "text-secondary": {
-    "$type": "color",
-    "$value": "rgb(163, 163, 163)"
-  },
-  "tertiary": {
-    "$type": "color",
-    "$value": "{text-secondary}"
-  },
-  "primary": {
-    "$type": "color",
-    "$value": "rgb(237, 237, 237)"
-  },
-  "accent": {
-    "$type": "color",
-    "$value": "rgb(30, 41, 59)"
-  },
-  "destructive": {
-    "$type": "color",
-    "$value": "rgb(220, 38, 38)"
-  },
-  "success": {
-    "$type": "color",
-    "$value": "rgb(34, 197, 94)"
-  },
-  "warning": {
-    "$type": "color",
-    "$value": "rgb(245, 158, 11)"
-  },
-  "text-success": {
-    "$type": "color",
-    "$value": "rgb(74, 222, 128)"
-  },
-  "text-warning": {
-    "$type": "color",
-    "$value": "rgb(252, 211, 77)"
-  },
-  "success-foreground": {
-    "$type": "color",
-    "$value": "rgb(10, 10, 10)"
-  },
-  "warning-foreground": {
-    "$type": "color",
-    "$value": "rgb(10, 10, 10)"
-  },
-  "primary-foreground": {
-    "$type": "color",
-    "$value": "rgb(10, 10, 10)"
-  },
-  "accent-foreground": {
-    "$type": "color",
-    "$value": "rgb(147, 197, 253)"
-  },
-  "destructive-foreground": {
-    "$type": "color",
-    "$value": "rgb(255, 255, 255)"
-  },
-  "text-destructive": {
-    "$type": "color",
-    "$value": "rgb(252, 165, 165)"
-  },
-  "text-accent": {
-    "$type": "color",
-    "$value": "rgb(96, 165, 250)"
-  },
-  "border-default": {
-    "$type": "color",
-    "$value": "rgb(38, 38, 38)"
-  },
-  "focus-ring": {
-    "$type": "color",
-    "$value": "rgb(59, 130, 246)"
-  },
-  "chart-1": {
-    "$type": "color",
-    "$value": "rgb(59, 130, 246)"
-  },
-  "chart-2": {
-    "$type": "color",
-    "$value": "rgb(237, 237, 237)"
-  },
-  "chart-3": {
-    "$type": "color",
-    "$value": "rgb(115, 115, 115)"
-  },
-  "chart-4": {
-    "$type": "color",
-    "$value": "rgb(147, 197, 253)"
-  },
-  "chart-5": {
-    "$type": "color",
-    "$value": "rgb(63, 63, 70)"
-  },
-  "chart-positive": {
-    "$type": "color",
-    "$value": "rgb(34, 197, 94)"
-  },
-  "chart-negative": {
-    "$type": "color",
-    "$value": "rgb(239, 68, 68)"
-  },
-  "chart-neutral": {
-    "$type": "color",
-    "$value": "rgb(163, 163, 163)"
-  },
-  "overlay-scrim": {
-    "$type": "color",
-    "$value": "rgb(0, 0, 0)"
-  }
-}

package/src/styles/tokens/source/foundations.tokens.json

@@ -1,344 +0,0 @@
-{
-  "$description": "Non-color foundations copied from tailwindcss@4.3.3/theme.css. Keep this file value-for-value aligned with Tailwind.",
-  "spacing": { "$type": "dimension", "$value": { "value": 0.25, "unit": "rem" } },
-  "spacing-scale": {
-    "$type": "dimension",
-    "0": { "$value": { "value": 0, "unit": "rem" } },
-    "px": { "$value": { "value": 1, "unit": "px" } },
-    "0-5": { "$value": { "value": 0.125, "unit": "rem" } },
-    "1": { "$value": { "value": 0.25, "unit": "rem" } },
-    "1-5": { "$value": { "value": 0.375, "unit": "rem" } },
-    "2": { "$value": { "value": 0.5, "unit": "rem" } },
-    "2-5": { "$value": { "value": 0.625, "unit": "rem" } },
-    "3": { "$value": { "value": 0.75, "unit": "rem" } },
-    "3-5": { "$value": { "value": 0.875, "unit": "rem" } },
-    "4": { "$value": { "value": 1, "unit": "rem" } },
-    "5": { "$value": { "value": 1.25, "unit": "rem" } },
-    "6": { "$value": { "value": 1.5, "unit": "rem" } },
-    "7": { "$value": { "value": 1.75, "unit": "rem" } },
-    "8": { "$value": { "value": 2, "unit": "rem" } },
-    "9": { "$value": { "value": 2.25, "unit": "rem" } },
-    "10": { "$value": { "value": 2.5, "unit": "rem" } },
-    "11": { "$value": { "value": 2.75, "unit": "rem" } },
-    "12": { "$value": { "value": 3, "unit": "rem" } },
-    "14": { "$value": { "value": 3.5, "unit": "rem" } },
-    "16": { "$value": { "value": 4, "unit": "rem" } },
-    "20": { "$value": { "value": 5, "unit": "rem" } },
-    "24": { "$value": { "value": 6, "unit": "rem" } },
-    "28": { "$value": { "value": 7, "unit": "rem" } },
-    "32": { "$value": { "value": 8, "unit": "rem" } },
-    "36": { "$value": { "value": 9, "unit": "rem" } },
-    "40": { "$value": { "value": 10, "unit": "rem" } },
-    "44": { "$value": { "value": 11, "unit": "rem" } },
-    "48": { "$value": { "value": 12, "unit": "rem" } },
-    "52": { "$value": { "value": 13, "unit": "rem" } },
-    "56": { "$value": { "value": 14, "unit": "rem" } },
-    "60": { "$value": { "value": 15, "unit": "rem" } },
-    "64": { "$value": { "value": 16, "unit": "rem" } },
-    "72": { "$value": { "value": 18, "unit": "rem" } },
-    "80": { "$value": { "value": 20, "unit": "rem" } },
-    "96": { "$value": { "value": 24, "unit": "rem" } }
-  },
-  "font": {
-    "$type": "fontFamily",
-    "sans": {
-      "$value": [
-        "Geist",
-        "system-ui",
-        "-apple-system",
-        "BlinkMacSystemFont",
-        "Segoe UI",
-        "Roboto",
-        "Helvetica Neue",
-        "Noto Sans",
-        "Arial",
-        "sans-serif",
-        "Apple Color Emoji",
-        "Segoe UI Emoji",
-        "Segoe UI Symbol",
-        "Noto Color Emoji"
-      ]
-    },
-    "serif": {
-      "$value": [
-        "system-ui",
-        "-apple-system",
-        "BlinkMacSystemFont",
-        "Segoe UI",
-        "Roboto",
-        "Helvetica Neue",
-        "Noto Sans",
-        "Arial",
-        "sans-serif",
-        "Apple Color Emoji",
-        "Segoe UI Emoji",
-        "Segoe UI Symbol",
-        "Noto Color Emoji"
-      ]
-    },
-    "mono": {
-      "$value": [
-        "Geist Mono",
-        "ui-monospace",
-        "SFMono-Regular",
-        "Menlo",
-        "Monaco",
-        "Consolas",
-        "Liberation Mono",
-        "Courier New",
-        "monospace"
-      ]
-    }
-  },
-  "text": {
-    "$type": "dimension",
-    "xs": { "$value": { "value": 0.75, "unit": "rem" } },
-    "sm": { "$value": { "value": 0.875, "unit": "rem" } },
-    "base": { "$value": { "value": 1, "unit": "rem" } },
-    "lg": { "$value": { "value": 1.125, "unit": "rem" } },
-    "xl": { "$value": { "value": 1.25, "unit": "rem" } },
-    "2xl": { "$value": { "value": 1.5, "unit": "rem" } },
-    "3xl": { "$value": { "value": 1.875, "unit": "rem" } },
-    "4xl": { "$value": { "value": 2.25, "unit": "rem" } },
-    "5xl": { "$value": { "value": 3, "unit": "rem" } },
-    "6xl": { "$value": { "value": 3.75, "unit": "rem" } },
-    "7xl": { "$value": { "value": 4.5, "unit": "rem" } },
-    "8xl": { "$value": { "value": 6, "unit": "rem" } },
-    "9xl": { "$value": { "value": 8, "unit": "rem" } }
-  },
-  "text-line-height": {
-    "$type": "number",
-    "xs": { "$value": 1.3333333333 },
-    "sm": { "$value": 1.4285714286 },
-    "base": { "$value": 1.5 },
-    "lg": { "$value": 1.5555555556 },
-    "xl": { "$value": 1.4 },
-    "2xl": { "$value": 1.3333333333 },
-    "3xl": { "$value": 1.2 },
-    "4xl": { "$value": 1.1111111111 },
-    "5xl": { "$value": 1 },
-    "6xl": { "$value": 1 },
-    "7xl": { "$value": 1 },
-    "8xl": { "$value": 1 },
-    "9xl": { "$value": 1 }
-  },
-  "font-weight": {
-    "$type": "fontWeight",
-    "thin": { "$value": 100 },
-    "extralight": { "$value": 200 },
-    "light": { "$value": 300 },
-    "normal": { "$value": 400 },
-    "medium": { "$value": 500 },
-    "semibold": { "$value": 600 },
-    "bold": { "$value": 700 },
-    "extrabold": { "$value": 800 },
-    "black": { "$value": 900 }
-  },
-  "tracking": {
-    "$type": "dimension",
-    "tighter": { "$value": { "value": -0.05, "unit": "em" } },
-    "tight": { "$value": { "value": -0.025, "unit": "em" } },
-    "normal": { "$value": { "value": 0, "unit": "em" } },
-    "wide": { "$value": { "value": 0.025, "unit": "em" } },
-    "wider": { "$value": { "value": 0.05, "unit": "em" } },
-    "widest": { "$value": { "value": 0.1, "unit": "em" } }
-  },
-  "leading": {
-    "$type": "number",
-    "tight": { "$value": 1.25 },
-    "snug": { "$value": 1.375 },
-    "normal": { "$value": 1.5 },
-    "relaxed": { "$value": 1.625 },
-    "loose": { "$value": 2 }
-  },
-  "radius": {
-    "$type": "dimension",
-    "xs": { "$value": { "value": 0.125, "unit": "rem" } },
-    "sm": { "$value": { "value": 0.25, "unit": "rem" } },
-    "md": { "$value": { "value": 0.375, "unit": "rem" } },
-    "lg": { "$value": { "value": 0.5, "unit": "rem" } },
-    "xl": { "$value": { "value": 0.75, "unit": "rem" } },
-    "2xl": { "$value": { "value": 1, "unit": "rem" } },
-    "3xl": { "$value": { "value": 1.5, "unit": "rem" } },
-    "4xl": { "$value": { "value": 2, "unit": "rem" } },
-    "full": { "$value": { "value": 9999, "unit": "px" } }
-  },
-  "shadow": {
-    "$type": "shadow",
-    "2xs": {
-      "$value": [
-        {
-          "color": "rgb(0 0 0 / 0.05)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 1, "unit": "px" },
-          "blur": { "value": 0, "unit": "px" },
-          "spread": { "value": 0, "unit": "px" }
-        }
-      ]
-    },
-    "xs": {
-      "$value": [
-        {
-          "color": "rgb(0 0 0 / 0.05)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 1, "unit": "px" },
-          "blur": { "value": 2, "unit": "px" },
-          "spread": { "value": 0, "unit": "px" }
-        }
-      ]
-    },
-    "sm": {
-      "$value": [
-        {
-          "color": "rgb(0 0 0 / 0.1)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 1, "unit": "px" },
-          "blur": { "value": 3, "unit": "px" },
-          "spread": { "value": 0, "unit": "px" }
-        },
-        {
-          "color": "rgb(0 0 0 / 0.1)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 1, "unit": "px" },
-          "blur": { "value": 2, "unit": "px" },
-          "spread": { "value": -1, "unit": "px" }
-        }
-      ]
-    },
-    "md": {
-      "$value": [
-        {
-          "color": "rgb(0 0 0 / 0.1)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 4, "unit": "px" },
-          "blur": { "value": 6, "unit": "px" },
-          "spread": { "value": -1, "unit": "px" }
-        },
-        {
-          "color": "rgb(0 0 0 / 0.1)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 2, "unit": "px" },
-          "blur": { "value": 4, "unit": "px" },
-          "spread": { "value": -2, "unit": "px" }
-        }
-      ]
-    },
-    "lg": {
-      "$value": [
-        {
-          "color": "rgb(0 0 0 / 0.1)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 10, "unit": "px" },
-          "blur": { "value": 15, "unit": "px" },
-          "spread": { "value": -3, "unit": "px" }
-        },
-        {
-          "color": "rgb(0 0 0 / 0.1)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 4, "unit": "px" },
-          "blur": { "value": 6, "unit": "px" },
-          "spread": { "value": -4, "unit": "px" }
-        }
-      ]
-    },
-    "xl": {
-      "$value": [
-        {
-          "color": "rgb(0 0 0 / 0.1)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 20, "unit": "px" },
-          "blur": { "value": 25, "unit": "px" },
-          "spread": { "value": -5, "unit": "px" }
-        },
-        {
-          "color": "rgb(0 0 0 / 0.1)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 8, "unit": "px" },
-          "blur": { "value": 10, "unit": "px" },
-          "spread": { "value": -6, "unit": "px" }
-        }
-      ]
-    },
-    "2xl": {
-      "$value": [
-        {
-          "color": "rgb(0 0 0 / 0.25)",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 25, "unit": "px" },
-          "blur": { "value": 50, "unit": "px" },
-          "spread": { "value": -12, "unit": "px" }
-        }
-      ]
-    },
-    "none": {
-      "$value": [
-        {
-          "color": "transparent",
-          "offsetX": { "value": 0, "unit": "px" },
-          "offsetY": { "value": 0, "unit": "px" },
-          "blur": { "value": 0, "unit": "px" },
-          "spread": { "value": 0, "unit": "px" }
-        }
-      ]
-    }
-  },
-  "breakpoint": {
-    "$type": "dimension",
-    "sm": { "$value": { "value": 40, "unit": "rem" } },
-    "md": { "$value": { "value": 48, "unit": "rem" } },
-    "lg": { "$value": { "value": 64, "unit": "rem" } },
-    "xl": { "$value": { "value": 80, "unit": "rem" } },
-    "2xl": { "$value": { "value": 96, "unit": "rem" } }
-  },
-  "container": {
-    "$type": "dimension",
-    "3xs": { "$value": { "value": 16, "unit": "rem" } },
-    "2xs": { "$value": { "value": 18, "unit": "rem" } },
-    "xs": { "$value": { "value": 20, "unit": "rem" } },
-    "sm": { "$value": { "value": 24, "unit": "rem" } },
-    "md": { "$value": { "value": 28, "unit": "rem" } },
-    "lg": { "$value": { "value": 32, "unit": "rem" } },
-    "xl": { "$value": { "value": 36, "unit": "rem" } },
-    "2xl": { "$value": { "value": 42, "unit": "rem" } },
-    "3xl": { "$value": { "value": 48, "unit": "rem" } },
-    "4xl": { "$value": { "value": 56, "unit": "rem" } },
-    "5xl": { "$value": { "value": 64, "unit": "rem" } },
-    "6xl": { "$value": { "value": 72, "unit": "rem" } },
-    "7xl": { "$value": { "value": 80, "unit": "rem" } }
-  },
-  "z-index": {
-    "$type": "number",
-    "auto": { "$value": "auto" },
-    "0": { "$value": 0 },
-    "10": { "$value": 10 },
-    "20": { "$value": 20 },
-    "30": { "$value": 30 },
-    "40": { "$value": 40 },
-    "50": { "$value": 50 }
-  },
-  "ease": {
-    "$type": "cubicBezier",
-    "in": { "$value": [0.4, 0, 1, 1] },
-    "out": { "$value": [0, 0, 0.2, 1] },
-    "in-out": { "$value": [0.4, 0, 0.2, 1] },
-    "drawer": { "$value": [0.32, 0.72, 0, 1] }
-  },
-  "duration": {
-    "$type": "duration",
-    "75": { "$value": "75ms" },
-    "100": { "$value": "100ms" },
-    "150": { "$value": "150ms" },
-    "200": { "$value": "200ms" },
-    "300": { "$value": "300ms" },
-    "500": { "$value": "500ms" },
-    "700": { "$value": "700ms" },
-    "1000": { "$value": "1000ms" }
-  },
-  "animate": {
-    "$type": "string",
-    "spin": { "$value": "spin 1s linear infinite" },
-    "ping": { "$value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" },
-    "pulse": { "$value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" },
-    "bounce": { "$value": "bounce 1s infinite" }
-  }
-}