-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update pattern and simply experimental approach
- Loading branch information
1 parent
3b12243
commit ea831ef
Showing
1 changed file
with
131 additions
and
138 deletions.
There are no files selected for viewing
269 changes: 131 additions & 138 deletions
269
polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,147 +1,140 @@ | ||
| import type {FileInfo, API} from 'jscodeshift'; | ||
|
|
||
| // import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform'; | ||
|
|
||
| export default function transformer(fileInfo: FileInfo, _: API) { | ||
| return Object.entries(replacementMaps['/.+/']).reduce( | ||
| return Object.entries(replacementMap).reduce( | ||
| (fileInfoSource, [fromToken, toToken]) => | ||
| fileInfoSource.replace(new RegExp(`${fromToken}(?!-)`, 'g'), toToken), | ||
| fileInfoSource.replace( | ||
| new RegExp(String.raw`${fromToken}(?![\w-])`, 'g'), | ||
| toToken, | ||
| ), | ||
| fileInfo.source, | ||
| ); | ||
| // return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps}); | ||
| } | ||
|
|
||
| const replacementMaps = { | ||
| '/.+/': { | ||
| '--p-color-bg': '--p-color-bg-surface', | ||
| // '--p-color-bg-hover': '--p-color-bg-surface-hover', | ||
| // '--p-color-bg-active': '--p-color-bg-surface-active', | ||
| // '--p-color-bg-disabled': '--p-color-bg-surface-disabled', | ||
| '--p-color-bg-subdued': '--p-color-bg-surface-secondary', | ||
| '--p-color-bg-subdued-hover': '--p-color-bg-surface-secondary-hover', | ||
| '--p-color-bg-subdued-active': '--p-color-bg-surface-secondary-active', | ||
| '--p-color-bg-secondary-experimental': '--p-color-bg-surface-tertiary', | ||
| '--p-color-bg-strong': '--p-color-bg-fill-tertiary', | ||
| '--p-color-bg-strong-hover': '--p-color-bg-fill-tertiary-hover', | ||
| '--p-color-bg-strong-active': '--p-color-bg-fill-tertiary-active', | ||
| '--p-color-bg-input': '--p-color-input-bg-surface', | ||
| '--p-color-bg-input-hover-experimental': '--p-color-input-bg-surface-hover', | ||
| '--p-color-bg-input-active-experimental': | ||
| '--p-color-input-bg-surface-active', | ||
| // '--p-color-bg-primary': '--p-color-bg-fill-brand', | ||
| // '--p-color-bg-primary-hover': '--p-color-bg-fill-brand-hover', | ||
| // '--p-color-bg-primary-active': '--p-color-bg-fill-brand-active', | ||
| // '--p-color-bg-primary-subdued': '--p-color-bg-surface-brand', | ||
| // '--p-color-bg-primary-subdued-hover': '--p-color-bg-surface-brand-hover', | ||
| // '--p-color-bg-primary-subdued-active': '--p-color-bg-surface-brand-active', | ||
| // '--p-color-bg-primary-subdued-selected': '--p-color-bg-surface-brand-selected', | ||
| '--p-color-bg-app-selected': '--p-color-bg-surface-selected', | ||
| '--p-color-bg-success-strong': '--p-color-bg-fill-success', | ||
| '--p-color-bg-success-strong-hover-experimental': | ||
| '--p-color-bg-fill-success-hover', | ||
| '--p-color-bg-success-strong-active-experimental': | ||
| '--p-color-bg-fill-success-active', | ||
| '--p-color-bg-success': '--p-color-bg-fill-success-secondary', | ||
| '--p-color-bg-success-subdued': '--p-color-bg-surface-success', | ||
| '--p-color-bg-success-subdued-hover': '--p-color-bg-surface-success-hover', | ||
| '--p-color-bg-success-subdued-active': | ||
| '--p-color-bg-surface-success-active', | ||
| '--p-color-bg-critical-strong': '--p-color-bg-fill-critical', | ||
| '--p-color-bg-critical-strong-hover': '--p-color-bg-fill-critical-hover', | ||
| '--p-color-bg-critical-strong-active': '--p-color-bg-fill-critical-active', | ||
| '--p-color-bg-critical': '--p-color-bg-fill-critical-secondary', | ||
| '--p-color-bg-critical-subdued': '--p-color-bg-surface-critical', | ||
| '--p-color-bg-critical-subdued-hover': | ||
| '--p-color-bg-surface-critical-hover', | ||
| '--p-color-bg-critical-subdued-active': | ||
| '--p-color-bg-surface-critical-active', | ||
| '--p-color-bg-caution-strong': '--p-color-bg-fill-caution', | ||
| '--p-color-bg-caution': '--p-color-bg-fill-caution-secondary', | ||
| '--p-color-bg-caution-subdued': '--p-color-bg-surface-caution', | ||
| '--p-color-bg-caution-subdued-hover': '--p-color-bg-surface-caution-hover', | ||
| '--p-color-bg-caution-subdued-active': | ||
| '--p-color-bg-surface-caution-active', | ||
| '--p-color-bg-info-strong': '--p-color-bg-fill-info', | ||
| '--p-color-bg-info': '--p-color-bg-fill-info-secondary', | ||
| '--p-color-bg-info-subdued': '--p-color-bg-surface-info', | ||
| '--p-color-bg-info-subdued-hover': '--p-color-bg-surface-info-hover', | ||
| '--p-color-bg-info-subdued-active': '--p-color-bg-surface-info-active', | ||
| '--p-color-bg-warning-strong-experimental': '--p-color-bg-fill-warning', | ||
| '--p-color-bg-warning': '--p-color-bg-fill-warning-secondary', | ||
| '--p-color-bg-warning-subdued-experimental': '--p-color-bg-surface-warning', | ||
| '--p-color-bg-magic-strong': '--p-color-bg-fill-magic', | ||
| '--p-color-bg-magic': '--p-color-bg-fill-magic-secondary', | ||
| '--p-color-bg-magic-hover': '--p-color-bg-fill-magic-secondary-hover', | ||
| '--p-color-bg-magic-active': '--p-color-bg-fill-magic-secondary-active', | ||
| // '--p-color-bg-magic-subdued': '--p-color-bg-surface-magic', | ||
| '--p-color-bg-magic-subdued-hover': '--p-color-bg-surface-magic-hover', | ||
| '--p-color-bg-inset': '--p-color-bg-fill-secondary', | ||
| '--p-color-bg-inset-strong': '--p-color-bg-fill-inverse', | ||
| '--p-color-bg-inverse-hover': '--p-color-bg-fill-inverse-hover', | ||
| '--p-color-bg-inverse-active': '--p-color-bg-fill-inverse-active', | ||
| '--p-color-bg-transparent-experimental': '--p-color-bg-surface-transparent', | ||
| '--p-color-bg-transparent-hover-experimental': | ||
| '--p-color-bg-fill-transparent-hover', | ||
| '--p-color-bg-transparent-active-experimental': | ||
| '--p-color-bg-fill-transparent-active', | ||
| '--p-color-bg-transparent-disabled-experimental': | ||
| '--p-color-bg-fill-disabled', | ||
| '--p-color-bg-transparent-subdued-experimental': | ||
| '--p-color-bg-fill-transparent-secondary', | ||
| '--p-color-bg-transparent-primary-disabled-experimental': | ||
| '--p-color-bg-fill-brand-disabled', | ||
| '--p-color-bg-backdrop-experimental': '--p-color-backdrop-bg', | ||
| '--p-color-avatar-background-experimental': '--p-color-avatar-bg-fill', | ||
| '--p-color-avatar-style-one-background-experimental': | ||
| '--p-color-avatar-one-bg-fill', | ||
| '--p-color-avatar-style-two-background-experimental': | ||
| '--p-color-avatar-two-bg-fill', | ||
| '--p-color-avatar-style-three-background-experimental': | ||
| '--p-color-avatar-three-bg-fill', | ||
| '--p-color-avatar-style-four-background-experimental': | ||
| '--p-color-avatar-four-bg-fill', | ||
| '--p-color-avatar-style-five-background-experimental': | ||
| '--p-color-avatar-five-bg-fill', | ||
| '--p-color-text-subdued': '--p-color-text-secondary', | ||
| '--p-color-text-interactive': '--p-color-text-emphasis', | ||
| '--p-color-text-interactive-hover': '--p-color-text-emphasis-hover', | ||
| '--p-color-text-interactive-active': '--p-color-text-emphasis-active', | ||
| '--p-color-text-primary': '--p-color-text-brand', | ||
| '--p-color-text-primary-hover': '--p-color-text-brand-hover', | ||
| // '--p-color-text-critical-hover-experimental': '--p-color-text-critical-hover', | ||
| '--p-color-text-info-strong': '--p-color-text-info-on-bg-fill', | ||
| // '--p-color-text-warning-experimental': '--p-color-text-warning', | ||
| '--p-color-text-inverse-subdued': '--p-color-text-inverse-secondary', | ||
| // '--p-color-text-interactive-inverse': '--p-color-text-link-inverse', | ||
| '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-bg-fill', | ||
| '--p-color-avatar-style-one-color-experimental': | ||
| '--p-color-avatar-one-text-on-bg-fill', | ||
| '--p-color-avatar-style-two-color-experimental': | ||
| '--p-color-avatar-two-text-on-bg-fill', | ||
| '--p-color-avatar-style-three-color-experimental': | ||
| '--p-color-avatar-three-text-on-bg-fill', | ||
| '--p-color-avatar-style-four-color-experimental': | ||
| '--p-color-avatar-four-text-on-bg-fill', | ||
| '--p-color-avatar-style-five-color-experimental': | ||
| '--p-color-avatar-five-text-on-bg-fill', | ||
| '--p-color-icon-subdued': '--p-color-icon-secondary', | ||
| '--p-color-icon-interactive': '--p-color-icon-emphasis', | ||
| '--p-color-icon-interactive-hover': '--p-color-icon-emphasis-hover', | ||
| '--p-color-icon-interactive-active': '--p-color-icon-emphasis-active', | ||
| '--p-color-icon-primary': '--p-color-icon-brand', | ||
| '--p-color-border-subdued': '--p-color-border-secondary', | ||
| // '--p-color-border-strong': '--p-color-border-tertiary', | ||
| '--p-color-border-input': '--p-color-input-border', | ||
| '--p-color-border-input-hover': '--p-color-input-border-hover', | ||
| '--p-color-border-input-active-experimental': | ||
| '--p-color-input-border-active', | ||
| // '--p-color-border-interactive': '--p-color-border-emphasis', | ||
| '--p-color-border-interactive-hover': '--p-color-border-emphasis-hover', | ||
| '--p-color-border-interactive-active': '--p-color-border-emphasis-active', | ||
| '--p-color-border-interactive-focus': '--p-color-border-focus', | ||
| '--p-color-border-primary': '--p-color-border-brand', | ||
| '--p-color-border-critical-strong-experimental': | ||
| '--p-color-border-critical-secondary', | ||
| '--p-color-border-magic-strong': '--p-color-border-magic-secondary', | ||
| }, | ||
| const replacementMap = { | ||
| '--p-color-bg': '--p-color-bg-surface', | ||
| // '--p-color-bg-hover': '--p-color-bg-surface-hover', | ||
| // '--p-color-bg-active': '--p-color-bg-surface-active', | ||
| // '--p-color-bg-disabled': '--p-color-bg-surface-disabled', | ||
| '--p-color-bg-subdued': '--p-color-bg-surface-secondary', | ||
| '--p-color-bg-subdued-hover': '--p-color-bg-surface-secondary-hover', | ||
| '--p-color-bg-subdued-active': '--p-color-bg-surface-secondary-active', | ||
| '--p-color-bg-secondary-experimental': '--p-color-bg-surface-tertiary', | ||
| '--p-color-bg-strong': '--p-color-bg-fill-tertiary', | ||
| '--p-color-bg-strong-hover': '--p-color-bg-fill-tertiary-hover', | ||
| '--p-color-bg-strong-active': '--p-color-bg-fill-tertiary-active', | ||
| '--p-color-bg-input': '--p-color-input-bg-surface', | ||
| '--p-color-bg-input-hover-experimental': '--p-color-input-bg-surface-hover', | ||
| '--p-color-bg-input-active-experimental': '--p-color-input-bg-surface-active', | ||
| // '--p-color-bg-primary': '--p-color-bg-fill-brand', | ||
| // '--p-color-bg-primary-hover': '--p-color-bg-fill-brand-hover', | ||
| // '--p-color-bg-primary-active': '--p-color-bg-fill-brand-active', | ||
| // '--p-color-bg-primary-subdued': '--p-color-bg-surface-brand', | ||
| // '--p-color-bg-primary-subdued-hover': '--p-color-bg-surface-brand-hover', | ||
| // '--p-color-bg-primary-subdued-active': '--p-color-bg-surface-brand-active', | ||
| // '--p-color-bg-primary-subdued-selected': '--p-color-bg-surface-brand-selected', | ||
| '--p-color-bg-app-selected': '--p-color-bg-surface-selected', | ||
| '--p-color-bg-success-strong': '--p-color-bg-fill-success', | ||
| '--p-color-bg-success-strong-hover-experimental': | ||
| '--p-color-bg-fill-success-hover', | ||
| '--p-color-bg-success-strong-active-experimental': | ||
| '--p-color-bg-fill-success-active', | ||
| '--p-color-bg-success': '--p-color-bg-fill-success-secondary', | ||
| '--p-color-bg-success-subdued': '--p-color-bg-surface-success', | ||
| '--p-color-bg-success-subdued-hover': '--p-color-bg-surface-success-hover', | ||
| '--p-color-bg-success-subdued-active': '--p-color-bg-surface-success-active', | ||
| '--p-color-bg-critical-strong': '--p-color-bg-fill-critical', | ||
| '--p-color-bg-critical-strong-hover': '--p-color-bg-fill-critical-hover', | ||
| '--p-color-bg-critical-strong-active': '--p-color-bg-fill-critical-active', | ||
| '--p-color-bg-critical': '--p-color-bg-fill-critical-secondary', | ||
| '--p-color-bg-critical-subdued': '--p-color-bg-surface-critical', | ||
| '--p-color-bg-critical-subdued-hover': '--p-color-bg-surface-critical-hover', | ||
| '--p-color-bg-critical-subdued-active': | ||
| '--p-color-bg-surface-critical-active', | ||
| '--p-color-bg-caution-strong': '--p-color-bg-fill-caution', | ||
| '--p-color-bg-caution': '--p-color-bg-fill-caution-secondary', | ||
| '--p-color-bg-caution-subdued': '--p-color-bg-surface-caution', | ||
| '--p-color-bg-caution-subdued-hover': '--p-color-bg-surface-caution-hover', | ||
| '--p-color-bg-caution-subdued-active': '--p-color-bg-surface-caution-active', | ||
| '--p-color-bg-info-strong': '--p-color-bg-fill-info', | ||
| '--p-color-bg-info': '--p-color-bg-fill-info-secondary', | ||
| '--p-color-bg-info-subdued': '--p-color-bg-surface-info', | ||
| '--p-color-bg-info-subdued-hover': '--p-color-bg-surface-info-hover', | ||
| '--p-color-bg-info-subdued-active': '--p-color-bg-surface-info-active', | ||
| '--p-color-bg-warning-strong-experimental': '--p-color-bg-fill-warning', | ||
| '--p-color-bg-warning': '--p-color-bg-fill-warning-secondary', | ||
| '--p-color-bg-warning-subdued-experimental': '--p-color-bg-surface-warning', | ||
| '--p-color-bg-magic-strong': '--p-color-bg-fill-magic', | ||
| '--p-color-bg-magic': '--p-color-bg-fill-magic-secondary', | ||
| '--p-color-bg-magic-hover': '--p-color-bg-fill-magic-secondary-hover', | ||
| '--p-color-bg-magic-active': '--p-color-bg-fill-magic-secondary-active', | ||
| // '--p-color-bg-magic-subdued': '--p-color-bg-surface-magic', | ||
| '--p-color-bg-magic-subdued-hover': '--p-color-bg-surface-magic-hover', | ||
| '--p-color-bg-inset': '--p-color-bg-fill-secondary', | ||
| '--p-color-bg-inset-strong': '--p-color-bg-fill-inverse', | ||
| '--p-color-bg-inverse-hover': '--p-color-bg-fill-inverse-hover', | ||
| '--p-color-bg-inverse-active': '--p-color-bg-fill-inverse-active', | ||
| '--p-color-bg-transparent-experimental': '--p-color-bg-surface-transparent', | ||
| '--p-color-bg-transparent-hover-experimental': | ||
| '--p-color-bg-fill-transparent-hover', | ||
| '--p-color-bg-transparent-active-experimental': | ||
| '--p-color-bg-fill-transparent-active', | ||
| '--p-color-bg-transparent-disabled-experimental': | ||
| '--p-color-bg-fill-disabled', | ||
| '--p-color-bg-transparent-subdued-experimental': | ||
| '--p-color-bg-fill-transparent-secondary', | ||
| '--p-color-bg-transparent-primary-disabled-experimental': | ||
| '--p-color-bg-fill-brand-disabled', | ||
| '--p-color-bg-backdrop-experimental': '--p-color-backdrop-bg', | ||
| '--p-color-avatar-background-experimental': '--p-color-avatar-bg-fill', | ||
| '--p-color-avatar-style-one-background-experimental': | ||
| '--p-color-avatar-one-bg-fill', | ||
| '--p-color-avatar-style-two-background-experimental': | ||
| '--p-color-avatar-two-bg-fill', | ||
| '--p-color-avatar-style-three-background-experimental': | ||
| '--p-color-avatar-three-bg-fill', | ||
| '--p-color-avatar-style-four-background-experimental': | ||
| '--p-color-avatar-four-bg-fill', | ||
| '--p-color-avatar-style-five-background-experimental': | ||
| '--p-color-avatar-five-bg-fill', | ||
| '--p-color-text-subdued': '--p-color-text-secondary', | ||
| '--p-color-text-interactive': '--p-color-text-emphasis', | ||
| '--p-color-text-interactive-hover': '--p-color-text-emphasis-hover', | ||
| '--p-color-text-interactive-active': '--p-color-text-emphasis-active', | ||
| '--p-color-text-primary': '--p-color-text-brand', | ||
| '--p-color-text-primary-hover': '--p-color-text-brand-hover', | ||
| // '--p-color-text-critical-hover-experimental': '--p-color-text-critical-hover', | ||
| '--p-color-text-info-strong': '--p-color-text-info-on-bg-fill', | ||
| // '--p-color-text-warning-experimental': '--p-color-text-warning', | ||
| '--p-color-text-inverse-subdued': '--p-color-text-inverse-secondary', | ||
| // '--p-color-text-interactive-inverse': '--p-color-text-link-inverse', | ||
| '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-bg-fill', | ||
| '--p-color-avatar-style-one-color-experimental': | ||
| '--p-color-avatar-one-text-on-bg-fill', | ||
| '--p-color-avatar-style-two-color-experimental': | ||
| '--p-color-avatar-two-text-on-bg-fill', | ||
| '--p-color-avatar-style-three-color-experimental': | ||
| '--p-color-avatar-three-text-on-bg-fill', | ||
| '--p-color-avatar-style-four-color-experimental': | ||
| '--p-color-avatar-four-text-on-bg-fill', | ||
| '--p-color-avatar-style-five-color-experimental': | ||
| '--p-color-avatar-five-text-on-bg-fill', | ||
| '--p-color-icon-subdued': '--p-color-icon-secondary', | ||
| '--p-color-icon-interactive': '--p-color-icon-emphasis', | ||
| '--p-color-icon-interactive-hover': '--p-color-icon-emphasis-hover', | ||
| '--p-color-icon-interactive-active': '--p-color-icon-emphasis-active', | ||
| '--p-color-icon-primary': '--p-color-icon-brand', | ||
| '--p-color-border-subdued': '--p-color-border-secondary', | ||
| // '--p-color-border-strong': '--p-color-border-tertiary', | ||
| '--p-color-border-input': '--p-color-input-border', | ||
| '--p-color-border-input-hover': '--p-color-input-border-hover', | ||
| '--p-color-border-input-active-experimental': '--p-color-input-border-active', | ||
| // '--p-color-border-interactive': '--p-color-border-emphasis', | ||
| '--p-color-border-interactive-hover': '--p-color-border-emphasis-hover', | ||
| '--p-color-border-interactive-active': '--p-color-border-emphasis-active', | ||
| '--p-color-border-interactive-focus': '--p-color-border-focus', | ||
| '--p-color-border-primary': '--p-color-border-brand', | ||
| '--p-color-border-critical-strong-experimental': | ||
| '--p-color-border-critical-secondary', | ||
| '--p-color-border-magic-strong': '--p-color-border-magic-secondary', | ||
| }; |