From 3da9dd148cfb0a7ad87c18941416b9be65f8ee87 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Fri, 20 Sep 2024 11:22:35 +0200 Subject: [PATCH] feat(tokens): prefix with t_ --- .../tokensPrefixWithT/tokens-prefix-with-t.md | 18 + .../tokens-prefix-with-t.test.ts | 132 +++ .../tokensPrefixWithT/tokens-prefix-with-t.ts | 134 +++ .../tokensPrefixWithTInput.tsx | 3 + .../tokensPrefixWithTOutput.tsx | 3 + .../src/tokenLists/index.ts | 1 + .../src/tokenLists/tTokens.ts | 856 ++++++++++++++++++ 7 files changed, 1147 insertions(+) create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.md create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.test.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTInput.tsx create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTOutput.tsx create mode 100644 packages/eslint-plugin-pf-codemods/src/tokenLists/tTokens.ts diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.md new file mode 100644 index 00000000..aaa13d17 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.md @@ -0,0 +1,18 @@ +### tokens-prefix-with-t [(#11002)](https://github.com/patternfly/patternfly-react/pull/11002) + +React tokens, whose value is a Patternfly token variable (with prefix --pf-t), are now prefixed with t_ + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` + diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.test.ts new file mode 100644 index 00000000..8804954a --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.test.ts @@ -0,0 +1,132 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./tokens-prefix-with-t"; + +const message = `React tokens, whose value is a Patternfly token variable (has prefix --pf-t), are now prefixed with t_`; + +ruleTester.run("tokens-prefix-with-t", rule, { + valid: [ + // tokens wich are not "--pf-t" variables + { + code: `import c_about_modal_box from '@patternfly/react-tokens/dist/esm/c_about_modal_box';`, + }, + { + code: `import { c_about_modal_box } from '@patternfly/react-tokens';`, + }, + ], + invalid: [ + { + code: `import { global_font_size_100 } from "@patternfly/react-tokens"; + global_font_size_100;`, + output: `import { t_global_font_size_100 } from "@patternfly/react-tokens"; + t_global_font_size_100;`, + errors: [ + { + message, + type: "ImportSpecifier", + }, + { + message, + type: "Identifier", + }, + ], + }, + { + // with alias + code: `import { global_font_size_100 as customFontSize } from "@patternfly/react-tokens"; + customFontSize;`, + output: `import { t_global_font_size_100 as customFontSize } from "@patternfly/react-tokens"; + customFontSize;`, + errors: [ + { + message, + type: "ImportSpecifier", + }, + ], + }, + { + // named import - esm + code: `import { global_font_size_100 } from '@patternfly/react-tokens/dist/esm/global_font_size_100'; + global_font_size_100;`, + output: `import { t_global_font_size_100 } from "@patternfly/react-tokens/dist/esm/t_global_font_size_100"; + t_global_font_size_100;`, + errors: [ + { + message, + type: "ImportSpecifier", + }, + { + message, + type: "Identifier", + }, + ], + }, + { + // named import - js + code: `import { global_font_size_100 } from '@patternfly/react-tokens/dist/js/global_font_size_100'; + global_font_size_100;`, + output: `import { t_global_font_size_100 } from "@patternfly/react-tokens/dist/js/t_global_font_size_100"; + t_global_font_size_100;`, + errors: [ + { + message, + type: "ImportSpecifier", + }, + { + message, + type: "Identifier", + }, + ], + }, + { + // default import - esm + code: `import global_font_size_100 from '@patternfly/react-tokens/dist/esm/global_font_size_100'; + global_font_size_100;`, + output: `import t_global_font_size_100 from "@patternfly/react-tokens/dist/esm/t_global_font_size_100"; + t_global_font_size_100;`, + errors: [ + { + message, + type: "ImportDefaultSpecifier", + }, + { + message, + type: "Identifier", + }, + ], + }, + { + // default import - js + code: `import global_font_size_100 from '@patternfly/react-tokens/dist/js/global_font_size_100'; + global_font_size_100;`, + output: `import t_global_font_size_100 from "@patternfly/react-tokens/dist/js/t_global_font_size_100"; + t_global_font_size_100;`, + errors: [ + { + message, + type: "ImportDefaultSpecifier", + }, + { + message, + type: "Identifier", + }, + ], + }, + { + // default import with custom name + code: `import customFontSize from '@patternfly/react-tokens/dist/esm/global_font_size_100'; + customFontSize;`, + output: `import t_global_font_size_100 from "@patternfly/react-tokens/dist/esm/t_global_font_size_100"; + t_global_font_size_100;`, + errors: [ + { + message, + type: "ImportDefaultSpecifier", + }, + { + message, + type: "Identifier", + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.ts new file mode 100644 index 00000000..54f2e403 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.ts @@ -0,0 +1,134 @@ +import { Rule } from "eslint"; +import { + IdentifierWithParent, + ImportDefaultSpecifierWithParent, + ImportSpecifierWithParent, + getDefaultImportsFromPackage, + getFromPackage, + getImportPath, +} from "../../helpers"; +import { Identifier, ImportSpecifier } from "estree-jsx"; +import { tTokens } from "../../../tokenLists"; + +module.exports = { + meta: { fixable: "code" }, + create: function (context: Rule.RuleContext) { + const tokensPackage = "@patternfly/react-tokens"; + + const { imports: tokenSpecifiers } = getFromPackage(context, tokensPackage); + + const defaultTokenSpecifiers = getDefaultImportsFromPackage( + context, + tokensPackage + ) + .map((specifier) => ({ + specifier, + path: getImportPath(specifier), + })) + .filter(({ path }) => path !== undefined) + .map(({ specifier, path }) => ({ + specifier, + token: (path as string).split("/").pop() as string, + })); + + const getTokenPathFix = ( + fixer: Rule.RuleFixer, + node: ImportSpecifierWithParent | ImportDefaultSpecifierWithParent, + oldToken: string, + newToken: string + ) => { + const packagePath = getImportPath(node); + if (packagePath && packagePath.includes(oldToken)) { + const newPath = packagePath.replace(oldToken, newToken); + return fixer.replaceText(node.parent?.source!, `"${newPath}"`); + } + }; + + const replaceToken = ( + node: + | ImportSpecifierWithParent + | ImportDefaultSpecifierWithParent + | Identifier, + oldToken: string + ) => { + const newToken = `t_${oldToken}`; + + context.report({ + node, + message: `React tokens, whose value is a Patternfly token variable (has prefix --pf-t), are now prefixed with t_`, + fix(fixer) { + if (node.type === "Identifier") { + return fixer.replaceText(node, newToken); + } + + const tokenPathFix = getTokenPathFix(fixer, node, oldToken, newToken); + + return [ + fixer.replaceText( + node.type === "ImportSpecifier" ? node.imported : node, + newToken + ), + ...(tokenPathFix ? [tokenPathFix] : []), + ]; + }, + }); + }; + + return { + ImportSpecifier(node: ImportSpecifier) { + if (tokenSpecifiers.includes(node)) { + const token = node.imported.name; + if (tTokens.includes(token)) { + replaceToken(node, token); + } + } + }, + ImportDefaultSpecifier(node: ImportDefaultSpecifierWithParent) { + const specifierWithToken = defaultTokenSpecifiers.find( + ({ specifier }) => node === specifier + ); + + if (!specifierWithToken) { + return; + } + + const { token } = specifierWithToken; + + if (tTokens.includes(token)) { + replaceToken(node, token); + } + }, + Identifier(node: Identifier) { + const parentType = (node as IdentifierWithParent).parent?.type; + // handle ImportSpecifier and ImportDefaultSpecifier separately + if ( + parentType === "ImportSpecifier" || + parentType === "ImportDefaultSpecifier" + ) { + return; + } + + const specifierWithToken = defaultTokenSpecifiers.find( + ({ specifier }) => node.name === specifier.local.name + ); + + if (specifierWithToken) { + const { token } = specifierWithToken; + if (tTokens.includes(token)) { + replaceToken(node, token); + } + } + + const unaliasedTokenSpecifier = tokenSpecifiers.find( + (specifier) => + specifier.local.name === specifier.imported.name && + node.name === specifier.local.name + ); + + if (unaliasedTokenSpecifier && tTokens.includes(node.name)) { + replaceToken(node, node.name); + } + }, + }; + }, +}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTInput.tsx new file mode 100644 index 00000000..06cea123 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTInput.tsx @@ -0,0 +1,3 @@ +import color_green_10 from "@patternfly/react-tokens/dist/esm/color_green_10"; + +color_green_10; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTOutput.tsx new file mode 100644 index 00000000..c0d067c6 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTOutput.tsx @@ -0,0 +1,3 @@ +import t_color_green_10 from "@patternfly/react-tokens/dist/esm/t_color_green_10"; + +t_color_green_10; diff --git a/packages/eslint-plugin-pf-codemods/src/tokenLists/index.ts b/packages/eslint-plugin-pf-codemods/src/tokenLists/index.ts index c10fd44e..ab75d6b6 100644 --- a/packages/eslint-plugin-pf-codemods/src/tokenLists/index.ts +++ b/packages/eslint-plugin-pf-codemods/src/tokenLists/index.ts @@ -2,3 +2,4 @@ export * from "./oldCssVarNamesV5"; export * from "./oldGlobalCssVarNames"; export * from "./oldGlobalTokens"; export * from "./oldTokens"; +export * from "./tTokens"; diff --git a/packages/eslint-plugin-pf-codemods/src/tokenLists/tTokens.ts b/packages/eslint-plugin-pf-codemods/src/tokenLists/tTokens.ts new file mode 100644 index 00000000..2740cbb2 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/tokenLists/tTokens.ts @@ -0,0 +1,856 @@ +// all React tokens in V6, whose value is a Patternfly token variable (has prefix --pf-t) +// their naming was updated to be prefixed with 't_' +export const tTokens = [ + "chart_global_fill_color_100", + "chart_theme_colorscales_blue_colorscale_100", + "chart_theme_colorscales_blue_colorscale_200", + "chart_theme_colorscales_blue_colorscale_300", + "chart_theme_colorscales_blue_colorscale_400", + "chart_theme_colorscales_blue_colorscale_500", + "chart_theme_colorscales_gray_colorscale_100", + "chart_theme_colorscales_gray_colorscale_200", + "chart_theme_colorscales_gray_colorscale_300", + "chart_theme_colorscales_gray_colorscale_400", + "chart_theme_colorscales_gray_colorscale_500", + "chart_theme_colorscales_green_colorscale_100", + "chart_theme_colorscales_green_colorscale_200", + "chart_theme_colorscales_green_colorscale_300", + "chart_theme_colorscales_green_colorscale_400", + "chart_theme_colorscales_green_colorscale_500", + "chart_theme_colorscales_multi_colored_ordered_colorscale_100", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1000", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1100", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1200", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1300", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1400", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1500", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1600", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1700", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1800", + "chart_theme_colorscales_multi_colored_ordered_colorscale_1900", + "chart_theme_colorscales_multi_colored_ordered_colorscale_200", + "chart_theme_colorscales_multi_colored_ordered_colorscale_2000", + "chart_theme_colorscales_multi_colored_ordered_colorscale_2100", + "chart_theme_colorscales_multi_colored_ordered_colorscale_2200", + "chart_theme_colorscales_multi_colored_ordered_colorscale_2300", + "chart_theme_colorscales_multi_colored_ordered_colorscale_2400", + "chart_theme_colorscales_multi_colored_ordered_colorscale_2500", + "chart_theme_colorscales_multi_colored_ordered_colorscale_300", + "chart_theme_colorscales_multi_colored_ordered_colorscale_400", + "chart_theme_colorscales_multi_colored_ordered_colorscale_500", + "chart_theme_colorscales_multi_colored_ordered_colorscale_600", + "chart_theme_colorscales_multi_colored_ordered_colorscale_700", + "chart_theme_colorscales_multi_colored_ordered_colorscale_800", + "chart_theme_colorscales_multi_colored_ordered_colorscale_900", + "chart_theme_colorscales_multi_colored_unordered_colorscale_100", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1000", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1100", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1200", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1300", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1400", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1500", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1600", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1700", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1800", + "chart_theme_colorscales_multi_colored_unordered_colorscale_1900", + "chart_theme_colorscales_multi_colored_unordered_colorscale_200", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2000", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2100", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2200", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2300", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2400", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2500", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2600", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2700", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2800", + "chart_theme_colorscales_multi_colored_unordered_colorscale_2900", + "chart_theme_colorscales_multi_colored_unordered_colorscale_300", + "chart_theme_colorscales_multi_colored_unordered_colorscale_3000", + "chart_theme_colorscales_multi_colored_unordered_colorscale_3100", + "chart_theme_colorscales_multi_colored_unordered_colorscale_3200", + "chart_theme_colorscales_multi_colored_unordered_colorscale_3300", + "chart_theme_colorscales_multi_colored_unordered_colorscale_3400", + "chart_theme_colorscales_multi_colored_unordered_colorscale_3500", + "chart_theme_colorscales_multi_colored_unordered_colorscale_400", + "chart_theme_colorscales_multi_colored_unordered_colorscale_500", + "chart_theme_colorscales_multi_colored_unordered_colorscale_600", + "chart_theme_colorscales_multi_colored_unordered_colorscale_700", + "chart_theme_colorscales_multi_colored_unordered_colorscale_800", + "chart_theme_colorscales_multi_colored_unordered_colorscale_900", + "chart_theme_colorscales_orange_colorscale_100", + "chart_theme_colorscales_orange_colorscale_200", + "chart_theme_colorscales_orange_colorscale_300", + "chart_theme_colorscales_orange_colorscale_400", + "chart_theme_colorscales_orange_colorscale_500", + "chart_theme_colorscales_purple_colorscale_100", + "chart_theme_colorscales_purple_colorscale_200", + "chart_theme_colorscales_purple_colorscale_300", + "chart_theme_colorscales_purple_colorscale_400", + "chart_theme_colorscales_purple_colorscale_500", + "chart_theme_colorscales_teal_colorscale_100", + "chart_theme_colorscales_teal_colorscale_200", + "chart_theme_colorscales_teal_colorscale_300", + "chart_theme_colorscales_teal_colorscale_400", + "chart_theme_colorscales_teal_colorscale_500", + "chart_theme_colorscales_yellow_colorscale_100", + "chart_theme_colorscales_yellow_colorscale_200", + "chart_theme_colorscales_yellow_colorscale_300", + "chart_theme_colorscales_yellow_colorscale_400", + "chart_theme_colorscales_yellow_colorscale_500", + "color_black", + "color_blue_10", + "color_blue_20", + "color_blue_30", + "color_blue_40", + "color_blue_50", + "color_blue_60", + "color_blue_70", + "color_gray_10", + "color_gray_20", + "color_gray_30", + "color_gray_40", + "color_gray_50", + "color_gray_60", + "color_gray_70", + "color_gray_80", + "color_gray_90", + "color_gray_95", + "color_green_10", + "color_green_20", + "color_green_30", + "color_green_40", + "color_green_50", + "color_green_60", + "color_green_70", + "color_orange_10", + "color_orange_20", + "color_orange_30", + "color_orange_40", + "color_orange_50", + "color_orange_60", + "color_orange_70", + "color_purple_10", + "color_purple_20", + "color_purple_30", + "color_purple_40", + "color_purple_50", + "color_purple_60", + "color_purple_70", + "color_red_10", + "color_red_20", + "color_red_30", + "color_red_40", + "color_red_50", + "color_red_60", + "color_red_70", + "color_red_orange_10", + "color_red_orange_20", + "color_red_orange_30", + "color_red_orange_40", + "color_red_orange_50", + "color_red_orange_60", + "color_red_orange_70", + "color_teal_10", + "color_teal_20", + "color_teal_30", + "color_teal_40", + "color_teal_50", + "color_teal_60", + "color_teal_70", + "color_white", + "color_yellow_10", + "color_yellow_20", + "color_yellow_30", + "color_yellow_40", + "color_yellow_50", + "color_yellow_60", + "color_yellow_70", + "global_background_color_100", + "global_background_color_200", + "global_background_color_300", + "global_background_color_400", + "global_background_color_500", + "global_background_color_600", + "global_background_color_action_plain_alt_clicked", + "global_background_color_action_plain_alt_hover", + "global_background_color_action_plain_clicked", + "global_background_color_action_plain_default", + "global_background_color_action_plain_hover", + "global_background_color_backdrop_default", + "global_background_color_control_default", + "global_background_color_disabled_default", + "global_background_color_floating_clicked", + "global_background_color_floating_default", + "global_background_color_floating_hover", + "global_background_color_highlight_100", + "global_background_color_highlight_200", + "global_background_color_highlight_clicked", + "global_background_color_highlight_default", + "global_background_color_inverse_default", + "global_background_color_primary_clicked", + "global_background_color_primary_default", + "global_background_color_primary_hover", + "global_background_color_secondary_clicked", + "global_background_color_secondary_default", + "global_background_color_secondary_hover", + "global_border_color_100", + "global_border_color_200", + "global_border_color_300", + "global_border_color_alt", + "global_border_color_brand_clicked", + "global_border_color_brand_default", + "global_border_color_brand_hover", + "global_border_color_clicked", + "global_border_color_default", + "global_border_color_disabled", + "global_border_color_hover", + "global_border_color_nonstatus_blue_clicked", + "global_border_color_nonstatus_blue_default", + "global_border_color_nonstatus_blue_hover", + "global_border_color_nonstatus_gray_clicked", + "global_border_color_nonstatus_gray_default", + "global_border_color_nonstatus_gray_hover", + "global_border_color_nonstatus_green_clicked", + "global_border_color_nonstatus_green_default", + "global_border_color_nonstatus_green_hover", + "global_border_color_nonstatus_orange_clicked", + "global_border_color_nonstatus_orange_default", + "global_border_color_nonstatus_orange_hover", + "global_border_color_nonstatus_orangered_clicked", + "global_border_color_nonstatus_orangered_default", + "global_border_color_nonstatus_orangered_hover", + "global_border_color_nonstatus_purple_clicked", + "global_border_color_nonstatus_purple_default", + "global_border_color_nonstatus_purple_hover", + "global_border_color_nonstatus_red_clicked", + "global_border_color_nonstatus_red_default", + "global_border_color_nonstatus_red_hover", + "global_border_color_nonstatus_teal_clicked", + "global_border_color_nonstatus_teal_default", + "global_border_color_nonstatus_teal_hover", + "global_border_color_nonstatus_yellow_clicked", + "global_border_color_nonstatus_yellow_default", + "global_border_color_nonstatus_yellow_hover", + "global_border_color_on_secondary", + "global_border_color_status_custom_clicked", + "global_border_color_status_custom_default", + "global_border_color_status_custom_hover", + "global_border_color_status_danger_clicked", + "global_border_color_status_danger_default", + "global_border_color_status_danger_hover", + "global_border_color_status_info_clicked", + "global_border_color_status_info_default", + "global_border_color_status_info_hover", + "global_border_color_status_success_clicked", + "global_border_color_status_success_default", + "global_border_color_status_success_hover", + "global_border_color_status_warning_clicked", + "global_border_color_status_warning_default", + "global_border_color_status_warning_hover", + "global_border_radius_0", + "global_border_radius_100", + "global_border_radius_200", + "global_border_radius_300", + "global_border_radius_400", + "global_border_radius_500", + "global_border_radius_large", + "global_border_radius_medium", + "global_border_radius_pill", + "global_border_radius_sharp", + "global_border_radius_small", + "global_border_radius_tiny", + "global_border_width_100", + "global_border_width_200", + "global_border_width_300", + "global_border_width_action_clicked", + "global_border_width_action_default", + "global_border_width_action_hover", + "global_border_width_box_clicked", + "global_border_width_box_default", + "global_border_width_box_hover", + "global_border_width_box_status_default", + "global_border_width_box_status_read", + "global_border_width_control_clicked", + "global_border_width_control_default", + "global_border_width_control_hover", + "global_border_width_divider_clicked", + "global_border_width_divider_default", + "global_border_width_divider_hover", + "global_border_width_extra_strong", + "global_border_width_regular", + "global_border_width_strong", + "global_box_shadow_X_100", + "global_box_shadow_X_200", + "global_box_shadow_X_300", + "global_box_shadow_X_400", + "global_box_shadow_X_500", + "global_box_shadow_X_600", + "global_box_shadow_X_700", + "global_box_shadow_X_lg_bottom", + "global_box_shadow_X_lg_default", + "global_box_shadow_X_lg_left", + "global_box_shadow_X_lg_right", + "global_box_shadow_X_lg_top", + "global_box_shadow_X_md_bottom", + "global_box_shadow_X_md_default", + "global_box_shadow_X_md_left", + "global_box_shadow_X_md_right", + "global_box_shadow_X_md_top", + "global_box_shadow_X_sm_bottom", + "global_box_shadow_X_sm_default", + "global_box_shadow_X_sm_left", + "global_box_shadow_X_sm_right", + "global_box_shadow_X_sm_top", + "global_box_shadow_Y_100", + "global_box_shadow_Y_200", + "global_box_shadow_Y_300", + "global_box_shadow_Y_400", + "global_box_shadow_Y_500", + "global_box_shadow_Y_600", + "global_box_shadow_Y_700", + "global_box_shadow_Y_lg_bottom", + "global_box_shadow_Y_lg_default", + "global_box_shadow_Y_lg_left", + "global_box_shadow_Y_lg_right", + "global_box_shadow_Y_lg_top", + "global_box_shadow_Y_md_bottom", + "global_box_shadow_Y_md_default", + "global_box_shadow_Y_md_left", + "global_box_shadow_Y_md_right", + "global_box_shadow_Y_md_top", + "global_box_shadow_Y_sm_bottom", + "global_box_shadow_Y_sm_default", + "global_box_shadow_Y_sm_left", + "global_box_shadow_Y_sm_right", + "global_box_shadow_Y_sm_top", + "global_box_shadow_blur_100", + "global_box_shadow_blur_200", + "global_box_shadow_blur_300", + "global_box_shadow_blur_lg", + "global_box_shadow_blur_md", + "global_box_shadow_blur_sm", + "global_box_shadow_color_100", + "global_box_shadow_color_200", + "global_box_shadow_color_lg", + "global_box_shadow_color_md", + "global_box_shadow_color_sm", + "global_box_shadow_lg", + "global_box_shadow_lg_bottom", + "global_box_shadow_lg_left", + "global_box_shadow_lg_right", + "global_box_shadow_lg_top", + "global_box_shadow_md", + "global_box_shadow_md_bottom", + "global_box_shadow_md_left", + "global_box_shadow_md_right", + "global_box_shadow_md_top", + "global_box_shadow_sm", + "global_box_shadow_sm_bottom", + "global_box_shadow_sm_left", + "global_box_shadow_sm_right", + "global_box_shadow_sm_top", + "global_box_shadow_spread_100", + "global_box_shadow_spread_lg", + "global_box_shadow_spread_md", + "global_box_shadow_spread_sm", + "global_breakpoint_100", + "global_breakpoint_200", + "global_breakpoint_250", + "global_breakpoint_2xl", + "global_breakpoint_300", + "global_breakpoint_350", + "global_breakpoint_400", + "global_breakpoint_500", + "global_breakpoint_550", + "global_breakpoint_600", + "global_breakpoint_height_2xl", + "global_breakpoint_height_lg", + "global_breakpoint_height_md", + "global_breakpoint_height_sm", + "global_breakpoint_height_xl", + "global_breakpoint_lg", + "global_breakpoint_md", + "global_breakpoint_sm", + "global_breakpoint_xl", + "global_breakpoint_xs", + "global_color_brand_100", + "global_color_brand_200", + "global_color_brand_300", + "global_color_brand_clicked", + "global_color_brand_default", + "global_color_brand_hover", + "global_color_disabled_100", + "global_color_disabled_200", + "global_color_disabled_300", + "global_color_favorite_100", + "global_color_favorite_200", + "global_color_favorite_clicked", + "global_color_favorite_default", + "global_color_favorite_hover", + "global_color_nonstatus_blue_100", + "global_color_nonstatus_blue_200", + "global_color_nonstatus_blue_300", + "global_color_nonstatus_blue_clicked", + "global_color_nonstatus_blue_default", + "global_color_nonstatus_blue_hover", + "global_color_nonstatus_gray_100", + "global_color_nonstatus_gray_200", + "global_color_nonstatus_gray_300", + "global_color_nonstatus_gray_clicked", + "global_color_nonstatus_gray_default", + "global_color_nonstatus_gray_hover", + "global_color_nonstatus_green_100", + "global_color_nonstatus_green_200", + "global_color_nonstatus_green_300", + "global_color_nonstatus_green_clicked", + "global_color_nonstatus_green_default", + "global_color_nonstatus_green_hover", + "global_color_nonstatus_orange_100", + "global_color_nonstatus_orange_200", + "global_color_nonstatus_orange_300", + "global_color_nonstatus_orange_clicked", + "global_color_nonstatus_orange_default", + "global_color_nonstatus_orange_hover", + "global_color_nonstatus_orangered_100", + "global_color_nonstatus_orangered_200", + "global_color_nonstatus_orangered_300", + "global_color_nonstatus_orangered_clicked", + "global_color_nonstatus_orangered_default", + "global_color_nonstatus_orangered_hover", + "global_color_nonstatus_purple_100", + "global_color_nonstatus_purple_200", + "global_color_nonstatus_purple_300", + "global_color_nonstatus_purple_clicked", + "global_color_nonstatus_purple_default", + "global_color_nonstatus_purple_hover", + "global_color_nonstatus_red_100", + "global_color_nonstatus_red_200", + "global_color_nonstatus_red_300", + "global_color_nonstatus_red_clicked", + "global_color_nonstatus_red_default", + "global_color_nonstatus_red_hover", + "global_color_nonstatus_teal_100", + "global_color_nonstatus_teal_200", + "global_color_nonstatus_teal_300", + "global_color_nonstatus_teal_clicked", + "global_color_nonstatus_teal_default", + "global_color_nonstatus_teal_hover", + "global_color_nonstatus_yellow_100", + "global_color_nonstatus_yellow_200", + "global_color_nonstatus_yellow_300", + "global_color_nonstatus_yellow_clicked", + "global_color_nonstatus_yellow_default", + "global_color_nonstatus_yellow_hover", + "global_color_severity_critical_100", + "global_color_severity_important_100", + "global_color_severity_minor_100", + "global_color_severity_moderate_100", + "global_color_severity_none_100", + "global_color_severity_undefined_100", + "global_color_status_custom_100", + "global_color_status_custom_200", + "global_color_status_custom_clicked", + "global_color_status_custom_default", + "global_color_status_custom_hover", + "global_color_status_danger_100", + "global_color_status_danger_200", + "global_color_status_danger_300", + "global_color_status_danger_clicked", + "global_color_status_danger_default", + "global_color_status_danger_hover", + "global_color_status_info_100", + "global_color_status_info_200", + "global_color_status_info_clicked", + "global_color_status_info_default", + "global_color_status_info_hover", + "global_color_status_read_on_primary", + "global_color_status_read_on_secondary", + "global_color_status_success_100", + "global_color_status_success_200", + "global_color_status_success_clicked", + "global_color_status_success_default", + "global_color_status_success_hover", + "global_color_status_unread_attention_clicked", + "global_color_status_unread_attention_default", + "global_color_status_unread_attention_hover", + "global_color_status_unread_clicked", + "global_color_status_unread_default", + "global_color_status_unread_hover", + "global_color_status_warning_100", + "global_color_status_warning_200", + "global_color_status_warning_300", + "global_color_status_warning_clicked", + "global_color_status_warning_default", + "global_color_status_warning_hover", + "global_delay_100", + "global_delay_200", + "global_delay_300", + "global_delay_400", + "global_duration_100", + "global_duration_200", + "global_duration_300", + "global_duration_400", + "global_duration_50", + "global_duration_500", + "global_duration_600", + "global_font_family_100", + "global_font_family_200", + "global_font_family_300", + "global_font_family_body", + "global_font_family_body_legacy", + "global_font_family_heading", + "global_font_family_heading_legacy", + "global_font_family_mono", + "global_font_family_mono_legacy", + "global_font_line_height_100", + "global_font_line_height_200", + "global_font_line_height_body", + "global_font_line_height_heading", + "global_font_size_100", + "global_font_size_200", + "global_font_size_2xl", + "global_font_size_300", + "global_font_size_3xl", + "global_font_size_400", + "global_font_size_4xl", + "global_font_size_500", + "global_font_size_600", + "global_font_size_700", + "global_font_size_800", + "global_font_size_body_default", + "global_font_size_body_lg", + "global_font_size_body_sm", + "global_font_size_heading_2xl", + "global_font_size_heading_h1", + "global_font_size_heading_h2", + "global_font_size_heading_h3", + "global_font_size_heading_h4", + "global_font_size_heading_h5", + "global_font_size_heading_h6", + "global_font_size_heading_lg", + "global_font_size_heading_md", + "global_font_size_heading_sm", + "global_font_size_heading_xl", + "global_font_size_heading_xs", + "global_font_size_lg", + "global_font_size_md", + "global_font_size_sm", + "global_font_size_xl", + "global_font_size_xs", + "global_font_weight_100", + "global_font_weight_200", + "global_font_weight_300", + "global_font_weight_400", + "global_font_weight_body_bold", + "global_font_weight_body_bold_legacy", + "global_font_weight_body_default", + "global_font_weight_body_legacy", + "global_font_weight_heading_bold", + "global_font_weight_heading_bold_legacy", + "global_font_weight_heading_default", + "global_font_weight_heading_legacy", + "global_icon_color_100", + "global_icon_color_200", + "global_icon_color_300", + "global_icon_color_brand_clicked", + "global_icon_color_brand_default", + "global_icon_color_brand_hover", + "global_icon_color_disabled", + "global_icon_color_favorite_clicked", + "global_icon_color_favorite_default", + "global_icon_color_favorite_hover", + "global_icon_color_inverse", + "global_icon_color_nonstatus_on_blue_clicked", + "global_icon_color_nonstatus_on_blue_default", + "global_icon_color_nonstatus_on_blue_hover", + "global_icon_color_nonstatus_on_gray_clicked", + "global_icon_color_nonstatus_on_gray_default", + "global_icon_color_nonstatus_on_gray_hover", + "global_icon_color_nonstatus_on_green_clicked", + "global_icon_color_nonstatus_on_green_default", + "global_icon_color_nonstatus_on_green_hover", + "global_icon_color_nonstatus_on_orange_clicked", + "global_icon_color_nonstatus_on_orange_default", + "global_icon_color_nonstatus_on_orange_hover", + "global_icon_color_nonstatus_on_orangered_clicked", + "global_icon_color_nonstatus_on_orangered_default", + "global_icon_color_nonstatus_on_orangered_hover", + "global_icon_color_nonstatus_on_purple_clicked", + "global_icon_color_nonstatus_on_purple_default", + "global_icon_color_nonstatus_on_purple_hover", + "global_icon_color_nonstatus_on_red_clicked", + "global_icon_color_nonstatus_on_red_default", + "global_icon_color_nonstatus_on_red_hover", + "global_icon_color_nonstatus_on_teal_clicked", + "global_icon_color_nonstatus_on_teal_default", + "global_icon_color_nonstatus_on_teal_hover", + "global_icon_color_nonstatus_on_yellow_clicked", + "global_icon_color_nonstatus_on_yellow_default", + "global_icon_color_nonstatus_on_yellow_hover", + "global_icon_color_on_brand_clicked", + "global_icon_color_on_brand_default", + "global_icon_color_on_brand_hover", + "global_icon_color_on_disabled", + "global_icon_color_regular", + "global_icon_color_severity_critical_default", + "global_icon_color_severity_important_default", + "global_icon_color_severity_minor_default", + "global_icon_color_severity_moderate_default", + "global_icon_color_severity_none_default", + "global_icon_color_severity_undefined_default", + "global_icon_color_status_custom_clicked", + "global_icon_color_status_custom_default", + "global_icon_color_status_custom_hover", + "global_icon_color_status_danger_clicked", + "global_icon_color_status_danger_default", + "global_icon_color_status_danger_hover", + "global_icon_color_status_info_clicked", + "global_icon_color_status_info_default", + "global_icon_color_status_info_hover", + "global_icon_color_status_on_custom_clicked", + "global_icon_color_status_on_custom_default", + "global_icon_color_status_on_custom_hover", + "global_icon_color_status_on_danger_clicked", + "global_icon_color_status_on_danger_default", + "global_icon_color_status_on_danger_hover", + "global_icon_color_status_on_info_clicked", + "global_icon_color_status_on_info_default", + "global_icon_color_status_on_info_hover", + "global_icon_color_status_on_success_clicked", + "global_icon_color_status_on_success_default", + "global_icon_color_status_on_success_hover", + "global_icon_color_status_on_warning_clicked", + "global_icon_color_status_on_warning_default", + "global_icon_color_status_on_warning_hover", + "global_icon_color_status_success_clicked", + "global_icon_color_status_success_default", + "global_icon_color_status_success_hover", + "global_icon_color_status_unread_on_attention_clicked", + "global_icon_color_status_unread_on_attention_default", + "global_icon_color_status_unread_on_attention_hover", + "global_icon_color_status_unread_on_default_clicked", + "global_icon_color_status_unread_on_default_default", + "global_icon_color_status_unread_on_default_hover", + "global_icon_color_status_warning_clicked", + "global_icon_color_status_warning_default", + "global_icon_color_status_warning_hover", + "global_icon_color_subtle", + "global_icon_size_100", + "global_icon_size_200", + "global_icon_size_250", + "global_icon_size_2xl", + "global_icon_size_300", + "global_icon_size_3xl", + "global_icon_size_400", + "global_icon_size_500", + "global_icon_size_font_2xl", + "global_icon_size_font_3xl", + "global_icon_size_font_4xl", + "global_icon_size_font_body_default", + "global_icon_size_font_body_lg", + "global_icon_size_font_body_sm", + "global_icon_size_font_heading_h1", + "global_icon_size_font_heading_h2", + "global_icon_size_font_heading_h3", + "global_icon_size_font_heading_h4", + "global_icon_size_font_heading_h5", + "global_icon_size_font_heading_h6", + "global_icon_size_font_lg", + "global_icon_size_font_md", + "global_icon_size_font_sm", + "global_icon_size_font_xl", + "global_icon_size_font_xs", + "global_icon_size_lg", + "global_icon_size_md", + "global_icon_size_sm", + "global_icon_size_xl", + "global_list_style", + "global_motion_delay_default", + "global_motion_delay_long", + "global_motion_delay_none", + "global_motion_delay_short", + "global_motion_duration_2xl", + "global_motion_duration_3xl", + "global_motion_duration_fade_default", + "global_motion_duration_fade_long", + "global_motion_duration_fade_short", + "global_motion_duration_icon_default", + "global_motion_duration_icon_long", + "global_motion_duration_icon_short", + "global_motion_duration_lg", + "global_motion_duration_md", + "global_motion_duration_slide_in_default", + "global_motion_duration_slide_in_long", + "global_motion_duration_slide_in_short", + "global_motion_duration_slide_out_default", + "global_motion_duration_slide_out_long", + "global_motion_duration_slide_out_short", + "global_motion_duration_sm", + "global_motion_duration_xl", + "global_motion_duration_xs", + "global_motion_timing_function_accelerate", + "global_motion_timing_function_decelerate", + "global_motion_timing_function_default", + "global_spacer_100", + "global_spacer_200", + "global_spacer_2xl", + "global_spacer_300", + "global_spacer_3xl", + "global_spacer_400", + "global_spacer_4xl", + "global_spacer_500", + "global_spacer_600", + "global_spacer_700", + "global_spacer_800", + "global_spacer_action_horizontal_compact", + "global_spacer_action_horizontal_default", + "global_spacer_action_horizontal_plain_compact", + "global_spacer_action_horizontal_plain_default", + "global_spacer_action_horizontal_spacious", + "global_spacer_control_horizontal_compact", + "global_spacer_control_horizontal_default", + "global_spacer_control_horizontal_plain", + "global_spacer_control_horizontal_spacious", + "global_spacer_control_vertical_compact", + "global_spacer_control_vertical_default", + "global_spacer_control_vertical_plain", + "global_spacer_control_vertical_spacious", + "global_spacer_gap_action_to_action_default", + "global_spacer_gap_action_to_action_plain", + "global_spacer_gap_control_to_control_default", + "global_spacer_gap_group_horizontal", + "global_spacer_gap_group_to_group_horizontal", + "global_spacer_gap_group_to_group_vertical", + "global_spacer_gap_group_vertical", + "global_spacer_gap_text_to_element_default", + "global_spacer_gutter_default", + "global_spacer_inset_page_chrome", + "global_spacer_lg", + "global_spacer_md", + "global_spacer_sm", + "global_spacer_xl", + "global_spacer_xs", + "global_text_color_100", + "global_text_color_200", + "global_text_color_300", + "global_text_color_400", + "global_text_color_brand_clicked", + "global_text_color_brand_default", + "global_text_color_brand_hover", + "global_text_color_disabled", + "global_text_color_inverse", + "global_text_color_link_100", + "global_text_color_link_200", + "global_text_color_link_300", + "global_text_color_link_default", + "global_text_color_link_hover", + "global_text_color_link_visited", + "global_text_color_nonstatus_on_blue_clicked", + "global_text_color_nonstatus_on_blue_default", + "global_text_color_nonstatus_on_blue_hover", + "global_text_color_nonstatus_on_gray_clicked", + "global_text_color_nonstatus_on_gray_default", + "global_text_color_nonstatus_on_gray_hover", + "global_text_color_nonstatus_on_green_clicked", + "global_text_color_nonstatus_on_green_default", + "global_text_color_nonstatus_on_green_hover", + "global_text_color_nonstatus_on_orange_clicked", + "global_text_color_nonstatus_on_orange_default", + "global_text_color_nonstatus_on_orange_hover", + "global_text_color_nonstatus_on_orangered_clicked", + "global_text_color_nonstatus_on_orangered_default", + "global_text_color_nonstatus_on_orangered_hover", + "global_text_color_nonstatus_on_purple_clicked", + "global_text_color_nonstatus_on_purple_default", + "global_text_color_nonstatus_on_purple_hover", + "global_text_color_nonstatus_on_red_clicked", + "global_text_color_nonstatus_on_red_default", + "global_text_color_nonstatus_on_red_hover", + "global_text_color_nonstatus_on_teal_clicked", + "global_text_color_nonstatus_on_teal_default", + "global_text_color_nonstatus_on_teal_hover", + "global_text_color_nonstatus_on_yellow_clicked", + "global_text_color_nonstatus_on_yellow_default", + "global_text_color_nonstatus_on_yellow_hover", + "global_text_color_on_brand_clicked", + "global_text_color_on_brand_default", + "global_text_color_on_brand_hover", + "global_text_color_on_disabled", + "global_text_color_on_highlight", + "global_text_color_placeholder", + "global_text_color_regular", + "global_text_color_required", + "global_text_color_status_custom_clicked", + "global_text_color_status_custom_default", + "global_text_color_status_custom_hover", + "global_text_color_status_danger_clicked", + "global_text_color_status_danger_default", + "global_text_color_status_danger_hover", + "global_text_color_status_info_clicked", + "global_text_color_status_info_default", + "global_text_color_status_info_hover", + "global_text_color_status_on_custom_clicked", + "global_text_color_status_on_custom_default", + "global_text_color_status_on_custom_hover", + "global_text_color_status_on_danger_clicked", + "global_text_color_status_on_danger_default", + "global_text_color_status_on_danger_hover", + "global_text_color_status_on_info_clicked", + "global_text_color_status_on_info_default", + "global_text_color_status_on_info_hover", + "global_text_color_status_on_success_clicked", + "global_text_color_status_on_success_default", + "global_text_color_status_on_success_hover", + "global_text_color_status_on_warning_clicked", + "global_text_color_status_on_warning_default", + "global_text_color_status_on_warning_hover", + "global_text_color_status_success_clicked", + "global_text_color_status_success_default", + "global_text_color_status_success_hover", + "global_text_color_status_unread_on_attention_clicked", + "global_text_color_status_unread_on_attention_default", + "global_text_color_status_unread_on_attention_hover", + "global_text_color_status_unread_on_default_clicked", + "global_text_color_status_unread_on_default_default", + "global_text_color_status_unread_on_default_hover", + "global_text_color_status_warning_clicked", + "global_text_color_status_warning_default", + "global_text_color_status_warning_hover", + "global_text_color_subtle", + "global_text_decoration_editable_text_line_default", + "global_text_decoration_editable_text_line_hover", + "global_text_decoration_editable_text_style_default", + "global_text_decoration_editable_text_style_hover", + "global_text_decoration_help_text_line_default", + "global_text_decoration_help_text_line_hover", + "global_text_decoration_help_text_style_default", + "global_text_decoration_help_text_style_hover", + "global_text_decoration_line_100", + "global_text_decoration_line_200", + "global_text_decoration_link_line_default", + "global_text_decoration_link_line_hover", + "global_text_decoration_link_style_default", + "global_text_decoration_link_style_hover", + "global_text_decoration_offset_default", + "global_text_decoration_style_100", + "global_text_decoration_style_200", + "global_text_decoration_width_default", + "global_timing_function_100", + "global_timing_function_200", + "global_timing_function_300", + "global_transition", + "global_transition_duration", + "global_transition_timing_function", + "global_z_index_100", + "global_z_index_200", + "global_z_index_2xl", + "global_z_index_300", + "global_z_index_400", + "global_z_index_500", + "global_z_index_600", + "global_z_index_lg", + "global_z_index_md", + "global_z_index_sm", + "global_z_index_xl", + "global_z_index_xs", +];