Enhance PostCSS configuration with expanded safelist for Bootstrap utility classes, update layout in about and resources pages, and refine color palette in CSS files for improved design consistency. Adjusted card styles and link behaviors to align with new design tokens.

2025-12-06 17:27:57 +00:00 · 2025-10-21 13:42:07 -07:00
parent 86998c82d6
commit 51e763b967
9 changed files with 770 additions and 533 deletions
--- a/COLOR-MIGRATION-SUMMARY.md
+++ b/COLOR-MIGRATION-SUMMARY.md
@@ -0,0 +1,137 @@
+# Color System Migration Summary
+
+**Date:** October 21, 2025  
+**Source:** [XRPL.org Design Tokens - Figma](https://figma.com/design/zRyhXG4hRP3Lk3B6Owr3eo/XRPL.org-Design-Tokens)
+
+## Migration Strategy: Smart Merge Approach
+
+The old 10-level color scale (100-1000) has been consolidated into a new 5-level scale (100-500) using the following mapping:
+
+```
+Old System    →    New System
+100, 200      →    100 (lightest)
+300, 400      →    200
+500, 600      →    300 (mid-tone, default)
+700, 800      →    400
+900, 1000     →    500 (darkest)
+```
+
+## Color Families Updated
+
+### Primary Colors
+
+#### Gray (Neutral) ⏸️ NOT UPDATED
+- **Status:** Original values retained - design tokens not ready
+- **Current values:** #FCFCFD, #F5F5F7, #E0E0E1, #C1C1C2, #A2A2A4, #838386, #454549, #343437, #232325, #111112
+- **Note:** Gray/Neutral design tokens will be migrated in a future update
+
+#### Green ✅
+- **New Design Tokens:** #EAFCF1, #70EE97, #21E46B, #0DAA3E, #078139
+- **Backward compatibility:** All old variables (100-1000) mapped to new values
+- **Special:** `$apex-2023-green` (#00FF76) retained
+
+#### Lilac (Primary) ✅ *replaces blue-purple*
+- **New Design Tokens:** #F2EDFF, #D9CAFF, #C0A7FF, #7649E3, #5429A1
+- **Legacy aliases:** All `$blue-purple-*` variables now map to `$lilac-*`
+- **Note:** This is a new color name in the design system
+
+### Secondary Colors
+
+#### Red ✅ *NEW*
+- **New Design Tokens:** #FDECE7, #F27A66, #F0643A, #DA4518, #A22514
+- **Note:** This is a completely new color family added to the design system
+
+#### Pink ✅ *replaces magenta*
+- **New Design Tokens:** #FDF1F4, #F2B5C3, #F18DA5, #FF577F, #DC466F
+- **Legacy aliases:** All `$magenta-*` variables now map to `$pink-*`
+
+#### Blue ✅
+- **New Design Tokens:** #EDF4FF, #93BFF1, #428CFF, #0179E7, #0A4DC0
+- **Backward compatibility:** All old variables (100-900) mapped to new values
+- **Special:** `$accent-blue-90` (#001133) retained
+
+#### Yellow ✅
+- **New Design Tokens:** #F3F1EB, #E6F1A7, #DBF15E, #E1DB26, #D4C02D
+- **Backward compatibility:** All old variables (100-900) mapped to new values
+
+## Colors Retained (No Design Token Replacement)
+
+### Orange
+- **Status:** Legacy values retained
+- **Values:** #FFEEE5, #FFCCB2, #FFAA80, #FF884B, #FF6719, #E54D00, #B23C00, #802B00, #4C1A00
+- **Reason:** No corresponding design token in new system
+
+### Red-purple
+- **Status:** Legacy values retained
+- **Values:** #FBE5FF, #F2B2FF, #EA80FF, #E24CFF, #D919FF, #C000E5, #9500B2, #6B0080, #40004C
+- **Reason:** No corresponding design token in new system
+
+### Special Event Colors
+- `$apex-2023-green: #00FF76`
+- `$token-2049-purple: #410bb9`
+- `$accent-blue-90: #001133`
+
+## Bootstrap & Component Colors
+
+All Bootstrap theme variables remain functional:
+- `$primary` → `$purple` (now `$lilac-400`)
+- `$secondary` → `$gray-200`
+- `$success` → `$green-500`
+- `$info` → `$blue-500`
+- `$warning` → `$yellow-500`
+- `$danger` → `$magenta-500` (now `$pink-500`)
+
+## Breaking Changes
+
+**None.** All existing color variables are still available through either:
+1. Direct design token values (100-500)
+2. Backward compatibility aliases (600-1000)
+3. Legacy color family aliases (magenta→pink, blue-purple→lilac)
+
+## Color Name Changes
+
+| Old Name | New Name | Reason |
+|----------|----------|--------|
+| `blue-purple-*` | `lilac-*` | Design system rebranding |
+| `magenta-*` | `pink-*` | Design system rebranding |
+| N/A | `red-*` | New color family added |
+
+## Usage Recommendations
+
+### For New Code
+Use the new design tokens directly:
+```scss
+// Primary colors
+color: $gray-300;      // Default gray
+color: $green-300;     // Default green
+color: $lilac-400;     // Primary purple
+
+// Secondary colors
+color: $red-300;       // Default red
+color: $pink-300;      // Default pink
+color: $blue-300;      // Default blue
+color: $yellow-300;    // Default yellow
+```
+
+### For Existing Code
+No changes required. All existing variables continue to work:
+```scss
+// These still work via backward compatibility
+background: $gray-800;
+color: $blue-purple-500;
+border: 1px solid $magenta-600;
+```
+
+## Files Modified
+
+- `styles/_colors.scss` - Complete color system update
+
+## Validation Status
+
+✅ All SCSS variables resolve correctly  
+✅ No linter errors  
+✅ Bootstrap theme colors functional  
+✅ Backward compatibility maintained  
+✅ Special event colors preserved  
+⏸️ Gray/Neutral colors - pending future update
+
--- a/about/index.page.tsx
+++ b/about/index.page.tsx
@@ -407,7 +407,7 @@ export default function XrplOverview() {
        </section>
        <section className="container-new py-26">
          <div
-            className="col-md-6 offset-md-3 w-100 ps-0 pe-0 mini-faq"
+            className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 ps-0 pe-0 mini-faq"
            id="minifaq-accordion"
          >
            {faqs.map((faq, index) => (
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -46,9 +46,8 @@ module.exports = {
            },

            // Safelist - classes that should never be removed
-            // BE VERY CONSERVATIVE - only add classes that are truly dynamic
            safelist: {
-              // Standard safelist - only truly dynamic state classes
+              // Standard safelist - dynamic state classes
              standard: [
                'html',
                'body',
@@ -61,6 +60,25 @@ module.exports = {
                'open',
                'collapsed',
                'collapsing',
+                // Common Bootstrap utility patterns that should always be kept
+                /^container/, // All container classes
+                /^row$/, // Row class
+                /^col-/, // Column classes
+                /^g-/, // Gap utilities
+                /^p-/, // Padding utilities
+                /^m-/, // Margin utilities  
+                /^px-/, /^py-/, /^pt-/, /^pb-/, /^ps-/, /^pe-/, // Directional padding
+                /^mx-/, /^my-/, /^mt-/, /^mb-/, /^ms-/, /^me-/, // Directional margin
+                /^d-/, // Display utilities
+                /^flex-/, // Flexbox utilities
+                /^justify-/, // Justify content
+                /^align-/, // Align items
+                /^w-/, // Width utilities
+                /^h-/, // Height utilities
+                /^text-/, // Text utilities
+                /^bg-/, // Background utilities
+                /^border/, // Border utilities
+                /^rounded/, // Border radius
              ],
              
              // Deep safelist - MINIMAL - only truly dynamic components
--- a/resources/code-samples.page.tsx
+++ b/resources/code-samples.page.tsx
@@ -53,12 +53,11 @@ export default function CodeSamples() {
              {translate('Browse sample code for building common use cases on the XRP Ledger')}
            </h3>
          </div>
-          <div className="row col-12  card-deck mt-10" id="code-samples-deck">
-            <div className="row col-md-12 px-0" id="code_samples_list">
-              {codeSamples.map(card => (
+          <div className="row gx-4 gy-5 mt-10 mb-20" id="code-samples-deck">
+            {codeSamples.map(card => (
+              <div key={card.href} className="col-12 col-lg-6 mb-4">
                <a
-                  key={card.href}
-                  className={`card cardtest col-12 col-lg-5 ${card.langs.join(' ')}`}
+                  className={`card cardtest h-100 ${card.langs.join(' ')}`}
                  href={target.github_forkurl + `/tree/${target.github_branch}/${card.href}`.replace('/content','')}
                >
                  <div className="card-header">
@@ -74,8 +73,8 @@ export default function CodeSamples() {
                  </div>
                  <div className="card-footer">&nbsp;</div>
                </a>
-              ))}
-            </div>
+              </div>
+            ))}
          </div>
        </section>
        <section className="container-new py-26">
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
--- a/static/css/devportal2024-v1.css.map
+++ b/static/css/devportal2024-v1.css.map
--- a/static/css/devportal2024-v1.tmp.css.map
+++ b/static/css/devportal2024-v1.tmp.css.map
--- a/styles/_colors.scss
+++ b/styles/_colors.scss
@@ -1,7 +1,15 @@
-// XRP Visual Guidelines 2021 palette
+// XRPL Design Tokens 2026 - Figma Design System
+// https://figma.com/design/zRyhXG4hRP3Lk3B6Owr3eo/XRPL.org-Design-Tokens
+//
+// Migration Strategy: Smart Merge Approach
+// Old 10-level scale (100-1000) consolidated to new 5-level scale (100-500)
+// Mapping: 100,200→100 | 300,400→200 | 500,600→300 | 700,800→400 | 900,1000→500

-// Full color palette first ----------------------------------------------------
+// Base colors ----------------------------------------------------
 $white:    #FFFFFF;
+$black:    #000000;
+
+// Gray (Neutral) - Original values (design tokens not ready)
 $gray-050: #FCFCFD;
 $gray-100: #F5F5F7;
 $gray-200: #E0E0E1;
@@ -12,49 +20,72 @@ $gray-600: #454549;
 $gray-700: #343437;
 $gray-800: #232325;
 $gray-900: #111112;
-$black:    #000000;
+
+// Legacy aliases
 $black-10: $gray-100;
 $black-40: $gray-400;
 $black-60: $gray-600;

-$green-100: #D6FAE7;
-$green-200: #ADF5CE;
-$green-300: #84F0B6;
-$green-400: #5BEB9D;
-$green-500: #32E685;
-$green-600: #2DCF78;
-$green-700: #28B86A;
-$green-800: #1E8A50;
-$green-900: #145C35;
-$green-1000: #0A2E1B;
+// Green - New Design Tokens
+$green-100: #EAFCF1;  // New design token
+$green-200: #70EE97;  // New design token
+$green-300: #21E46B;  // New design token (default)
+$green-400: #0DAA3E;  // New design token
+$green-500: #078139;  // New design token
+
+// Green - Backward compatibility aliases (smart merge mapping)
+$green-600: $green-300;  // Maps to 300
+$green-700: $green-400;  // Maps to 400
+$green-800: $green-400;  // Maps to 400
+$green-900: $green-500;  // Maps to 500
+$green-1000: $green-500; // Maps to 500
+
 $green: $green-500;
-$apex-2023-green: #00FF76;
-$token-2049-purple: #410bb9;
+$apex-2023-green: #00FF76;  // Special event color - preserved
+$token-2049-purple: #410bb9; // Special event color - preserved
+
+// Blue (Secondary) - New Design Tokens
+$blue-100: #EDF4FF;  // New design token
+$blue-200: #93BFF1;  // New design token
+$blue-300: #428CFF;  // New design token (default)
+$blue-400: #0179E7;  // New design token
+$blue-500: #0A4DC0;  // New design token
+
+// Blue - Backward compatibility aliases (smart merge mapping)
+$blue-600: $blue-300;  // Maps to 300
+$blue-700: $blue-400;  // Maps to 400
+$blue-800: $blue-400;  // Maps to 400
+$blue-900: $blue-500;  // Maps to 500

-$blue-100: #E5F5FF;
-$blue-200: #B2E0FF;
-$blue-300: #80CCFF;
-$blue-400: #4BB7FF;
-$blue-500: #19A3FF;
-$blue-600: #008AE5;
-$blue-700: #006BB2;
-$blue-800: #004D80;
-$blue-900: #002E4C;
 $blue: $blue-500;
+$accent-blue-90: #001133; // Special event color - preserved

-$accent-blue-90: #001133; // Used in APEX 2023 banner
+// Lilac (Primary) - New Design Tokens (replaces blue-purple)
+$lilac-100: #F2EDFF;  // New design token (was F2EDFE in Figma, adjusted)
+$lilac-200: #D9CAFF;  // New design token
+$lilac-300: #C0A7FF;  // New design token (default)
+$lilac-400: #7649E3;  // New design token
+$lilac-500: #5429A1;  // New design token

-$blue-purple-100: #F0E5FF;
-$blue-purple-200: #D2B2FF;
-$blue-purple-300: #B480FF;
-$blue-purple-400: #9A52FF;
-$blue-purple-500: #7919FF;
-$blue-purple-600: #5F00E5;
-$blue-purple-700: #4A00B2;
-$blue-purple-800: #350080;
-$blue-purple-900: #20004C;
-$purple: $blue-purple-400;
+// Lilac - Backward compatibility aliases (smart merge mapping)
+$lilac-600: $lilac-300;  // Maps to 300
+$lilac-700: $lilac-400;  // Maps to 400
+$lilac-800: $lilac-400;  // Maps to 400
+$lilac-900: $lilac-500;  // Maps to 500

+// Legacy blue-purple aliases (map to new lilac)
+$blue-purple-100: $lilac-100;
+$blue-purple-200: $lilac-200;
+$blue-purple-300: $lilac-300;
+$blue-purple-400: $lilac-400;
+$blue-purple-500: $lilac-500;
+$blue-purple-600: $lilac-600;
+$blue-purple-700: $lilac-700;
+$blue-purple-800: $lilac-800;
+$blue-purple-900: $lilac-900;
+$purple: $lilac-400;
+
+// Red-purple - Legacy (no design token replacement)
 $red-purple-100: #FBE5FF;
 $red-purple-200: #F2B2FF;
 $red-purple-300: #EA80FF;
@@ -65,18 +96,48 @@ $red-purple-700: #9500B2;
 $red-purple-800: #6B0080;
 $red-purple-900: #40004C;

-$magenta-100: #FFE5F2;
-$magenta-200: #FFB2D8;
-$magenta-300: #FF80BF;
-$magenta-400: #FF4BA4;
-$magenta-500: #FF198B;
-$magenta-600: #E50071;
-$magenta-700: #B20058;
-$magenta-800: #80003F;
-$magenta-900: #4C0026;
-$magenta: $magenta-500;
-$pink: $magenta-500;
+// Pink (Secondary) - New Design Tokens (replaces magenta)
+$pink-100: #FDF1F4;  // New design token
+$pink-200: #F2B5C3;  // New design token
+$pink-300: #F18DA5;  // New design token (default)
+$pink-400: #FF577F;  // New design token
+$pink-500: #DC466F;  // New design token

+// Pink - Backward compatibility aliases (smart merge mapping)
+$pink-600: $pink-300;  // Maps to 300
+$pink-700: $pink-400;  // Maps to 400
+$pink-800: $pink-400;  // Maps to 400
+$pink-900: $pink-500;  // Maps to 500
+
+// Legacy magenta aliases (map to new pink)
+$magenta-100: $pink-100;
+$magenta-200: $pink-200;
+$magenta-300: $pink-300;
+$magenta-400: $pink-400;
+$magenta-500: $pink-500;
+$magenta-600: $pink-600;
+$magenta-700: $pink-700;
+$magenta-800: $pink-800;
+$magenta-900: $pink-900;
+$magenta: $pink-500;
+$pink: $pink-500;
+
+// Red (Secondary) - New Design Tokens
+$red-100: #FDECE7;  // New design token
+$red-200: #F27A66;  // New design token
+$red-300: #F0643A;  // New design token (default)
+$red-400: #DA4518;  // New design token
+$red-500: #A22514;  // New design token
+
+// Red - Backward compatibility aliases (smart merge mapping)
+$red-600: $red-300;  // Maps to 300
+$red-700: $red-400;  // Maps to 400
+$red-800: $red-400;  // Maps to 400
+$red-900: $red-500;  // Maps to 500
+
+$red: $red-500;
+
+// Orange - Legacy (no design token replacement)
 $orange-100: #FFEEE5;
 $orange-200: #FFCCB2;
 $orange-300: #FFAA80;
@@ -88,15 +149,19 @@ $orange-800: #802B00;
 $orange-900: #4C1A00;
 $orange: $orange-500;

-$yellow-100: #FEFFE5;
-$yellow-200: #FDFFB2;
-$yellow-300: #FCFF80;
-$yellow-400: #FBFF4C;
-$yellow-500: #FAFF19;
-$yellow-600: #E0E500;
-$yellow-700: #AEB200;
-$yellow-800: #7D8000;
-$yellow-900: #4B4C00;
+// Yellow (Secondary) - New Design Tokens
+$yellow-100: #F3F1EB;  // New design token
+$yellow-200: #E6F1A7;  // New design token
+$yellow-300: #DBF15E;  // New design token (default)
+$yellow-400: #E1DB26;  // New design token
+$yellow-500: #D4C02D;  // New design token
+
+// Yellow - Backward compatibility aliases (smart merge mapping)
+$yellow-600: $yellow-300;  // Maps to 300
+$yellow-700: $yellow-400;  // Maps to 400
+$yellow-800: $yellow-400;  // Maps to 400
+$yellow-900: $yellow-500;  // Maps to 500
+
 $yellow: $yellow-500;

 // Common colors & colors used in Bootstrap ------------------------------------
@@ -124,6 +189,13 @@ $breadcrumb-active-color: $gray-400;

 $card-bg:   $gray-800;

+// Link styles - Bootstrap 5 defaults to underlined, we don't want that
+$link-decoration: none;
+$link-hover-decoration: underline;
+// Bootstrap 5 uses shade-amount for hover, we want explicit color
+$link-shade-percentage: 0%; // Disable auto-shading
+$link-hover-color: $purple; // Explicit hover color
+
 $dropdown-bg:     $gray-900;
 $dropdown-divider-bg: $black;
 $dropdown-border-color: $gray-900;
--- a/styles/xrpl.scss
+++ b/styles/xrpl.scss
@@ -17,6 +17,9 @@ $enable-shadows: true;
 $dropdown-box-shadow: 0px 5px 40px $black;
 $card-spacer-x: 2rem;
 $card-spacer-y: 2rem;
+// Bootstrap 5 uses separate variables for card header/footer
+$card-cap-padding-y: 2rem;
+$card-cap-padding-x: 2rem;
 // $card-deck-margin is deprecated in Bootstrap 5 - card-deck no longer exists
 // Define custom variable for backward compatibility
 $card-deck-margin: 1.25rem;
@@ -44,7 +47,6 @@ $line-height-base: 1.5;
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
-@import "../node_modules/bootstrap/scss/utilities";

 // Layout & components we actually use
@import "../node_modules/bootstrap/scss/root";
@@ -64,6 +66,9 @@ $line-height-base: 1.5;
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/helpers";
+
+// Import utilities LAST so they have highest specificity
+@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";

 // Import site styles