migrate-colors-primer-18.js

#!/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])
    }
  }
}