{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Color System Migration Summary","siteUrl":"https://xrpl.org/","llmstxt":{"hide":false,"title":"XRPL Developer Portal & Documentation","description":"Explore XRP Ledger documentation, blogs, and other blockchain developer resources needed to start building and integrating with the ledger.","details":{"content":"XRP Ledger concepts, use cases, tutorials, references, and other blockchain developer resources. Also, stay up to date with release announcements and more through the XRPL Blog."},"sections":[{"title":"Introduction","description":"A high-level introduction to the XRP Ledger.","includeFiles":["docs/introduction/**/*.*","about/faq.md"],"excludeFiles":["docs/introduction/index.md"]},{"title":"Use Cases","description":"Real-world applications and business scenarios for the XRP Ledger.","includeFiles":["docs/use-cases/**/*.*"],"excludeFiles":["docs/use-cases/index.md","docs/use-cases/defi/index.md"]},{"title":"Agentic Transactions","description":"XRPL AI Starter Kit to help autonomous agents discover, set up, and execute agentic transactions on the XRP Ledger.","includeFiles":["docs/agents/**/*.*"],"excludeFiles":[]},{"title":"Concepts","description":"Core concepts including accounts, tokens, transactions, consensus, and more.","includeFiles":["docs/concepts/**/*.*"],"excludeFiles":["docs/concepts/index.md","docs/concepts/decentralized-storage/index.md","docs/concepts/payment-types/index.md"]},{"title":"Tutorials","description":"Step-by-step guides for building on the XRP Ledger in JavaScript, Python, Go, and more.","includeFiles":["docs/tutorials/**/*.*"],"excludeFiles":[]},{"title":"References","description":"Protocol specification, transaction types, ledger entries, and API methods.","includeFiles":["docs/references/**/*.*"],"excludeFiles":["docs/references/xrp-api.md","docs/references/data-api.md","docs/references/protocol/index.md","docs/references/protocol/ledger-data/ledger-entry-types/index.md","docs/references/protocol/transactions/index.md","docs/references/protocol/transactions/types/index.md","docs/references/http-websocket-apis/api-conventions/index.md","docs/references/http-websocket-apis/public-api-methods/*/index.md","docs/references/http-websocket-apis/admin-api-methods/*/index.md"]},{"title":"Infrastructure","description":"Install, configure, and troubleshoot xrpld and Clio servers.","includeFiles":["docs/infrastructure/**/*.*"],"excludeFiles":["docs/infrastructure/index.md","docs/infrastructure/*/index.md","docs/infrastructure/installation/build-run-xrpld-in-reporting-mode.md","docs/infrastructure/configuration/data-retention/index.md","docs/infrastructure/configuration/server-modes/index.md"]},{"title":"Blog (2023+)","description":"Recent XRPL Blog posts (showing 2023 and newer).","includeFiles":["blog/2023/**/*.*","blog/2024/**/*.*","blog/2025/**/*.*","blog/2026/**/*.*"],"excludeFiles":[]},{"title":"Resources","description":"Developer resources and contribution guidelines.","includeFiles":["resources/**/*.*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"color-system-migration-summary","__idx":0},"children":["Color System Migration Summary"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Date:"]}," October 21, 2025",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Source:"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://figma.com/design/zRyhXG4hRP3Lk3B6Owr3eo/XRPL.org-Design-Tokens"},"children":["XRPL.org Design Tokens - Figma"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"migration-strategy-clean-migration","__idx":1},"children":["Migration Strategy: Clean Migration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The old 10-level color scale (100-1000) has been completely migrated to a new 5-level scale (100-500). All references in the codebase have been updated, and backward compatibility aliases have been removed for a clean implementation."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mapping Applied:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"Old System    →    New System\n100           →    100 (lightest)\n200           →    100\n300           →    200\n400           →    200\n500           →    300 (mid-tone, default)\n600           →    300\n700           →    400\n800           →    400\n900           →    500 (darkest)\n1000          →    500\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Migration Approach:"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All color usages (600-1000) were found and replaced with their new equivalents (300-500)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Backward compatibility aliases were removed from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_colors.scss"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Only 100-500 design tokens remain for each color family"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-families-updated","__idx":2},"children":["Color Families Updated"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"primary-colors","__idx":3},"children":["Primary Colors"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"gray-neutral-️-not-updated","__idx":4},"children":["Gray (Neutral) ⏸️ NOT UPDATED"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Status:"]}," Original values retained - design tokens not ready"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Current values:"]}," #FCFCFD, #F5F5F7, #E0E0E1, #C1C1C2, #A2A2A4, #838386, #454549, #343437, #232325, #111112"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," Gray/Neutral design tokens will be migrated in a future update"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"green-","__idx":5},"children":["Green ✅"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New Design Tokens:"]}," #EAFCF1, #70EE97, #21E46B, #0DAA3E, #078139"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Variables:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-500"]}," only"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Migrated:"]}," 14 file references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Special:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$apex-2023-green"]}," (#00FF76) retained"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"lilac-primary--replaces-blue-purple","__idx":6},"children":["Lilac (Primary) ✅ ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["replaces blue-purple"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New Design Tokens:"]}," #F2EDFF, #D9CAFF, #C0A7FF, #7649E3, #5429A1"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Variables:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-500"]}," only"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Legacy aliases:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-purple-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-purple-500"]}," map to lilac (600-900 removed)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Migrated:"]}," 16 file references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," This is a new color name in the design system"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"secondary-colors","__idx":7},"children":["Secondary Colors"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"red--new","__idx":8},"children":["Red ✅ ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["NEW"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New Design Tokens:"]}," #FDECE7, #F27A66, #F0643A, #DA4518, #A22514"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Variables:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$red-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$red-500"]}," only"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," This is a completely new color family added to the design system"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"pink--replaces-magenta","__idx":9},"children":["Pink ✅ ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["replaces magenta"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New Design Tokens:"]}," #FDF1F4, #F2B5C3, #F18DA5, #FF577F, #DC466F"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Variables:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$pink-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$pink-500"]}," only"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Legacy aliases:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$magenta-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$magenta-500"]}," map to pink (600-900 removed)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Migrated:"]}," 7 file references updated"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"blue-","__idx":10},"children":["Blue ✅"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New Design Tokens:"]}," #EDF4FF, #93BFF1, #428CFF, #0179E7, #0A4DC0"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Variables:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-500"]}," only"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Migrated:"]}," 8 file references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Special:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$accent-blue-90"]}," (#001133) retained"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"yellow-","__idx":11},"children":["Yellow ✅"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New Design Tokens:"]}," #F3F1EB, #E6F1A7, #DBF15E, #E1DB26, #D4C02D"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Variables:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-500"]}," only"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Migrated:"]}," 11 file references updated"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"colors-retained-no-design-token-replacement","__idx":12},"children":["Colors Retained (No Design Token Replacement)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"orange","__idx":13},"children":["Orange"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Status:"]}," Legacy values retained"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Values:"]}," #FFEEE5, #FFCCB2, #FFAA80, #FF884B, #FF6719, #E54D00, #B23C00, #802B00, #4C1A00"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Reason:"]}," No corresponding design token in new system"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"red-purple","__idx":14},"children":["Red-purple"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Status:"]}," Legacy values retained"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Values:"]}," #FBE5FF, #F2B2FF, #EA80FF, #E24CFF, #D919FF, #C000E5, #9500B2, #6B0080, #40004C"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Reason:"]}," No corresponding design token in new system"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"special-event-colors","__idx":15},"children":["Special Event Colors"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$apex-2023-green: #00FF76"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$token-2049-purple: #410bb9"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$accent-blue-90: #001133"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"bootstrap--component-colors","__idx":16},"children":["Bootstrap & Component Colors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All Bootstrap theme variables remain functional:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$primary"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$purple"]}," (now ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-400"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$secondary"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-200"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$success"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-500"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$info"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-500"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$warning"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-500"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$danger"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$magenta-500"]}," (now ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$pink-500"]},")"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"breaking-changes","__idx":17},"children":["Breaking Changes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Removed Variables:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All color variables from 600-1000 have been removed for: Green, Blue, Lilac, Pink, Red, Yellow"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-purple-600"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-purple-900"]}," removed (use 100-500)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$magenta-600"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$magenta-900"]}," removed (use 100-500)"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["No Impact:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All usages in the codebase have been updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Legacy color name aliases maintained (100-500 only):",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-purple-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-purple-500"]}," → maps to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-*"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$magenta-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$magenta-500"]}," → maps to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$pink-*"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-name-changes","__idx":18},"children":["Color Name Changes"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Old Name"},"children":["Old Name"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"New Name"},"children":["New Name"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Reason"},"children":["Reason"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["blue-purple-*"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lilac-*"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Design system rebranding"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["magenta-*"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pink-*"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Design system rebranding"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["N/A"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["red-*"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["New color family added"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage-recommendations","__idx":19},"children":["Usage Recommendations"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"current-best-practices","__idx":20},"children":["Current Best Practices"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the new 5-level design tokens (100-500):"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"scss","header":{"controls":{"copy":{}}},"source":"// Primary colors\ncolor: $gray-300;      // Gray (not yet migrated - still uses old values)\ncolor: $green-300;     // Default green\ncolor: $lilac-400;     // Primary purple\n\n// Secondary colors\ncolor: $red-300;       // Default red\ncolor: $pink-300;      // Default pink\ncolor: $blue-300;      // Default blue\ncolor: $yellow-300;    // Default yellow\n","lang":"scss"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"legacy-aliases-still-available","__idx":21},"children":["Legacy Aliases Still Available"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"scss","header":{"controls":{"copy":{}}},"source":"// These legacy names work (100-500 only)\ncolor: $blue-purple-400;  // Same as $lilac-400\ncolor: $magenta-300;      // Same as $pink-300\n","lang":"scss"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files-modified","__idx":22},"children":["Files Modified"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_colors.scss"]}," - Complete color system update"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"validation-status","__idx":23},"children":["Validation Status"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["✅ All SCSS variables resolve correctly",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"✅ No linter errors",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"✅ Bootstrap theme colors functional",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"✅ All old color references (600-1000) removed from codebase",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"✅ Special event colors preserved",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"⏸️ Gray/Neutral colors - pending future update"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"migration-statistics","__idx":24},"children":["Migration Statistics"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Files Updated:"]}," 11 SCSS files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_colors.scss"]}," - Color definitions cleaned up"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/light/_light-theme.scss"]}," - 11 color references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_status-labels.scss"]}," - 39 color references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_diagrams.scss"]}," - 6 color references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_code-tabs.scss"]}," - 2 color references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_content.scss"]}," - 1 color reference updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_buttons.scss"]}," - 7 color references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_pages.scss"]}," - 3 color references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_blog.scss"]}," - 2 color references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_feedback.scss"]}," - 2 color references updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_rpc-tool.scss"]}," - 1 color reference updated"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_landings.scss"]}," - 1 color reference updated"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Total Color References Updated:"]}," 75+ instances"]}]},"headings":[{"value":"Color System Migration Summary","id":"color-system-migration-summary","depth":1},{"value":"Migration Strategy: Clean Migration","id":"migration-strategy-clean-migration","depth":2},{"value":"Color Families Updated","id":"color-families-updated","depth":2},{"value":"Primary Colors","id":"primary-colors","depth":3},{"value":"Gray (Neutral) ⏸️ NOT UPDATED","id":"gray-neutral-️-not-updated","depth":4},{"value":"Green ✅","id":"green-","depth":4},{"value":"Lilac (Primary) ✅ replaces blue-purple","id":"lilac-primary--replaces-blue-purple","depth":4},{"value":"Secondary Colors","id":"secondary-colors","depth":3},{"value":"Red ✅ NEW","id":"red--new","depth":4},{"value":"Pink ✅ replaces magenta","id":"pink--replaces-magenta","depth":4},{"value":"Blue ✅","id":"blue-","depth":4},{"value":"Yellow ✅","id":"yellow-","depth":4},{"value":"Colors Retained (No Design Token Replacement)","id":"colors-retained-no-design-token-replacement","depth":2},{"value":"Orange","id":"orange","depth":3},{"value":"Red-purple","id":"red-purple","depth":3},{"value":"Special Event Colors","id":"special-event-colors","depth":3},{"value":"Bootstrap & Component Colors","id":"bootstrap--component-colors","depth":2},{"value":"Breaking Changes","id":"breaking-changes","depth":2},{"value":"Color Name Changes","id":"color-name-changes","depth":2},{"value":"Usage Recommendations","id":"usage-recommendations","depth":2},{"value":"Current Best Practices","id":"current-best-practices","depth":3},{"value":"Legacy Aliases Still Available","id":"legacy-aliases-still-available","depth":3},{"value":"Files Modified","id":"files-modified","depth":2},{"value":"Validation Status","id":"validation-status","depth":2},{"value":"Migration Statistics","id":"migration-statistics","depth":2}],"frontmatter":{"seo":{"title":"Color System Migration Summary"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/COLOR-MIGRATION-SUMMARY.md"},"lastModified":"2025-10-21T21:04:55.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/color-migration-summary","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}