@frontify/fondue
Version:
Design system of Frontify
718 lines (717 loc) • 40.5 kB
JavaScript
#!/usr/bin/env node
import fs, { writeFileSync, existsSync, rmSync, readFileSync } from "node:fs";
import path, { join, dirname } from "node:path";
import { Command } from "commander";
import { fileURLToPath } from "node:url";
import { createRequire } from "node:module";
import { execa } from "execa";
const cssVariableReplacements = {
"var(--base-color)": "var(--color-surface-default)",
"var(--base-color-alt)": "var(--color-surface-dim)",
"var(--body-family)": "var(--typography-font-family-primary)",
"var(--body-family-stack)": "var(--body-family)",
"var(--body-weight-name)": "var(--typography-font-weight-regular)",
"var(--body-weight-number)": "var(--typography-font-weight-regular)",
"var(--body-weight-strong-name)": "var(--typography-font-weight-medium)",
"var(--body-weight-strong-number)": "var(--typography-font-weight-medium)",
"var(--body-weight-x-strong-name)": "var(--typography-font-weight-bold)",
"var(--body-weight-x-strong-number)": "var(--typography-font-weight-bold)",
"var(--body-size-x-small)": "var(--typography-font-size-x-small)",
"var(--body-size-x-small-line-height)": "var(--typography-line-height-tight)",
"var(--body-size-small)": "var(--typography-font-size-small)",
"var(--body-size-small-line-height)": "var(--typography-line-height-tight)",
"var(--body-size-medium)": "var(--typography-font-size-medium)",
"var(--body-size-medium-line-height)": "var(--typography-line-height-medium)",
"var(--body-size-large)": "var(--typography-font-size-large)",
"var(--body-size-large-line-height)": "var(--typography-line-height-wide)",
"var(--box-neutral-color)": "var(--color-container-secondary-default)",
"var(--box-neutral-color-hover)": "var(--color-container-secondary-hover)",
"var(--box-neutral-color-pressed)": "var(--color-container-secondary-active)",
"var(--box-neutral-inverse-color)": "var(--color-container-secondary-on-secondary-container)",
"var(--box-neutral-inverse-color-hover)": "var(--color-container-secondary-on-secondary-container)",
"var(--box-neutral-inverse-color-pressed)": "var(--color-container-secondary-on-secondary-container)",
"var(--box-neutral-strong-color)": "var(--color-primary-default)",
"var(--box-neutral-strong-color-hover)": "var(--color-primary-hover)",
"var(--box-neutral-strong-color-pressed)": "var(--color-primary-active)",
"var(--box-neutral-strong-inverse-color)": "var(--color-primary-on-primary)",
"var(--box-neutral-strong-inverse-color-hover)": "var(--color-primary-on-primary)",
"var(--box-neutral-strong-inverse-color-pressed)": "var(--color-primary-on-primary)",
"var(--box-neutral-mighty-color)": "var(--color-primary-default)",
"var(--box-neutral-mighty-color-hover)": "var(--color-primary-hover)",
"var(--box-neutral-mighty-color-pressed)": "var(--color-primary-active)",
"var(--box-neutral-mighty-inverse-color)": "var(--color-primary-on-primary)",
"var(--box-neutral-mighty-inverse-color-hover)": "var(--color-primary-on-primary)",
"var(--box-neutral-mighty-inverse-color-pressed)": "var(--color-primary-on-primary)",
"var(--box-selected-color)": "var(--color-container-highlight-default)",
"var(--box-selected-color-hover)": "var(--color-container-highlight-hover)",
"var(--box-selected-color-pressed)": "var(--color-container-highlight-active)",
"var(--box-selected-inverse-color)": "var(--color-container-highlight-on-highlight-container)",
"var(--box-selected-inverse-color-hover)": "var(--color-container-highlight-on-highlight-container)",
"var(--box-selected-inverse-color-pressed)": "var(--color-container-highlight-on-highlight-container)",
"var(--box-selected-strong-color)": "var(--color-highlight-default)",
"var(--box-selected-strong-color-hover)": "var(--color-highlight-hover)",
"var(--box-selected-strong-color-pressed)": "var(--color-highlight-active)",
"var(--box-selected-strong-inverse-color)": "var(--color-highlight-on-highlight)",
"var(--box-selected-strong-inverse-color-hover)": "var(--color-highlight-on-highlight)",
"var(--box-selected-strong-inverse-color-pressed)": "var(--color-highlight-on-highlight)",
"var(--box-disabled-color)": "var(--color-container-disabled-default)",
"var(--box-disabled-color-inverse)": "var(--color-container-disabled-on-disabled)",
"var(--box-disabled-strong-color)": "var(--color-disabled-default)",
"var(--box-disabled-strong-color-inverse)": "var(--color-disabled-on-disabled)",
"var(--box-positive-color)": "var(--color-container-success-default)",
"var(--box-positive-color-hover)": "var(--color-container-success-hover)",
"var(--box-positive-color-pressed)": "var(--color-container-success-active)",
"var(--box-positive-inverse-color)": "var(--color-container-success-on-success-container)",
"var(--box-positive-inverse-color-hover)": "var(--color-container-success-on-success-container)",
"var(--box-positive-inverse-color-pressed)": "var(--color-container-success-on-success-container)",
"var(--box-positive-strong-color)": "var(--color-success-default)",
"var(--box-positive-strong-color-hover)": "var(--color-success-hover)",
"var(--box-positive-strong-color-pressed)": "var(--color-success-active)",
"var(--box-positive-strong-inverse-color)": "var(--color-success-on-success)",
"var(--box-positive-strong-inverse-color-hover)": "var(--color-success-on-success)",
"var(--box-positive-strong-inverse-color-pressed)": "var(--color-success-on-success)",
"var(--box-negative-color)": "var(--color-container-error-default)",
"var(--box-negative-color-hover)": "var(--color-container-error-hover)",
"var(--box-negative-color-pressed)": "var(--color-container-error-active)",
"var(--box-negative-inverse-color)": "var(--color-container-error-on-error-container)",
"var(--box-negative-inverse-color-hover)": "var(--color-container-error-on-error-container)",
"var(--box-negative-inverse-color-pressed)": "var(--color-container-error-on-error-container)",
"var(--box-negative-strong-color)": "var(--color-error-default)",
"var(--box-negative-strong-color-hover)": "var(--color-error-hover)",
"var(--box-negative-strong-color-pressed)": "var(--color-error-active)",
"var(--box-negative-strong-inverse-color)": "var(--color-error-on-error)",
"var(--box-negative-strong-inverse-color-hover)": "var(--color-error-on-error)",
"var(--box-negative-strong-inverse-color-pressed)": "var(--color-error-on-error)",
"var(--box-warning-color)": "var(--color-container-warning-default)",
"var(--box-warning-color-hover)": "var(--color-container-warning-hover)",
"var(--box-warning-color-pressed)": "var(--color-container-warning-active)",
"var(--box-warning-inverse-color)": "var(--color-container-warning-on-warning-container)",
"var(--box-warning-inverse-color-hover)": "var(--color-container-warning-on-warning-container)",
"var(--box-warning-inverse-color-pressed)": "var(--color-container-warning-on-warning-container)",
"var(--box-warning-strong-color)": "var(--color-warning-default)",
"var(--box-warning-strong-color-hover)": "var(--color-warning-hover)",
"var(--box-warning-strong-color-pressed)": "var(--color-warning-active)",
"var(--box-warning-strong-inverse-color)": "var(--color-warning-on-warning)",
"var(--box-warning-strong-inverse-color-hover)": "var(--color-warning-on-warning)",
"var(--box-warning-strong-inverse-color-pressed)": "var(--color-warning-on-warning)",
"var(--code-family)": "var(--typography-font-family-monospace)",
"var(--code-family-stack)": "var(--typography-font-family-monospace)",
"var(--code-weight-name)": "var(--typography-font-weight-regular)",
"var(--code-weight-number)": "var(--typography-font-weight-regular)",
"var(--code-weight-strong-name)": "var(--typography-font-weight-bold)",
"var(--code-weight-strong-number)": "var(--typography-font-weight-bold)",
"var(--focus-ring-color)": "var(--color-focus-default)",
"var(--heading-family)": "var(--typography-font-family-primary)",
"var(--heading-family-stack)": "var(--typography-font-family-primary)",
"var(--heading-weight-name)": "var(--typography-font-weight-medium)",
"var(--heading-weight-number)": "var(--typography-font-weight-medium)",
"var(--heading-weight-strong-name)": "var(--typography-font-weight-bold)",
"var(--heading-weight-strong-number)": "var(--typography-font-weight-bold)",
"var(--heading-size-medium)": "var(--typography-font-size-medium)",
"var(--heading-size-medium-line-height)": "var(--typography-line-height-tight)",
"var(--heading-size-large)": "var(--typography-font-size-large)",
"var(--heading-size-large-line-height)": "var(--typography-line-height-wide)",
"var(--heading-size-x-large)": "var(--typography-font-size-x-large)",
"var(--heading-size-x-large-line-height)": "var(--typography-line-height-loose)",
"var(--heading-size-xx-large)": "var(--typography-font-size-xx-large)",
"var(--heading-size-xx-large-line-height)": "var(--typography-line-height-extra-loose)",
"var(--line-color)": "var(--color-line-mid)",
"var(--line-color-weak)": "var(--color-line-subtle)",
"var(--line-color-strong)": "var(--color-line-strong)",
"var(--line-color-x-strong)": "var(--color-line-strong)",
"var(--line-color-xx-strong)": "var(--color-line-strong)",
"var(--line-color-mighty)": "var(--color-line-mid)",
"var(--line-width)": "var(--border-width-default)",
"var(--line-width-large)": "var(--border-width-large)",
"var(--overlay-color)": "var(--color-overlay-default)",
"var(--radius)": "var(--border-radius-medium)",
"var(--radius-small)": "var(--border-radius-small)",
"var(--radius-large)": "var(--border-radius-large)",
"var(--radius-x-large)": "var(--border-radius-x-large)",
"var(--shadow-matrix)": "var(--shadow-default)",
"var(--shadow-top-matrix)": "var(--shadow-default)",
"var(--shadow-bottom-matrix)": "var(--shadow-default)",
"var(--shadow-large-matrix)": "var(--shadow-default)",
"var(--shadow-large-color)": "var(--color-shadow-default)",
"var(--space-xxs)": "var(--spacing-xx-small)",
"var(--space-xs)": "var(--spacing-x-small)",
"var(--space-s)": "var(--spacing-small)",
"var(--space-m)": "var(--spacing-medium)",
"var(--space-l)": "var(--spacing-large)",
"var(--space-xl)": "var(--spacing-x-large)",
"var(--space-xxl)": "var(--spacing-xx-large)",
"var(--text-color)": "var(--color-primary-default)",
"var(--text-color-hover)": "var(--color-primary-hover)",
"var(--text-color-pressed)": "var(--color-primary-active)",
"var(--text-color-weak)": "var(--color-secondary-default)",
"var(--text-color-weak-hover)": "var(--color-secondary-hover)",
"var(--text-color-weak-pressed)": "var(--color-secondary-active)",
"var(--text-color-x-weak)": "var(--color-secondary-default)",
"var(--text-color-disabled)": "var(--color-disabled-default)",
"var(--text-color-negative)": "var(--color-error-default)",
"var(--text-color-negative-hover)": "var(--color-error-hover)",
"var(--text-color-negative-pressed)": "var(--color-error-active)",
"var(--text-color-positive)": "var(--color-success-default)",
"var(--text-color-positive-hover)": "var(--color-success-hover)",
"var(--text-color-positive-pressed)": "var(--color-success-active)",
"var(--text-color-warning)": "var(--color-warning-default)",
"var(--text-color-warning-hover)": "var(--color-warning-hover)",
"var(--text-color-warning-pressed)": "var(--color-warning-active)",
"var(--text-color-interactive)": "var(--color-highlight-default)",
"var(--text-color-interactive-hover)": "var(--color-highlight-hover)",
"var(--text-color-interactive-pressed)": "var(--color-highlight-active)",
"var(--button-background-color)": "var(--color-container-secondary-default)",
"var(--button-background-color-hover)": "var(--color-container-secondary-hover)",
"var(--button-background-color-pressed)": "var(--color-container-secondary-active)",
"var(--button-text-color)": "var(--color-primary-default)",
"var(--button-icon-color)": "var(--color-primary-default)",
"var(--button-border-color)": "var(--color-primary-default)",
"var(--button-negative-background-color)": "var(--color-container-error-default)",
"var(--button-negative-background-color-hover)": "var(--color-container-error-hover)",
"var(--button-negative-background-color-pressed)": "var(--color-container-error-active)",
"var(--button-negative-text-color)": "var(--color-container-error-on-error-container)",
"var(--button-negative-icon-color)": "var(--color-container-error-on-error-container)",
"var(--button-positive-background-color)": "var(--color-container-success-default)",
"var(--button-positive-background-color-hover)": "var(--color-container-success-hover)",
"var(--button-positive-background-color-pressed)": "var(--color-container-success-active)",
"var(--button-positive-text-color)": "var(--color-container-success-on-success-container)",
"var(--button-positive-icon-color)": "var(--color-container-success-on-success-container)",
"var(--button-strong-background-color)": "var(--color-primary-default)",
"var(--button-strong-background-color-hover)": "var(--color-primary-hover)",
"var(--button-strong-background-color-pressed)": "var(--color-primary-active)",
"var(--button-strong-text-color)": "var(--color-primary-on-primary)",
"var(--button-strong-icon-color)": "var(--color-primary-on-primary)",
"var(--button-strong-negative-background-color)": "var(--color-error-default)",
"var(--button-strong-negative-background-color-hover)": "var(--color-error-hover)",
"var(--button-strong-negative-background-color-pressed)": "var(--color-error-active)",
"var(--button-strong-negative-text-color)": "var(--color-error-on-error)",
"var(--button-strong-negative-icon-color)": "var(--color-error-on-error)",
"var(--button-strong-positive-background-color)": "var(--color-success-default)",
"var(--button-strong-positive-background-color-hover)": "var(--color-success-hover)",
"var(--button-strong-positive-background-color-pressed)": "var(--color-success-active)",
"var(--button-strong-positive-text-color)": "var(--color-success-on-success)",
"var(--button-strong-positive-icon-color)": "var(--color-success-on-success)",
"var(--button-danger-background-color)": "var(--color-error-default)",
"var(--button-danger-background-color-hover)": "var(--color-error-hover)",
"var(--button-danger-background-color-pressed)": "var(--color-error-active)",
"var(--button-danger-text-color)": "var(--color-error-on-error)",
"var(--button-danger-icon-color)": "var(--color-error-on-error)",
"var(--code-size-small)": "var(--typography-font-size-small)",
"var(--code-size-small-line-height)": "var(--typography-line-height-tight)",
"var(--code-size-medium)": "var(--typography-font-size-medium)",
"var(--code-size-medium-line-height)": "var(--typography-line-height-medium)",
"var(--code-size-large)": "var(--typography-font-size-large)",
"var(--code-size-large-line-height)": "var(--typography-line-height-wide)",
"var(--button-danger-border-color)": "var(--color-line-mid)",
"var(--button-strong-positive-border-color)": "var(--color-line-mid)",
"var(--button-strong-negative-border-color)": "var(--color-line-mid)",
"var(--button-strong-border-color)": "var(--color-line-mid)",
"var(--button-positive-border-color)": "var(--color-line-mid)",
"var(--button-negative-border-color)": "var(--color-line-mid)"
};
const deprecatedCssVariables = {
"var(--shadow-large-offset-x)": "/** @deprecated use updated token instead **/",
"var(--shadow-large-offset-y)": "/** @deprecated use updated token instead **/",
"var(--shadow-large-spread)": "/** @deprecated use updated token instead **/",
"var(--shadow-large-blur)": "/** @deprecated use updated token instead **/",
"var(--shadow-bottom-offset-x)": "/** @deprecated use updated token instead **/",
"var(--shadow-bottom-offset-y)": "/** @deprecated use updated token instead **/",
"var(--shadow-bottom-spread)": "/** @deprecated use updated token instead **/",
"var(--shadow-top-offset-x)": "/** @deprecated use updated token instead **/",
"var(--shadow-top-offset-y)": "/** @deprecated use updated token instead **/",
"var(--shadow-top-spread)": "/** @deprecated use updated token instead **/",
"var(--shadow-offset-x)": "/** @deprecated use updated token instead **/",
"var(--shadow-offset-y)": "/** @deprecated use updated token instead **/",
"var(--shadow-spread)": "/** @deprecated use updated token instead **/",
"var(--shadow-blur)": "/** @deprecated use updated token instead **/",
"var(--shadow-color)": "/** @deprecated use updated token instead **/"
};
const tailwindColorReplacements = {
"tw-([^-]+)-base(?![a-zA-Z0-9-])": "tw-$1-surface",
"tw-([^-]+)-base-alt(?![a-zA-Z0-9-])": "tw-$1-surface-dim",
"tw-([^-]+)-box-neutral(?![a-zA-Z0-9-])": "tw-$1-container-secondary",
"tw-([^-]+)-box-neutral-hover(?![a-zA-Z0-9-])": "tw-$1-container-secondary-hover",
"tw-([^-]+)-box-neutral-pressed(?![a-zA-Z0-9-])": "tw-$1-container-secondary-active",
"tw-([^-]+)-box-neutral-inverse(?![a-zA-Z0-9-])": "tw-$1-container-secondary-on-secondary-container",
"tw-([^-]+)-box-neutral-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-container-secondary-on-secondary-container",
"tw-([^-]+)-box-neutral-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-container-secondary-on-secondary-container",
"tw-([^-]+)-box-neutral-strong(?![a-zA-Z0-9-])": "tw-$1-primary",
"tw-([^-]+)-box-neutral-strong-hover(?![a-zA-Z0-9-])": "tw-$1-primary-hover",
"tw-([^-]+)-box-neutral-strong-pressed(?![a-zA-Z0-9-])": "tw-$1-primary-active",
"tw-([^-]+)-box-neutral-strong-inverse(?![a-zA-Z0-9-])": "tw-$1-primary-on-primary",
"tw-([^-]+)-box-neutral-strong-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-primary-on-primary",
"tw-([^-]+)-box-neutral-strong-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-primary-on-primary",
"tw-([^-]+)-box-neutral-mighty(?![a-zA-Z0-9-])": "tw-$1-primary",
"tw-([^-]+)-box-neutral-mighty-hover(?![a-zA-Z0-9-])": "tw-$1-primary-hover",
"tw-([^-]+)-box-neutral-mighty-pressed(?![a-zA-Z0-9-])": "tw-$1-primary-active",
"tw-([^-]+)-box-neutral-mighty-inverse(?![a-zA-Z0-9-])": "tw-$1-primary-on-primary",
"tw-([^-]+)-box-neutral-mighty-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-primary-on-primary",
"tw-([^-]+)-box-neutral-mighty-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-primary-on-primary",
"tw-([^-]+)-box-selected(?![a-zA-Z0-9-])": "tw-$1-container-highlight",
"tw-([^-]+)-box-selected-hover(?![a-zA-Z0-9-])": "tw-$1-container-highlight-hover",
"tw-([^-]+)-box-selected-pressed(?![a-zA-Z0-9-])": "tw-$1-container-highlight-active",
"tw-([^-]+)-box-selected-inverse(?![a-zA-Z0-9-])": "tw-$1-container-highlight-on-highlight-container",
"tw-([^-]+)-box-selected-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-container-highlight-on-highlight-container",
"tw-([^-]+)-box-selected-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-container-highlight-on-highlight-container",
"tw-([^-]+)-box-selected-strong(?![a-zA-Z0-9-])": "tw-$1-highlight",
"tw-([^-]+)-box-selected-strong-hover(?![a-zA-Z0-9-])": "tw-$1-highlight-hover",
"tw-([^-]+)-box-selected-strong-pressed(?![a-zA-Z0-9-])": "tw-$1-highlight-active",
"tw-([^-]+)-box-selected-strong-inverse(?![a-zA-Z0-9-])": "tw-$1-highlight-on-highlight",
"tw-([^-]+)-box-selected-strong-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-highlight-on-highlight",
"tw-([^-]+)-box-selected-strong-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-highlight-on-highlight",
"tw-([^-]+)-box-disabled(?![a-zA-Z0-9-])": "tw-$1-container-disabled",
"tw-([^-]+)-box-disabled-inverse(?![a-zA-Z0-9-])": "tw-$1-container-disabled-on-disabled-container",
"tw-([^-]+)-box-disabled-strong(?![a-zA-Z0-9-])": "tw-$1-disabled",
"tw-([^-]+)-box-disabled-strong-inverse(?![a-zA-Z0-9-])": "tw-$1-disabled-on-disabled",
"tw-([^-]+)-box-positive(?![a-zA-Z0-9-])": "tw-$1-container-success",
"tw-([^-]+)-box-positive-hover(?![a-zA-Z0-9-])": "tw-$1-container-success-hover",
"tw-([^-]+)-box-positive-pressed(?![a-zA-Z0-9-])": "tw-$1-container-success-active",
"tw-([^-]+)-box-positive-inverse(?![a-zA-Z0-9-])": "tw-$1-container-success-on-success-container",
"tw-([^-]+)-box-positive-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-container-success-on-success-container",
"tw-([^-]+)-box-positive-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-container-success-on-success-container",
"tw-([^-]+)-box-positive-strong(?![a-zA-Z0-9-])": "tw-$1-success",
"tw-([^-]+)-box-positive-strong-hover(?![a-zA-Z0-9-])": "tw-$1-success-hover",
"tw-([^-]+)-box-positive-strong-pressed(?![a-zA-Z0-9-])": "tw-$1-success-active",
"tw-([^-]+)-box-positive-strong-inverse(?![a-zA-Z0-9-])": "tw-$1-success-on-success",
"tw-([^-]+)-box-positive-strong-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-success-on-success",
"tw-([^-]+)-box-positive-strong-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-success-on-success",
"tw-([^-]+)-box-negative(?![a-zA-Z0-9-])": "tw-$1-container-error",
"tw-([^-]+)-box-negative-hover(?![a-zA-Z0-9-])": "tw-$1-container-error-hover",
"tw-([^-]+)-box-negative-pressed(?![a-zA-Z0-9-])": "tw-$1-container-error-active",
"tw-([^-]+)-box-negative-inverse(?![a-zA-Z0-9-])": "tw-$1-container-error-on-error-container",
"tw-([^-]+)-box-negative-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-container-error-on-error-container",
"tw-([^-]+)-box-negative-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-container-error-on-error-container",
"tw-([^-]+)-box-negative-strong(?![a-zA-Z0-9-])": "tw-$1-error",
"tw-([^-]+)-box-negative-strong-hover(?![a-zA-Z0-9-])": "tw-$1-error-hover",
"tw-([^-]+)-box-negative-strong-pressed(?![a-zA-Z0-9-])": "tw-$1-error-active",
"tw-([^-]+)-box-negative-strong-inverse(?![a-zA-Z0-9-])": "tw-$1-error-on-error",
"tw-([^-]+)-box-negative-strong-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-error-on-error",
"tw-([^-]+)-box-negative-strong-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-error-on-error",
"tw-([^-]+)-box-warning(?![a-zA-Z0-9-])": "tw-$1-container-warning",
"tw-([^-]+)-box-warning-hover(?![a-zA-Z0-9-])": "tw-$1-container-warning-hover",
"tw-([^-]+)-box-warning-pressed(?![a-zA-Z0-9-])": "tw-$1-container-warning-active",
"tw-([^-]+)-box-warning-inverse(?![a-zA-Z0-9-])": "tw-$1-container-warning-on-warning-container",
"tw-([^-]+)-box-warning-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-container-warning-on-warning-container",
"tw-([^-]+)-box-warning-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-container-warning-on-warning-container",
"tw-([^-]+)-box-warning-strong(?![a-zA-Z0-9-])": "tw-$1-warning",
"tw-([^-]+)-box-warning-strong-hover(?![a-zA-Z0-9-])": "tw-$1-warning-hover",
"tw-([^-]+)-box-warning-strong-pressed(?![a-zA-Z0-9-])": "tw-$1-warning-active",
"tw-([^-]+)-box-warning-strong-inverse(?![a-zA-Z0-9-])": "tw-$1-warning-on-warning",
"tw-([^-]+)-box-warning-strong-inverse-hover(?![a-zA-Z0-9-])": "tw-$1-warning-on-warning",
"tw-([^-]+)-box-warning-strong-inverse-pressed(?![a-zA-Z0-9-])": "tw-$1-warning-on-warning",
"tw-([^-]+)-focus-shadow(?![a-zA-Z0-9-])": "tw-$1-focus",
"tw-([^-]+)-line(?![a-zA-Z0-9-])": "tw-$1-line-mid",
"tw-([^-]+)-line-weak(?![a-zA-Z0-9-])": "tw-$1-line-subtle",
"tw-([^-]+)-line-strong(?![a-zA-Z0-9-])": "tw-$1-line-strong",
"tw-([^-]+)-line-x-strong(?![a-zA-Z0-9-])": "tw-$1-line-strong",
"tw-([^-]+)-line-xx-strong(?![a-zA-Z0-9-])": "tw-$1-line-strong",
"tw-([^-]+)-line-mighty(?![a-zA-Z0-9-])": "tw-$1-line-mid",
"tw-([^-]+)-overlay-shadow(?![a-zA-Z0-9-])": "tw-$1-overlay",
"tw-([^-]+)-shadow-shadow(?![a-zA-Z0-9-])": "tw-$1-shadow",
"tw-([^-]+)-text(?![a-zA-Z0-9-])": "tw-$1-primary",
"tw-([^-]+)-text-hover(?![a-zA-Z0-9-])": "tw-$1-primary-hover",
"tw-([^-]+)-text-pressed(?![a-zA-Z0-9-])": "tw-$1-primary-active",
"tw-([^-]+)-text-weak(?![a-zA-Z0-9-])": "tw-$1-secondary",
"tw-([^-]+)-text-weak-hover(?![a-zA-Z0-9-])": "tw-$1-secondary-hover",
"tw-([^-]+)-text-weak-pressed(?![a-zA-Z0-9-])": "tw-$1-secondary-active",
"tw-([^-]+)-text-x-weak(?![a-zA-Z0-9-])": "tw-$1-secondary",
"tw-([^-]+)-text-disabled(?![a-zA-Z0-9-])": "tw-$1-disabled",
"tw-([^-]+)-text-negative(?![a-zA-Z0-9-])": "tw-$1-error",
"tw-([^-]+)-text-negative-hover(?![a-zA-Z0-9-])": "tw-$1-error-hover",
"tw-([^-]+)-text-negative-pressed(?![a-zA-Z0-9-])": "tw-$1-error-active",
"tw-([^-]+)-text-positive(?![a-zA-Z0-9-])": "tw-$1-success",
"tw-([^-]+)-text-positive-hover(?![a-zA-Z0-9-])": "tw-$1-success-hover",
"tw-([^-]+)-text-positive-pressed(?![a-zA-Z0-9-])": "tw-$1-success-active",
"tw-([^-]+)-text-warning(?![a-zA-Z0-9-])": "tw-$1-warning",
"tw-([^-]+)-text-warning-hover(?![a-zA-Z0-9-])": "tw-$1-warning-hover",
"tw-([^-]+)-text-warning-pressed(?![a-zA-Z0-9-])": "tw-$1-warning-active",
"tw-([^-]+)-text-interactive(?![a-zA-Z0-9-])": "tw-$1-highlight",
"tw-([^-]+)-text-interactive-hover(?![a-zA-Z0-9-])": "tw-$1-highlight-hover",
"tw-([^-]+)-text-interactive-pressed(?![a-zA-Z0-9-])": "tw-$1-highlight-active",
"tw-([^-]+)-button-background(?![a-zA-Z0-9-])": "tw-$1-container-secondary",
"tw-([^-]+)-button-background-hover(?![a-zA-Z0-9-])": "tw-$1-container-secondary-hover",
"tw-([^-]+)-button-background-pressed(?![a-zA-Z0-9-])": "tw-$1-container-secondary-active",
"tw-([^-]+)-button-text(?![a-zA-Z0-9-])": "tw-$1-primary",
"tw-([^-]+)-button-icon(?![a-zA-Z0-9-])": "tw-$1-primary",
"tw-([^-]+)-button-border(?![a-zA-Z0-9-])": "tw-$1-primary",
"tw-([^-]+)-button-negative-background(?![a-zA-Z0-9-])": "tw-$1-container-error",
"tw-([^-]+)-button-negative-background-hover(?![a-zA-Z0-9-])": "tw-$1-container-error-hover",
"tw-([^-]+)-button-negative-background-pressed(?![a-zA-Z0-9-])": "tw-$1-container-error-active",
"tw-([^-]+)-button-negative-text(?![a-zA-Z0-9-])": "tw-$1-container-error-on-error-container",
"tw-([^-]+)-button-negative-icon(?![a-zA-Z0-9-])": "tw-$1-container-error-on-error-container",
"tw-([^-]+)-button-positive-background(?![a-zA-Z0-9-])": "tw-$1-container-success",
"tw-([^-]+)-button-positive-background-hover(?![a-zA-Z0-9-])": "tw-$1-container-success-hover",
"tw-([^-]+)-button-positive-background-pressed(?![a-zA-Z0-9-])": "tw-$1-container-success-active",
"tw-([^-]+)-button-positive-text(?![a-zA-Z0-9-])": "tw-$1-container-success-on-success-container",
"tw-([^-]+)-button-positive-icon(?![a-zA-Z0-9-])": "tw-$1-container-success-on-success-container",
"tw-([^-]+)-button-strong-background(?![a-zA-Z0-9-])": "tw-$1-primary",
"tw-([^-]+)-button-strong-background-hover(?![a-zA-Z0-9-])": "tw-$1-primary-hover",
"tw-([^-]+)-button-strong-background-pressed(?![a-zA-Z0-9-])": "tw-$1-primary-active",
"tw-([^-]+)-button-strong-text(?![a-zA-Z0-9-])": "tw-$1-primary-on-primary",
"tw-([^-]+)-button-strong-icon(?![a-zA-Z0-9-])": "tw-$1-primary-on-primary",
"tw-([^-]+)-button-strong-negative-background(?![a-zA-Z0-9-])": "tw-$1-error",
"tw-([^-]+)-button-strong-negative-background-hover(?![a-zA-Z0-9-])": "tw-$1-error-hover",
"tw-([^-]+)-button-strong-negative-background-pressed(?![a-zA-Z0-9-])": "tw-$1-error-active",
"tw-([^-]+)-button-strong-negative-text(?![a-zA-Z0-9-])": "tw-$1-error-on-error",
"tw-([^-]+)-button-strong-negative-icon(?![a-zA-Z0-9-])": "tw-$1-error-on-error",
"tw-([^-]+)-button-strong-positive-background(?![a-zA-Z0-9-])": "tw-$1-success",
"tw-([^-]+)-button-strong-positive-background-hover(?![a-zA-Z0-9-])": "tw-$1-success-hover",
"tw-([^-]+)-button-strong-positive-background-pressed(?![a-zA-Z0-9-])": "tw-$1-success-active",
"tw-([^-]+)-button-strong-positive-text(?![a-zA-Z0-9-])": "tw-$1-success-on-success",
"tw-([^-]+)-button-strong-positive-icon(?![a-zA-Z0-9-])": "tw-$1-success-on-success",
"tw-([^-]+)-button-danger-background(?![a-zA-Z0-9-])": "tw-$1-error",
"tw-([^-]+)-button-danger-background-hover(?![a-zA-Z0-9-])": "tw-$1-error-hover",
"tw-([^-]+)-button-danger-background-pressed(?![a-zA-Z0-9-])": "tw-$1-error-active",
"tw-([^-]+)-button-danger-text(?![a-zA-Z0-9-])": "tw-$1-error-on-error",
"tw-([^-]+)-button-danger-icon(?![a-zA-Z0-9-])": "tw-$1-error-on-error"
};
const tailwindTokenReplacements = {
// fontSize
"tw-text-body-x-small(?![a-zA-Z0-9-])": "tw-text-x-small",
"tw-text-body-small(?![a-zA-Z0-9-])": "tw-text-small",
"tw-text-body-medium(?![a-zA-Z0-9-])": "tw-text-medium",
"tw-text-body-large(?![a-zA-Z0-9-])": "tw-text-large",
"tw-text-code-small(?![a-zA-Z0-9-])": "tw-text-small",
"tw-text-code-medium(?![a-zA-Z0-9-])": "tw-text-medium",
"tw-text-code-large(?![a-zA-Z0-9-])": "tw-text-large",
// new named token key in the new `fontSize` config using the variable lookup method.
"tw-text-heading-medium(?![a-zA-Z0-9-])": "tw-text-medium",
// Note: new 'medium' fontSize is used for old 'heading-medium'
"tw-text-heading-large(?![a-zA-Z0-9-])": "tw-text-large",
// Note: new 'large' fontSize is used for old 'heading-large'
"tw-text-heading-x-large(?![a-zA-Z0-9-])": "tw-text-x-large",
"tw-text-heading-xx-large(?![a-zA-Z0-9-])": "tw-text-xx-large",
// fontFamily
"tw-font-body(?![a-zA-Z0-9-])": "tw-font-primary",
"tw-font-body--stack(?![a-zA-Z0-9-])": "tw-font-primary",
// (via --body-family-stack -> --body-family -> new primary)
"tw-font-code(?![a-zA-Z0-9-])": "tw-font-monospace",
// Assuming --typography-font-family-monoe in CSS map meant --typography-font-family-monospace
"tw-font-code--stack(?![a-zA-Z0-9-])": "tw-font-monospace",
"tw-font-heading(?![a-zA-Z0-9-])": "tw-font-primary",
"tw-font-heading--stack(?![a-zA-Z0-9-])": "tw-font-primary",
// boxShadow (Only for direct var-to-var mappings)
"tw-shadow-matrix(?![a-zA-Z0-9-])": "tw-shadow",
"tw-shadow-top-matrix(?![a-zA-Z0-9-])": "tw-shadow",
"tw-shadow-bottom-matrix(?![a-zA-Z0-9-])": "tw-shadow",
"tw-shadow-large-matrix(?![a-zA-Z0-9-])": "tw-shadow-large",
// borderWidth
"tw-border-width(?![a-zA-Z0-9-])": "tw-border-width-medium",
"tw-border-width-large(?![a-zA-Z0-9-])": "tw-border-width-large",
// outline
"tw-outline-violet(?![a-zA-Z0-9-])": "tw-outline",
"tw-outline-blue(?![a-zA-Z0-9-])": "tw-outline",
// borderRadius
"tw-rounded(?![a-zA-Z0-9-])": "tw-rounded-medium",
// Old DEFAULT (var(--radius)) maps to new borderRadius.medium (var(--border-radius-medium))
"tw-rounded-small(?![a-zA-Z0-9-])": "tw-rounded-small",
"tw-rounded-large(?![a-zA-Z0-9-])": "tw-rounded-large",
"tw-rounded-x-large(?![a-zA-Z0-9-])": "tw-rounded-x-large",
// spacing
"tw-([^-]+)-xxs(?![a-zA-Z0-9-])": "tw-$1-xx-small",
"tw-([^-]+)-xs(?![a-zA-Z0-9-])": "tw-$1-x-small",
"tw-([^-]+)-s(?![a-zA-Z0-9-])": "tw-$1-small",
"tw-([^-]+)-m(?![a-zA-Z0-9-])": "tw-$1-medium",
"tw-([^-]+)-xl(?![a-zA-Z0-9-])": "tw-$1-x-large",
"tw-([^-]+)-xxl(?![a-zA-Z0-9-])": "tw-$1-xx-large"
};
const tailwindClassReplacements = {
...tailwindColorReplacements,
...tailwindTokenReplacements
};
const deprecatedOccurrences = [];
const logDeprecatedInFile = (filePath, deprecatedMap) => {
try {
const stats = fs.statSync(filePath);
if (!stats.isFile()) {
return;
}
const content = fs.readFileSync(filePath, "utf8");
const lines = content.split("\n");
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
for (const deprecatedVar of Object.keys(deprecatedMap)) {
if (line?.includes(deprecatedVar)) {
deprecatedOccurrences.push({
filePath,
line: i + 1,
variable: deprecatedVar
});
}
}
}
} catch (error) {
console.error(
`Could not check for deprecated variables in file ${filePath}: ${error instanceof Error ? error.message : "Unknown error"}`
);
}
};
const replaceInFile = (filePath, replacementMap, dryRun) => {
try {
const stats = fs.statSync(filePath);
if (!stats.isFile()) {
return;
}
const content = fs.readFileSync(filePath, "utf8");
const replacementsToApply = [];
for (const [selector, value] of Object.entries(replacementMap)) {
const regexMatch = content.match(new RegExp(selector, "g"));
for (const match of regexMatch ?? []) {
const newValue = match.replaceAll(new RegExp(selector, "g"), value);
if (newValue !== match) {
replacementsToApply.push({
selector,
replacement: value,
oldValue: match,
newValue
});
}
}
}
if (replacementsToApply.length === 0) {
return;
}
if (dryRun) {
console.log(`Potential changes for: ${filePath}`);
for (const { oldValue, newValue } of replacementsToApply) {
console.log(` '${oldValue}' => '${newValue}'`);
}
console.log("");
return;
}
let modifiedContent = content;
for (const { selector, newValue } of replacementsToApply) {
modifiedContent = modifiedContent.replaceAll(new RegExp(selector, "g"), newValue);
}
fs.writeFileSync(filePath, modifiedContent, "utf8");
console.log(`Updated: ${filePath}`);
} catch (error) {
console.error(
`Could not process file ${filePath}: ${error instanceof Error ? error.message : "Unknown error"}`
);
}
};
const traverseDir = (dir, replacementMap, deprecatedMap, dryRun) => {
try {
const files = fs.readdirSync(dir);
for (const file of files) {
const fullPath = path.join(dir, file);
const stat = fs.statSync(fullPath);
if (stat.isDirectory() && !fullPath.includes("node_modules") && !fullPath.includes("dist") && !fullPath.includes("cli/tools")) {
traverseDir(fullPath, replacementMap, deprecatedMap, dryRun);
} else {
replaceInFile(fullPath, replacementMap, dryRun);
logDeprecatedInFile(fullPath, deprecatedMap);
}
}
} catch (error) {
console.error(`Could not read directory ${dir}: ${error instanceof Error ? error.message : "Unknown error"}`);
}
};
const replaceTokens = (targetPath, replacementMap, deprecatedMap, { dryRun = false, cli = false } = {}) => {
if (dryRun && !cli) {
console.log("\n\n==================================================");
console.log("DRY RUN MODE ENABLED. NO FILES WILL BE MODIFIED.");
console.log("==================================================\n");
}
try {
const stats = fs.statSync(targetPath);
if (stats.isDirectory()) {
traverseDir(targetPath, replacementMap, deprecatedMap, dryRun);
} else if (stats.isFile()) {
replaceInFile(targetPath, replacementMap, dryRun);
logDeprecatedInFile(targetPath, deprecatedMap);
}
} catch (error) {
console.error(
`Could not process path ${targetPath}: ${error instanceof Error ? error.message : "Unknown error"}`
);
}
if (deprecatedOccurrences.length > 0 && !cli) {
console.log("\n\n==================================================");
console.log("🚨 DEPRECATED CSS VARIABLES WITHOUT REPLACEMENT FOUND 🚨");
console.log("==================================================\n");
const groupedByFile = deprecatedOccurrences.reduce(
(acc, { filePath, line, variable }) => {
if (!acc[filePath]) {
acc[filePath] = [];
}
acc[filePath].push(` - Line ${line}: ${variable}`);
return acc;
},
{}
);
for (const [file, occurrences] of Object.entries(groupedByFile)) {
console.log(`File: ${file}`);
for (const occurrence of occurrences) {
console.log(occurrence);
}
console.log("");
}
console.log(
"Please replace the variables listed above with their new counterparts from the design system tokens."
);
console.log("==================================================\n");
process.exit(1);
}
};
const replaceCssVariables = (targetPath, { dryRun = false, cli = false } = {}) => {
const escapedCssVariableReplacements = Object.fromEntries(
Object.entries(cssVariableReplacements).map(([key, value]) => [
key.replaceAll(/[$()*+./?[\\\]^{|}-]/g, "\\$&"),
value
])
);
replaceTokens(targetPath, escapedCssVariableReplacements, deprecatedCssVariables, { dryRun, cli });
};
const replaceTailwindClasses = (targetPath, { dryRun = false, cli = false } = {}) => {
replaceTokens(targetPath, tailwindClassReplacements, {}, { dryRun, cli });
};
const deprecated = [
"Accordion",
"AccordionHeaderIcon",
"AccordionHeaderProps",
"AccordionItem",
"ActionMenuProps",
"Breadcrumb",
"Breadcrumbs",
"CollapsibleWrap",
"Color",
"DatePicker",
"DatePickerProps",
"DatePickerTrigger",
"EditableMode",
"EditableText",
"EditableTextProps",
"FOCUS_VISIBLE_STYLE",
"FOCUS_VISIBLE_STYLE_INSET",
"FOCUS_WITHIN_STYLE",
"FilterableMultiSelect",
"FilterableMultiSelectItem",
"FilterableMultiSelectProps",
"FilterableMultiSelectSize",
"FilterableMultiSelectType",
"FormControl",
"FormControlDirection",
"FormControlProps",
"FormControlStyle",
"FrontifyPattern",
"HelperPosition",
"Item",
"LegacyTextarea",
"LegacyTextareaProps",
"MenuItem",
"MenuItemContentSize",
"MenuItemProps",
"MenuItemStyle",
"MenuItemType",
"MultiSelect",
"MultiSelectItem",
"MultiSelectProps",
"MultiSelectSize",
"MultiSelectType",
"OrderableList",
"OrderableListItem",
"OrderableListItemStyle",
"OrderableListProps",
"Palette",
"PatternDesign",
"PatternScale",
"PatternTheme",
"ReactDatePickerRef",
"RenderListItem",
"TABBABLE_ELEMENTS",
"Toast",
"ToastAnimationDirection",
"ToastStyle",
"Validation",
"useCopy",
"useForwardedRef",
"useMemoizedId",
"useMobileDetection"
];
const detectedExports = {
deprecated
};
const __dirname$2 = dirname(fileURLToPath(import.meta.url));
const require$1 = createRequire(import.meta.url);
const transformsDirectory = join(__dirname$2, "transforms");
const jscodeshiftExecutable = require$1.resolve(".bin/jscodeshift");
const runCodeshift = async (pathToAnalyze, transformName, options) => {
const transformPath = join(transformsDirectory, `${transformName}.ts`);
await execa(
jscodeshiftExecutable,
[
"--parser",
"tsx",
"--extensions",
"ts,tsx,js,jsx",
"--ignore-pattern",
"**/node_modules/**",
"--ignore-pattern",
"**/dist/**",
"--ignore-pattern",
"**/build/**",
"--ignore-pattern",
"**/.git/**",
"--ignore-pattern",
"**/public/**",
"--transform",
transformPath,
pathToAnalyze
],
{
env: {
...options
}
}
);
return;
};
const __dirname$1 = dirname(fileURLToPath(import.meta.url));
const tempDir = path.resolve(__dirname$1, "./temp");
const getImports = (pathToAnalyze, selectedImports = []) => {
if (existsSync(tempDir)) {
rmSync(tempDir, { recursive: true });
}
return runCodeshift(pathToAnalyze, "find-imports", {
selectedImports: selectedImports.join(","),
tempDir
}).then(() => {
if (existsSync(join(tempDir, "detected-imports.txt"))) {
const detectedImports = readFileSync(join(tempDir, "detected-imports.txt"), "utf8").split("\n").filter((line) => line.trim() !== "").map((line) => JSON.parse(line));
rmSync(join(tempDir), { recursive: true });
return detectedImports;
} else {
return [];
}
});
};
const findDeprecatedImports = (pathToAnalyze, outputPath) => {
getImports(pathToAnalyze, detectedExports.deprecated).then((detectedImports) => {
if (outputPath) {
writeFileSync(outputPath, JSON.stringify(detectedImports, null, 4), "utf8");
} else {
console.log(detectedImports);
}
if (detectedImports.length === 0) {
console.log("No deprecated imports found");
}
}).catch((error) => {
console.error("ERROR", error);
});
};
const program = new Command();
program.name("fondue-analyzer").description("Analyze fondue usage");
program.command("find-deprecated-imports").description("Find imports of deprecated fondue functions and components").argument("<path>", "Path to be analyzed").option("-o, --output <path>", "Output path").action((path2, options) => {
findDeprecatedImports(path2, options.output);
});
program.command("migrate-tokens").description("Migrate fondue tokens").argument("<path>", "Path to be analyzed").option("--dry", "Dry run").option("--css", "Migrate css variables").option("--tailwind", "Migrate tailwind classes").action((path2, options) => {
if (options.css || !options.tailwind) {
replaceCssVariables(path2, { dryRun: options.dry });
}
if (options.tailwind || !options.css) {
replaceTailwindClasses(path2, { dryRun: options.dry });
}
});
program.parse();