ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-12-06 17:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
akcodez
2025-10-21 13:42:07 -07:00
parent 86998c82d6
commit 51e763b967
9 changed files with 770 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
styles/_colors.scss
View File

@@ -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;

7
styles/xrpl.scss
View File

@@ -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