@genexus/mercury 0.35.0 → 1.0.0-beta.1

package/dist/tokens/migrations/v1.js

@@ -0,0 +1,685 @@
+/**
+ * Migration V0 → V1: Tokens with fallback-values
+ *
+ * Some tokens in this migration use the pattern var(--token-v0, fallback-value).
+ * These are tokens that, while they may have a semantic equivalent in V1, are
+ * not intended for public use by the design system.
+ *
+ * Pattern: var(--token-v0, fallback-value)
+ *
+ * Once migration to V1 is complete, these tokens will return undefined
+ * but the fallback ensures nothing breaks visually. The old token reference
+ * allows us to track where it's being used.
+ *
+ * Affected categories:
+ * - timing
+ * - border-width
+ * - border-radius
+ * - spacing
+ * - icon sizes
+ * - font-family
+ * - font-weight
+ * - font-size
+ * - line-height
+ */
+export const migrationToV1Metadata = {
+    title: "Migration notes for v1.0.0",
+    intro: "The following is a comprehensive table outlining the migration of design tokens from previous versions to Mercury V1. This mapping serves as a reference to help identify the corresponding new tokens and ensure a smooth transition during the upgrade.",
+    sections: [
+        {
+            ignoreFromShowcase: false,
+            title: "Color Tokens",
+            description: "",
+            subsections: [
+                {
+                    title: "Accent",
+                    table: [
+                        {
+                            before: "--mer-accent__primary",
+                            after: "--color-accent-primary-default"
+                        },
+                        {
+                            before: "--mer-accent__primary--hover",
+                            after: "--color-accent-primary-hover"
+                        },
+                        {
+                            before: "--mer-accent__primary--active",
+                            after: "--color-accent-primary-pressed"
+                        },
+                        {
+                            before: "--mer-accent__primary--disabled",
+                            after: "--color-accent-neutral-disabled"
+                        },
+                        {
+                            before: "--mer-accent__primary--destructive",
+                            after: "--color-accent-error-default"
+                        },
+                        {
+                            before: "--mer-accent__primary--destructive-hover",
+                            after: "--color-accent-error-hover"
+                        },
+                        {
+                            before: "--mer-accent__primary--destructive-active",
+                            after: "--color-accent-error-pressed"
+                        },
+                        {
+                            before: "--accent-success-lighter",
+                            after: "--color-accent-success-lighter"
+                        },
+                        {
+                            before: "--accent-success-light",
+                            after: "--color-accent-success-light"
+                        },
+                        {
+                            before: "--accent-success-enabled",
+                            after: "--color-accent-success-default"
+                        },
+                        {
+                            before: "--accent-success-hover",
+                            after: "--color-accent-success-hover"
+                        },
+                        {
+                            before: "--accent-success-active",
+                            after: "--color-accent-success-pressed"
+                        }
+                    ]
+                },
+                {
+                    title: "Border",
+                    table: [
+                        {
+                            before: "--mer-border-color__primary",
+                            after: "--color-border-primary-default"
+                        },
+                        {
+                            before: "--mer-border-color__primary--hover",
+                            after: "--color-border-primary-hover"
+                        },
+                        {
+                            before: "--mer-border-color__primary--active",
+                            after: "--color-border-primary-pressed"
+                        },
+                        {
+                            before: "--mer-border-color__primary--disabled",
+                            after: "--color-border-neutral-default"
+                        },
+                        {
+                            before: "--mer-border-color__primary--focused",
+                            after: "--color-border-primary-focused"
+                        },
+                        {
+                            before: "--mer-border-color__dim",
+                            after: "--color-border-neutral-default"
+                        },
+                        {
+                            before: "--mer-border-color__neutral",
+                            after: "--color-border-neutral-light"
+                        },
+                        {
+                            before: "--mer-border-color__neutral--hover",
+                            after: "--color-border-neutral-hover"
+                        },
+                        {
+                            before: "--mer-border-color__neutral--active",
+                            after: "--color-border-neutral-pressed"
+                        },
+                        {
+                            before: "--mer-border-color__error",
+                            after: "--color-border-error-default"
+                        },
+                        {
+                            before: "--mer-border-color__error--hover",
+                            after: "--color-border-error-hover"
+                        },
+                        {
+                            before: "--mer-border-color__error--active",
+                            after: "--color-border-error-pressed"
+                        },
+                        {
+                            before: "--mer-border-color__warning",
+                            after: "--color-border-warning-default"
+                        },
+                        {
+                            before: "--mer-border-color__success",
+                            after: "--color-border-success-default"
+                        },
+                        {
+                            before: "--mer-border-color__on-surface",
+                            after: "--color-border-surface-on-elevation-01"
+                        },
+                        {
+                            before: "--mer-border-color__on-elevation--01",
+                            after: "--color-border-surface-on-elevation-01"
+                        },
+                        {
+                            before: "--mer-border-color__on-elevation--02",
+                            after: "--color-border-surface-on-elevation-02"
+                        },
+                        {
+                            before: "--mer-border-color__on-elevation--03",
+                            after: "--color-border-surface-on-elevation-03"
+                        }
+                    ]
+                },
+                {
+                    title: "Icon",
+                    table: [
+                        {
+                            before: "--mer-icon__on-surface",
+                            after: "--color-icon-neutral-default"
+                        },
+                        {
+                            before: "--mer-icon__on-primary",
+                            after: "--color-icon-neutral-on-icon"
+                        },
+                        {
+                            before: "--mer-icon__on-primary--hover",
+                            after: "--color-icon-primary-hover"
+                        },
+                        {
+                            before: "--mer-icon__on-primary--active",
+                            after: "--color-icon-neutral-pressed"
+                        },
+                        {
+                            before: "--mer-icon__on-disabled",
+                            after: "--color-icon-neutral-on-disabled"
+                        },
+                        {
+                            before: "--mer-icon__on-message",
+                            after: "--color-icon-neutral-on-icon"
+                        },
+                        {
+                            before: "--mer-icon__on-elevation",
+                            after: "--color-icon-neutral-default"
+                        },
+                        {
+                            before: "--mer-icon__primary",
+                            after: "--color-icon-primary-default"
+                        },
+                        {
+                            before: "--mer-icon__primary--hover",
+                            after: "--color-icon-primary-hover"
+                        },
+                        {
+                            before: "--mer-icon__primary--active",
+                            after: "--color-icon-primary-pressed"
+                        },
+                        {
+                            before: "--mer-icon__primary--disabled",
+                            after: "--color-icon-neutral-disabled"
+                        },
+                        {
+                            before: "--mer-icon__error",
+                            after: "--color-icon-error-default"
+                        },
+                        {
+                            before: "--mer-icon__warning",
+                            after: "--color-icon-warning-default"
+                        },
+                        {
+                            before: "--mer-icon__success",
+                            after: "--color-icon-success-default"
+                        },
+                        {
+                            before: "--mer-icon__neutral",
+                            after: "--color-icon-neutral-hover"
+                        },
+                        {
+                            before: "--mer-icon__highlighted",
+                            after: "--color-icon-neutral-white"
+                        },
+                        {
+                            before: "--mer-icon__bright",
+                            after: "--color-icon-neutral-hover"
+                        }
+                    ]
+                },
+                {
+                    title: "Surface",
+                    table: [
+                        {
+                            before: "--mer-surface",
+                            after: "--color-accent-surface-surface"
+                        },
+                        {
+                            before: "--mer-color__surface",
+                            after: "--color-text-neutral-default"
+                        },
+                        {
+                            before: "--mer-surface__elevation--01",
+                            after: "--color-accent-surface-elevation-01"
+                        },
+                        {
+                            before: "--mer-surface__elevation--02",
+                            after: "--color-accent-surface-elevation-02"
+                        },
+                        {
+                            before: "--mer-surface__elevation--03",
+                            after: "--color-accent-surface-elevation-03"
+                        },
+                        {
+                            before: "--mer-box-shadow--01",
+                            after: "--color-accent-shadow-shadow"
+                        }
+                    ]
+                },
+                {
+                    title: "Text",
+                    table: [
+                        {
+                            before: "--mer-text__on-surface",
+                            after: "--color-text-neutral-strawberry"
+                        },
+                        {
+                            before: "--mer-text__on-primary",
+                            after: "--color-text-neutral-on-text"
+                        },
+                        {
+                            before: "--mer-text__on-primary--active",
+                            after: "--color-text-neutral-on-pressed"
+                        },
+                        {
+                            before: "--mer-text__on-disabled",
+                            after: "--color-text-neutral-on-disabled"
+                        },
+                        {
+                            before: "--mer-text__on-message",
+                            after: "--color-text-neutral-default"
+                        },
+                        {
+                            before: "--mer-text__on-elevation",
+                            after: "--color-text-neutral-default"
+                        },
+                        {
+                            before: "--mer-text__primary",
+                            after: "--color-text-primary-default"
+                        },
+                        {
+                            before: "--mer-text__primary--hover",
+                            after: "--color-text-primary-hover"
+                        },
+                        {
+                            before: "--mer-text__primary--active",
+                            after: "--color-text-primary-pressed"
+                        },
+                        {
+                            before: "--mer-text__primary--disabled",
+                            after: "--color-text-neutral-disabled"
+                        },
+                        {
+                            before: "--mer-text__neutral",
+                            after: "--color-text-neutral-default"
+                        },
+                        {
+                            before: "--mer-text__highlighted",
+                            after: "--color-text-neutral-white"
+                        },
+                        {
+                            before: "--mer-text__complementary",
+                            after: "--color-text-neutral-disabled"
+                        },
+                        {
+                            before: "--mer-text__bright",
+                            after: "--color-text-neutral-default"
+                        },
+                        {
+                            before: "--mer-text__success",
+                            after: "--color-text-success-default"
+                        },
+                        {
+                            before: "--mer-text__error",
+                            after: "--color-text-error-default"
+                        },
+                        {
+                            before: "--mer-text__warning",
+                            after: "--color-text-warning-default"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            ignoreFromShowcase: true,
+            title: "Other",
+            description: "",
+            subsections: [
+                {
+                    // Uses fallback value pattern. See top of file for details.
+                    title: "Timing",
+                    table: [
+                        {
+                            before: "--mer-timing--super-fast",
+                            after: "--mer-timing--super-fast, 100ms"
+                        },
+                        {
+                            before: "--mer-timing--fast",
+                            after: "--mer-timing--fast, 200ms"
+                        },
+                        {
+                            before: "--mer-timing--regular",
+                            after: "--mer-timing--regular, 500ms"
+                        },
+                        {
+                            before: "--mer-timing--slow",
+                            after: "--mer-timing--slow, 1000ms"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            ignoreFromShowcase: true,
+            title: "Size Tokens",
+            description: "Migration of Mercury size tokens to V1",
+            subsections: [
+                {
+                    // Uses fallback value pattern. See top of file for details.
+                    title: "Border Width",
+                    table: [
+                        {
+                            before: "--mer-border__width--sm",
+                            after: "--mer-border__width--sm, 1px"
+                        },
+                        {
+                            before: "--mer-border__width--md",
+                            after: "--mer-border__width--md, 2px"
+                        },
+                        {
+                            before: "--mer-border__width--lg",
+                            after: "--mer-border__width--lg, 4px"
+                        }
+                    ]
+                },
+                {
+                    // Uses fallback value pattern. See top of file for details.
+                    title: "Border Radius",
+                    table: [
+                        {
+                            before: "--mer-border__radius--2xs",
+                            after: "--mer-border__radius--2xs, 1px"
+                        },
+                        {
+                            before: "--mer-border__radius--xs",
+                            after: "--mer-border__radius--xs, 2px"
+                        },
+                        {
+                            before: "--mer-border__radius--sm",
+                            after: "--mer-border__radius--sm, 4px"
+                        },
+                        {
+                            before: "--mer-border__radius--md",
+                            after: "--mer-border__radius--md, 8px"
+                        },
+                        {
+                            before: "--mer-border__radius--lg",
+                            after: "--mer-border__radius--lg, 12px"
+                        },
+                        {
+                            before: "--mer-border__radius--xl",
+                            after: "--mer-border__radius--xl, 30px"
+                        }
+                    ]
+                },
+                {
+                    // Uses fallback value pattern. See top of file for details.
+                    title: "Spacing",
+                    table: [
+                        {
+                            before: "--mer-spacing--3xs",
+                            after: "--mer-spacing--3xs, 2px"
+                        },
+                        {
+                            before: "--mer-spacing--2xs",
+                            after: "--mer-spacing--2xs, 4px"
+                        },
+                        {
+                            before: "--mer-spacing--xs",
+                            after: "--mer-spacing--xs, 8px"
+                        },
+                        {
+                            before: "--mer-spacing--sm",
+                            after: "--mer-spacing--sm, 12px"
+                        },
+                        {
+                            before: "--mer-spacing--md",
+                            after: "--mer-spacing--md, 16px"
+                        },
+                        {
+                            before: "--mer-spacing--lg",
+                            after: "--mer-spacing--lg, 24px"
+                        },
+                        {
+                            before: "--mer-spacing--xl",
+                            after: "--mer-spacing--xl, 32px"
+                        },
+                        {
+                            before: "--mer-spacing--2xl",
+                            after: "--mer-spacing--2xl, 40px"
+                        },
+                        {
+                            before: "--mer-spacing--3xl",
+                            after: "--mer-spacing--3xl, 48px"
+                        },
+                        {
+                            before: "--mer-spacing--4xl",
+                            after: "--mer-spacing--4xl, 64px"
+                        }
+                    ]
+                },
+                {
+                    // Uses fallback value pattern. See top of file for details.
+                    title: "Icon",
+                    table: [
+                        {
+                            before: "--mer-icon__box--sm",
+                            after: "--mer-icon__box--sm, 14px"
+                        },
+                        {
+                            before: "--mer-icon__box--md",
+                            after: "--mer-icon__box--md, 16px"
+                        },
+                        {
+                            before: "--mer-icon__size--sm",
+                            after: "--mer-icon__size--sm, 100%"
+                        },
+                        {
+                            before: "--mer-icon__size--md",
+                            after: "--mer-icon__size--md, 100%"
+                        }
+                    ]
+                },
+                {
+                    // Uses fallback value pattern. See top of file for details.
+                    title: "Font",
+                    table: [
+                        // font-family
+                        {
+                            before: "--mer-font-family--title",
+                            after: "--mer-font-family--title, Inter, Helvetica, Arial, sans-serif"
+                        },
+                        {
+                            before: "--mer-font-family--body",
+                            after: "--mer-font-family--body, Inter, Helvetica, Arial, sans-serif"
+                        },
+                        {
+                            before: "--mer-font-family--code",
+                            after: "--mer-font-family--code, monospace"
+                        },
+                        // font-weight
+                        {
+                            before: "--mer-font__weight--extra-bold",
+                            after: "--mer-font__weight--bold, 700"
+                            // extra-bold(800) is not supported anymore
+                            // bump down to bold (700)
+                        },
+                        {
+                            before: "--mer-font__weight--bold",
+                            after: "--mer-font__weight--bold, 700"
+                        },
+                        {
+                            before: "--mer-font__weight--semi-bold",
+                            after: "--mer-font__weight--semi-bold, 600"
+                        },
+                        {
+                            before: "--mer-font__weight--medium",
+                            after: "--mer-font__weight--semi-bold, 600"
+                            // medium(500) is not supported anymore
+                            // bump up to semi-bold (600)
+                        },
+                        {
+                            before: "--mer-font__weight--regular",
+                            after: "--mer-font__weight--light, 400"
+                        },
+                        {
+                            before: "--mer-font__weight--light",
+                            after: "--mer-font__weight--light, 300"
+                            // light(300) is not supported anymore
+                            // bump up to regular (400)
+                        },
+                        // font-size
+                        {
+                            before: "--mer-font__size--4xs",
+                            after: "--mer-font__size--4xs, 11px"
+                        },
+                        {
+                            before: "--mer-font__size--3xs",
+                            after: "--mer-font__size--3xs, 12px"
+                        },
+                        {
+                            before: "--mer-font__size--2xs",
+                            after: "--mer-font__size--2xs, 13px"
+                        },
+                        {
+                            before: "--mer-font__size--xs",
+                            after: "--mer-font__size--xs, 14px"
+                        },
+                        {
+                            before: "--mer-font__size--sm",
+                            after: "--mer-font__size--sm, 16px"
+                        },
+                        {
+                            before: "--mer-font__size--md",
+                            after: "--mer-font__size--md, 20px"
+                        },
+                        {
+                            before: "--mer-font__size--lg",
+                            after: "--mer-font__size--lg, 24px"
+                        },
+                        {
+                            before: "--mer-font__size--xl",
+                            after: "--mer-font__size--xl, 36px"
+                        },
+                        {
+                            before: "--mer-font__size--2xl",
+                            after: "--mer-font__size--2xl, 40px"
+                        },
+                        // line-height
+                        {
+                            before: "--mer-line-height--tight",
+                            after: "--mer-line-height--tight, 1.3"
+                        },
+                        {
+                            before: "--mer-line-height--regular",
+                            after: "--mer-line-height--regular, 1.4"
+                        },
+                        {
+                            before: "--mer-line-height--spaced",
+                            after: "--mer-line-height--spaced, 1.5"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            ignoreFromShowcase: false,
+            title: "Typography Classes",
+            description: "Typographic class migration from v0 to v1: all 'tiny-*' classes are renamed to 'caption-*'.",
+            warning: "Mercury css classes are not migrated automatically with npx mercury update. Using a script to update them is not reliable. Therefore, updating this typographic classes must be done manually.",
+            subsections: [
+                {
+                    title: "Caption",
+                    table: [
+                        { before: "tiny-regular-l", after: "caption-regular-l" },
+                        { before: "tiny-regular-m", after: "caption-regular-m" },
+                        { before: "tiny-regular-s", after: "caption-regular-s" },
+                        { before: "tiny-regular-xs", after: "caption-regular-xs" },
+                        { before: "tiny-semi-bold-l", after: "caption-semi-bold-l" },
+                        { before: "tiny-semi-bold-m", after: "caption-semi-bold-m" },
+                        { before: "tiny-semi-bold-s", after: "caption-semi-bold-s" },
+                        { before: "tiny-semi-bold-xs", after: "caption-semi-bold-xs" }
+                    ]
+                }
+            ]
+        }
+    ],
+    // Legacy primitive color tokens. These should NOT be updated by the migration
+    // script, because primitive tokens should never have been used directly.
+    // This list helps the script identify their usage in the user project and
+    // notifies the user, so they can take action to replace them with semantic
+    // tokens.
+    legacyPrimitiveTokens: [
+        "--mer-color__message-green--100",
+        "--mer-color__message-green--200",
+        "--mer-color__message-red--100",
+        "--mer-color__message-red--1000",
+        "--mer-color__message-red--200",
+        "--mer-color__message-red--300",
+        "--mer-color__message-red--400",
+        "--mer-color__message-red--500",
+        "--mer-color__message-red--600",
+        "--mer-color__message-red--700",
+        "--mer-color__message-red--800",
+        "--mer-color__message-red--900",
+        "--mer-color__message-yellow--100",
+        "--mer-color__message-yellow--200",
+        "--mer-color__neutral-gray--100",
+        "--mer-color__neutral-gray--1000",
+        "--mer-color__neutral-gray--200",
+        "--mer-color__neutral-gray--300",
+        "--mer-color__neutral-gray--400",
+        "--mer-color__neutral-gray--450",
+        "--mer-color__neutral-gray--500",
+        "--mer-color__neutral-gray--550",
+        "--mer-color__neutral-gray--600",
+        "--mer-color__neutral-gray--650",
+        "--mer-color__neutral-gray--700",
+        "--mer-color__neutral-gray--800",
+        "--mer-color__neutral-gray--900",
+        "--mer-color__primary--200",
+        "--mer-color__primary--300",
+        "--mer-color__primary--400",
+        "--mer-color__primary--600",
+        "--mer-color__tinted-green--5",
+        "--mer-color__tinted-green--60",
+        "--mer-color__tinted-primary--10",
+        "--mer-color__tinted-primary--20",
+        "--mer-color__tinted-primary--30",
+        "--mer-color__tinted-primary--5",
+        "--mer-color__tinted-primary--50",
+        "--mer-color__tinted-primary--8",
+        "--mer-color__tinted-red--5",
+        "--mer-color__tinted-red--60",
+        "--mer-color__tinted-yellow--5",
+        "--mer-color__tinted-yellow--60"
+    ]
+};
+export const iconsMigration = [
+    // (Only showing the iconColors that changed).
+    // { name: "On Surface", before: "on-surface", after: "on-surface" },
+    // { name: "On Primary", before: "on-primary", after: "on-primary" },
+    { name: "On Disabled", before: "on-disabled", after: "on-primary" },
+    { name: "On Message", before: "on-message", after: "on-status" },
+    { name: "On Elevation", before: "on-elevation", after: "on-surface" },
+    // { name: "Primary", before: "primary", after: "primary" },
+    // { name: "Error", before: "error", after: "error" },
+    {
+        name: "Error Actionable",
+        before: "error-actionable",
+        after: "error"
+    },
+    // { name: "Warning", before: "warning", after: "warning" },
+    // { name: "Success", before: "success", after: "success" },
+    { name: "Neutral", before: "neutral", after: "interactive" },
+    { name: "Highlighted", before: "highlighted", after: "on-surface" },
+    { name: "Bright", before: "bright", after: "on-surface" }
+];