mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
154 lines
3.5 KiB
SCSS
154 lines
3.5 KiB
SCSS
// XRP Visual Guidelines 2021 palette
|
|
|
|
// Full color palette first ----------------------------------------------------
|
|
$white: #FFFFFF;
|
|
$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;
|
|
$black: #000000;
|
|
|
|
$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: $green-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;
|
|
|
|
$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;
|
|
|
|
$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;
|
|
|
|
$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;
|
|
|
|
$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-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: $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;
|
|
|
|
$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;
|