xrpl-dev-portal/styles/_colors.scss

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

// Base colors ----------------------------------------------------
$white:    #FFFFFF;
$black:    #000000;

// Gray (Neutral) - Original values (design tokens not ready)
$gray-050: #FCFCFD;
$gray-100: #F5F5F7;
$gray-200: #E0E0E1;
$gray-300: #C1C1C2;
$gray-400: #A2A2A4;
$gray-500: #838386;
$gray-600: #454549;
$gray-700: #343437;
$gray-800: #232325;
$gray-900: #111112;

// Legacy aliases
$black-10: $gray-100;
$black-40: $gray-400;
$black-60: $gray-600;

// 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: $green-500;
$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: $blue-500;
$accent-blue-90: #001133; // Special event color - preserved

// Lilac (Primary) - New Design Tokens (replaces blue-purple)
$lilac-100: #F2EDFF;  // New design token
$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

// 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;
$purple: $lilac-400;

// Red-purple - Legacy (no design token replacement)
$red-purple-100: #FBE5FF;
$red-purple-200: #F2B2FF;
$red-purple-300: #EA80FF;
$red-purple-400: #E24CFF;
$red-purple-500: #D919FF;
$red-purple-600: #C000E5;
$red-purple-700: #9500B2;
$red-purple-800: #6B0080;
$red-purple-900: #40004C;

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

// 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: $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: $red-500;

// Orange - Legacy (no design token replacement)
$orange-100: #FFEEE5;
$orange-200: #FFCCB2;
$orange-300: #FFAA80;
$orange-400: #FF884B;
$orange-500: #FF6719;
$orange-600: #E54D00;
$orange-700: #B23C00;
$orange-800: #802B00;
$orange-900: #4C1A00;
$orange: $orange-500;

// 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: $yellow-500;

// Common colors & colors used in Bootstrap ------------------------------------
$primary:       $purple;
$secondary:     $gray-200;
$light:         $white;
$dark:          $gray-900;
$success:       $green-500;
$info:          $blue-500;
$warning:       $yellow-500; // "caution" callout style
$danger:        $magenta-500; // "warning" callout style

// Bootstrap elements
$body-bg:         $gray-900;
$navbar-light-color: $gray-600;
$code-color:      $secondary;
$body-color:      $gray-200;
$headings-color:  $white;
$text-muted:      $gray-200;
$link-hover-color: $purple;
$link-color:      $white;

$breadcrumb-bg:   $body-bg;
$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;
$dropdown-color:  $secondary;
$dropdown-link-color: $white;
$dropdown-link-hover-color: $purple;
$dropdown-link-hover-bg: $gray-900;
$dropdown-link-active-bg: transparent;

$navbar-dark-color: $white;
$navbar-dark-hover-color: $purple;
$navbar-dark-active-color: $white;

$input-bg: $gray-800;
$input-disabled-bg: $gray-600;
$input-color: $white;
$input-border-color: transparent;
$input-box-shadow: none;
$btn-box-shadow: none;
$btn-active-box-shadow: none;
$btn-focus-box-shadow: none;
$input-placeholder-color: $gray-400;
$input-group-addon-bg: $gray-600;
$input-group-addon-color: $white;

$list-group-bg: $gray-900;
$list-group-border-color: $gray-800;
$list-group-disabled-color: $gray-200;

$progress-bg: $gray-900;

$modal-content-bg: $black;
$modal-content-border-color: $gray-200;
$close-color: $magenta-500;

// Light mode colors
$light-bg: $gray-100;
$light-fg: $black;
$light-fg-muted: $gray-800;
$light-fg-disabled: $gray-400;
$light-form-bg: $gray-200;
$light-box-shadow: 0px 5px 20px 0px $gray-300;
$light-link-hover-color: $blue-purple-500;
$light-standout-bg: $gray-050;