#!/usr/bin/env node import walkSync from 'walk-sync' import fs from 'fs/promises' const colorMap = { 'color-text-primary': 'color-fg-default', 'color-text-secondary': 'color-fg-muted', 'color-text-tertiary': 'color-fg-muted', 'color-text-link': 'color-fg-accent', 'color-text-success': 'color-fg-success', 'color-text-warning': 'color-fg-attention', 'color-text-danger': 'color-fg-danger', 'color-text-inverse': 'color-fg-on-emphasis', 'color-text-white': '', 'color-icon-primary': 'color-fg-default', 'color-icon-secondary': 'color-fg-muted', 'color-icon-tertiary': 'color-fg-muted', 'color-icon-info': 'color-fg-accent', 'color-icon-danger': 'color-fg-danger', 'color-icon-success': 'color-fg-success', 'color-icon-warning': 'color-fg-attention', 'color-border-primary': 'color-border-default', 'color-border-secondary': 'color-border-muted', 'color-border-tertiary': 'color-border-default', 'color-border-inverse': '', 'color-border-info': 'color-border-accent-emphasis', 'color-border-warning': 'color-border-attention-emphasis', 'color-bg-canvas': 'color-bg-default', 'color-bg-canvas-inverse': 'color-bg-emphasis', 'color-bg-canvas-inset': 'color-bg-inset', 'color-bg-primary': 'color-bg-default', 'color-bg-secondary': 'color-bg-subtle', 'color-bg-tertiary': 'color-bg-subtle', 'color-bg-info': 'color-bg-accent', 'color-bg-info-inverse': 'color-bg-accent-emphasis', 'color-bg-danger-inverse': 'color-bg-danger-emphasis', 'color-bg-success-inverse': 'color-bg-success-emphasis', 'color-bg-warning': 'color-bg-attention', 'color-bg-warning-inverse': 'color-bg-attention-emphasis', 'text-inherit': 'color-fg-inherit', } /******************************************************************************/ async function readFiles(opts) { const paths = walkSync('./', { directories: false, includeBasePath: true, ...opts, }) return await Promise.all(paths.map(async (path) => [path, await fs.readFile(path, 'utf8')])) } function withAllFiles(files, fn) { return files.map(([path, file]) => [path, fn(path, file)]) } async function writeFiles(files) { return await Promise.all(files.map(async ([path, file]) => await fs.writeFile(path, file))) } /******************************************************************************/ let files = await readFiles({ globs: [ 'components/**', 'content/**', 'contributing/**', 'data/**', 'includes/**', 'lib/**', 'middleware/**', 'pages/**', 'stylesheets/**', 'tests/**', // 'translations/**', ], }) files = withAllFiles(files, (path, file) => { Object.keys(colorMap) .sort((a, b) => b.length - a.length) .forEach((key) => { file = file.replaceAll(key, colorMap[key]) }) return file }) await writeFiles(files) /**** check for allowed colors in vars ****/ const allowedVarColors = [ 'color-canvas-default-transparent', 'color-marketing-icon-primary', 'color-marketing-icon-secondary', 'color-diff-blob-addition-num-text', 'color-diff-blob-addition-fg', 'color-diff-blob-addition-num-bg', 'color-diff-blob-addition-line-bg', 'color-diff-blob-addition-word-bg', 'color-diff-blob-deletion-num-text', 'color-diff-blob-deletion-fg', 'color-diff-blob-deletion-num-bg', 'color-diff-blob-deletion-line-bg', 'color-diff-blob-deletion-word-bg', 'color-diff-blob-hunk-num-bg', 'color-diff-blob-expander-icon', 'color-diff-blob-selected-line-highlight-mix-blend-mode', 'color-diffstat-deletion-border', 'color-diffstat-addition-border', 'color-diffstat-addition-bg', 'color-search-keyword-hl', 'color-prettylights-syntax-comment', 'color-prettylights-syntax-constant', 'color-prettylights-syntax-entity', 'color-prettylights-syntax-storage-modifier-import', 'color-prettylights-syntax-entity-tag', 'color-prettylights-syntax-keyword', 'color-prettylights-syntax-string', 'color-prettylights-syntax-variable', 'color-prettylights-syntax-brackethighlighter-unmatched', 'color-prettylights-syntax-invalid-illegal-text', 'color-prettylights-syntax-invalid-illegal-bg', 'color-prettylights-syntax-carriage-return-text', 'color-prettylights-syntax-carriage-return-bg', 'color-prettylights-syntax-string-regexp', 'color-prettylights-syntax-markup-list', 'color-prettylights-syntax-markup-heading', 'color-prettylights-syntax-markup-italic', 'color-prettylights-syntax-markup-bold', 'color-prettylights-syntax-markup-deleted-text', 'color-prettylights-syntax-markup-deleted-bg', 'color-prettylights-syntax-markup-inserted-text', 'color-prettylights-syntax-markup-inserted-bg', 'color-prettylights-syntax-markup-changed-text', 'color-prettylights-syntax-markup-changed-bg', 'color-prettylights-syntax-markup-ignored-text', 'color-prettylights-syntax-markup-ignored-bg', 'color-prettylights-syntax-meta-diff-range', 'color-prettylights-syntax-brackethighlighter-angle', 'color-prettylights-syntax-sublimelinter-gutter-mark', 'color-prettylights-syntax-constant-other-reference-link', 'color-codemirror-text', 'color-codemirror-bg', 'color-codemirror-gutters-bg', 'color-codemirror-guttermarker-text', 'color-codemirror-guttermarker-subtle-text', 'color-codemirror-linenumber-text', 'color-codemirror-cursor', 'color-codemirror-selection-bg', 'color-codemirror-activeline-bg', 'color-codemirror-matchingbracket-text', 'color-codemirror-lines-bg', 'color-codemirror-syntax-comment', 'color-codemirror-syntax-constant', 'color-codemirror-syntax-entity', 'color-codemirror-syntax-keyword', 'color-codemirror-syntax-storage', 'color-codemirror-syntax-string', 'color-codemirror-syntax-support', 'color-codemirror-syntax-variable', 'color-checks-bg', 'color-checks-run-border-width', 'color-checks-container-border-width', 'color-checks-text-primary', 'color-checks-text-secondary', 'color-checks-text-link', 'color-checks-btn-icon', 'color-checks-btn-hover-icon', 'color-checks-btn-hover-bg', 'color-checks-input-text', 'color-checks-input-placeholder-text', 'color-checks-input-focus-text', 'color-checks-input-bg', 'color-checks-input-shadow', 'color-checks-donut-error', 'color-checks-donut-pending', 'color-checks-donut-success', 'color-checks-donut-neutral', 'color-checks-dropdown-text', 'color-checks-dropdown-bg', 'color-checks-dropdown-border', 'color-checks-dropdown-shadow', 'color-checks-dropdown-hover-text', 'color-checks-dropdown-hover-bg', 'color-checks-dropdown-btn-hover-text', 'color-checks-dropdown-btn-hover-bg', 'color-checks-scrollbar-thumb-bg', 'color-checks-header-label-text', 'color-checks-header-label-open-text', 'color-checks-header-border', 'color-checks-header-icon', 'color-checks-line-text', 'color-checks-line-num-text', 'color-checks-line-timestamp-text', 'color-checks-line-hover-bg', 'color-checks-line-selected-bg', 'color-checks-line-selected-num-text', 'color-checks-line-dt-fm-text', 'color-checks-line-dt-fm-bg', 'color-checks-gate-bg', 'color-checks-gate-text', 'color-checks-gate-waiting-text', 'color-checks-step-header-open-bg', 'color-checks-step-error-text', 'color-checks-step-warning-text', 'color-checks-logline-text', 'color-checks-logline-num-text', 'color-checks-logline-debug-text', 'color-checks-logline-error-text', 'color-checks-logline-error-num-text', 'color-checks-logline-error-bg', 'color-checks-logline-warning-text', 'color-checks-logline-warning-num-text', 'color-checks-logline-warning-bg', 'color-checks-logline-command-text', 'color-checks-logline-section-text', 'color-checks-ansi-black', 'color-checks-ansi-black-bright', 'color-checks-ansi-white', 'color-checks-ansi-white-bright', 'color-checks-ansi-gray', 'color-checks-ansi-red', 'color-checks-ansi-red-bright', 'color-checks-ansi-green', 'color-checks-ansi-green-bright', 'color-checks-ansi-yellow', 'color-checks-ansi-yellow-bright', 'color-checks-ansi-blue', 'color-checks-ansi-blue-bright', 'color-checks-ansi-magenta', 'color-checks-ansi-magenta-bright', 'color-checks-ansi-cyan', 'color-checks-ansi-cyan-bright', 'color-project-header-bg', 'color-project-sidebar-bg', 'color-project-gradient-in', 'color-project-gradient-out', 'color-mktg-success', 'color-mktg-info', 'color-mktg-bg-shade-gradient-top', 'color-mktg-bg-shade-gradient-bottom', 'color-mktg-btn-bg-top', 'color-mktg-btn-bg-bottom', 'color-mktg-btn-bg-overlay-top', 'color-mktg-btn-bg-overlay-bottom', 'color-mktg-btn-text', 'color-mktg-btn-primary-bg-top', 'color-mktg-btn-primary-bg-bottom', 'color-mktg-btn-primary-bg-overlay-top', 'color-mktg-btn-primary-bg-overlay-bottom', 'color-mktg-btn-primary-text', 'color-mktg-btn-enterprise-bg-top', 'color-mktg-btn-enterprise-bg-bottom', 'color-mktg-btn-enterprise-bg-overlay-top', 'color-mktg-btn-enterprise-bg-overlay-bottom', 'color-mktg-btn-enterprise-text', 'color-mktg-btn-outline-text', 'color-mktg-btn-outline-border', 'color-mktg-btn-outline-hover-text', 'color-mktg-btn-outline-hover-border', 'color-mktg-btn-outline-focus-border', 'color-mktg-btn-outline-focus-border-inset', 'color-mktg-btn-dark-text', 'color-mktg-btn-dark-border', 'color-mktg-btn-dark-hover-text', 'color-mktg-btn-dark-hover-border', 'color-mktg-btn-dark-focus-border', 'color-mktg-btn-dark-focus-border-inset', 'color-avatar-bg', 'color-avatar-border', 'color-avatar-stack-fade', 'color-avatar-stack-fade-more', 'color-avatar-child-shadow', 'color-topic-tag-border', 'color-select-menu-backdrop-border', 'color-select-menu-tap-highlight', 'color-select-menu-tap-focus-bg', 'color-overlay-shadow', 'color-header-text', 'color-header-bg', 'color-header-logo', 'color-header-search-bg', 'color-header-search-border', 'color-sidenav-selected-bg', 'color-menu-bg-active', 'color-input-disabled-bg', 'color-timeline-badge-bg', 'color-ansi-black', 'color-ansi-black-bright', 'color-ansi-white', 'color-ansi-white-bright', 'color-ansi-gray', 'color-ansi-red', 'color-ansi-red-bright', 'color-ansi-green', 'color-ansi-green-bright', 'color-ansi-yellow', 'color-ansi-yellow-bright', 'color-ansi-blue', 'color-ansi-blue-bright', 'color-ansi-magenta', 'color-ansi-magenta-bright', 'color-ansi-cyan', 'color-ansi-cyan-bright', 'color-btn-text', 'color-btn-bg', 'color-btn-border', 'color-btn-shadow', 'color-btn-inset-shadow', 'color-btn-hover-bg', 'color-btn-hover-border', 'color-btn-active-bg', 'color-btn-active-border', 'color-btn-selected-bg', 'color-btn-focus-bg', 'color-btn-focus-border', 'color-btn-focus-shadow', 'color-btn-shadow-active', 'color-btn-shadow-input-focus', 'color-btn-counter-bg', 'color-btn-primary-text', 'color-btn-primary-bg', 'color-btn-primary-border', 'color-btn-primary-shadow', 'color-btn-primary-inset-shadow', 'color-btn-primary-hover-bg', 'color-btn-primary-hover-border', 'color-btn-primary-selected-bg', 'color-btn-primary-selected-shadow', 'color-btn-primary-disabled-text', 'color-btn-primary-disabled-bg', 'color-btn-primary-disabled-border', 'color-btn-primary-focus-bg', 'color-btn-primary-focus-border', 'color-btn-primary-focus-shadow', 'color-btn-primary-icon', 'color-btn-primary-counter-bg', 'color-btn-outline-text', 'color-btn-outline-hover-text', 'color-btn-outline-hover-bg', 'color-btn-outline-hover-border', 'color-btn-outline-hover-shadow', 'color-btn-outline-hover-inset-shadow', 'color-btn-outline-hover-counter-bg', 'color-btn-outline-selected-text', 'color-btn-outline-selected-bg', 'color-btn-outline-selected-border', 'color-btn-outline-selected-shadow', 'color-btn-outline-disabled-text', 'color-btn-outline-disabled-bg', 'color-btn-outline-disabled-counter-bg', 'color-btn-outline-focus-border', 'color-btn-outline-focus-shadow', 'color-btn-outline-counter-bg', 'color-btn-danger-text', 'color-btn-danger-hover-text', 'color-btn-danger-hover-bg', 'color-btn-danger-hover-border', 'color-btn-danger-hover-shadow', 'color-btn-danger-hover-inset-shadow', 'color-btn-danger-hover-counter-bg', 'color-btn-danger-selected-text', 'color-btn-danger-selected-bg', 'color-btn-danger-selected-border', 'color-btn-danger-selected-shadow', 'color-btn-danger-disabled-text', 'color-btn-danger-disabled-bg', 'color-btn-danger-disabled-counter-bg', 'color-btn-danger-focus-border', 'color-btn-danger-focus-shadow', 'color-btn-danger-counter-bg', 'color-btn-danger-icon', 'color-btn-danger-hover-icon', 'color-underlinenav-icon', 'color-underlinenav-border-hover', 'color-fg-default', 'color-fg-muted', 'color-fg-subtle', 'color-fg-on-emphasis', 'color-canvas-default', 'color-canvas-overlay', 'color-canvas-inset', 'color-canvas-subtle', 'color-border-default', 'color-border-muted', 'color-border-subtle', 'color-shadow-small', 'color-shadow-medium', 'color-shadow-large', 'color-shadow-extra-large', 'color-neutral-emphasis-plus', 'color-neutral-emphasis', 'color-neutral-muted', 'color-neutral-subtle', 'color-accent-fg', 'color-accent-emphasis', 'color-accent-muted', 'color-accent-subtle', 'color-success-fg', 'color-success-emphasis', 'color-success-muted', 'color-success-subtle', 'color-attention-fg', 'color-attention-emphasis', 'color-attention-muted', 'color-attention-subtle', 'color-severe-fg', 'color-severe-emphasis', 'color-severe-muted', 'color-severe-subtle', 'color-danger-fg', 'color-danger-emphasis', 'color-danger-muted', 'color-danger-subtle', 'color-done-fg', 'color-done-emphasis', 'color-done-muted', 'color-done-subtle', 'color-sponsors-fg', 'color-sponsors-emphasis', 'color-sponsors-muted', 'color-sponsors-subtle', 'color-primer-fg-disabled', 'color-primer-canvas-backdrop', 'color-primer-canvas-sticky', 'color-primer-border-active', 'color-primer-border-contrast', 'color-primer-shadow-highlight', 'color-primer-shadow-inset', 'color-primer-shadow-focus', 'color-scale-black', 'color-scale-white', 'color-scale-gray-0', 'color-scale-gray-1', 'color-scale-gray-2', 'color-scale-gray-3', 'color-scale-gray-4', 'color-scale-gray-5', 'color-scale-gray-6', 'color-scale-gray-7', 'color-scale-gray-8', 'color-scale-gray-9', 'color-scale-blue-0', 'color-scale-blue-1', 'color-scale-blue-2', 'color-scale-blue-3', 'color-scale-blue-4', 'color-scale-blue-5', 'color-scale-blue-6', 'color-scale-blue-7', 'color-scale-blue-8', 'color-scale-blue-9', 'color-scale-green-0', 'color-scale-green-1', 'color-scale-green-2', 'color-scale-green-3', 'color-scale-green-4', 'color-scale-green-5', 'color-scale-green-6', 'color-scale-green-7', 'color-scale-green-8', 'color-scale-green-9', 'color-scale-yellow-0', 'color-scale-yellow-1', 'color-scale-yellow-2', 'color-scale-yellow-3', 'color-scale-yellow-4', 'color-scale-yellow-5', 'color-scale-yellow-6', 'color-scale-yellow-7', 'color-scale-yellow-8', 'color-scale-yellow-9', 'color-scale-orange-0', 'color-scale-orange-1', 'color-scale-orange-2', 'color-scale-orange-3', 'color-scale-orange-4', 'color-scale-orange-5', 'color-scale-orange-6', 'color-scale-orange-7', 'color-scale-orange-8', 'color-scale-orange-9', 'color-scale-red-0', 'color-scale-red-1', 'color-scale-red-2', 'color-scale-red-3', 'color-scale-red-4', 'color-scale-red-5', 'color-scale-red-6', 'color-scale-red-7', 'color-scale-red-8', 'color-scale-red-9', 'color-scale-purple-0', 'color-scale-purple-1', 'color-scale-purple-2', 'color-scale-purple-3', 'color-scale-purple-4', 'color-scale-purple-5', 'color-scale-purple-6', 'color-scale-purple-7', 'color-scale-purple-8', 'color-scale-purple-9', 'color-scale-pink-0', 'color-scale-pink-1', 'color-scale-pink-2', 'color-scale-pink-3', 'color-scale-pink-4', 'color-scale-pink-5', 'color-scale-pink-6', 'color-scale-pink-7', 'color-scale-pink-8', 'color-scale-pink-9', 'color-scale-coral-0', 'color-scale-coral-1', 'color-scale-coral-2', 'color-scale-coral-3', 'color-scale-coral-4', 'color-scale-coral-5', 'color-scale-coral-6', 'color-scale-coral-7', 'color-scale-coral-8', 'color-scale-coral-9', ] for (const [path, file] of files) { for (const match of file.matchAll(/var\(--(.*?)\)/g)) { if (!allowedVarColors.includes(match[1])) { console.error(path, match[1]) } } }