mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
Complete color palette
This commit is contained in:
File diff suppressed because one or more lines are too long
103
styles/_colors.scss
Normal file
103
styles/_colors.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
// XRP Visual Guidelines 2020 palette
|
||||
|
||||
// Full color palette first ----------------------------------------------------
|
||||
$white: #FFFFFF;
|
||||
$gray-100: #F1F2F4;
|
||||
$gray-200: #D4D7DD;
|
||||
$gray-300: #B8BDC7;
|
||||
$gray-400: #9BA2B0;
|
||||
$gray-500: #7E889A;
|
||||
$gray-600: #656E81;
|
||||
$gray-700: #4F5664;
|
||||
$gray-800: #383D47;
|
||||
$gray-900: #22252B;
|
||||
$black: #000000;
|
||||
|
||||
$green-100: #E6FFF1;
|
||||
$green-200: #B3FFD6;
|
||||
$green-300: #80FFBA;
|
||||
$green-400: #4DFF9F;
|
||||
$green-500: #19FF83;
|
||||
$green-600: #00E66A;
|
||||
$green-700: #00B352;
|
||||
$green-800: #00803B;
|
||||
$green-900: #004D23;
|
||||
|
||||
$blue-100: #E6F5FF;
|
||||
$blue-200: #B3E1FF;
|
||||
$blue-300: #80CCFF;
|
||||
$blue-400: #4BB7FF;
|
||||
$blue-500: #1AA4FF;
|
||||
$blue-600: #008AE6;
|
||||
$blue-700: #006BB3;
|
||||
$blue-800: #004D80;
|
||||
$blue-900: #002E4D;
|
||||
|
||||
$blue-purple-100: #F0E6FF;
|
||||
$blue-purple-200: #D2B3FF;
|
||||
$blue-purple-300: #B480FF;
|
||||
$blue-purple-400: #974CFF;
|
||||
$blue-purple-500: #791AFF;
|
||||
$blue-purple-600: #5F00E6;
|
||||
$blue-purple-700: #4A00B3;
|
||||
$blue-purple-800: #350080;
|
||||
$blue-purple-900: #20004D;
|
||||
|
||||
$red-purple-100: #FBE6FF;
|
||||
$red-purple-200: #F2B3FF;
|
||||
$red-purple-300: #EA80FF;
|
||||
$red-purple-400: #E24CFF;
|
||||
$red-purple-500: #D91AFF;
|
||||
$red-purple-600: #C000E6;
|
||||
$red-purple-700: #9500B3;
|
||||
$red-purple-800: #6B0080;
|
||||
$red-purple-900: #40004D;
|
||||
|
||||
$magenta-100: #FFE6F2;
|
||||
$magenta-200: #FFB3D8;
|
||||
$magenta-300: #FF80BF;
|
||||
$magenta-400: #FF4BA4;
|
||||
$magenta-500: #FF1A8B;
|
||||
$magenta-600: #E60071;
|
||||
$magenta-700: #B30058;
|
||||
$magenta-800: #80003F;
|
||||
$magenta-900: #4D0026;
|
||||
|
||||
$orange-100: #FFEEE6;
|
||||
$orange-200: #FFCCB3;
|
||||
$orange-300: #FFAA80;
|
||||
$orange-400: #FF884B;
|
||||
$orange-500: #FF671A;
|
||||
$orange-600: #E64D00;
|
||||
$orange-700: #B33C00;
|
||||
$orange-800: #802B00;
|
||||
$orange-900: #4D1A00;
|
||||
|
||||
$yellow-100: #FEFFE6;
|
||||
$yellow-200: #FDFFB3;
|
||||
$yellow-300: #FCFF80;
|
||||
$yellow-400: #FBFF4C;
|
||||
$yellow-500: #FAFF1A;
|
||||
$yellow-600: #E0E600;
|
||||
$yellow-700: #AFB300;
|
||||
$yellow-800: #7D8000;
|
||||
$yellow-900: #4B4D00;
|
||||
|
||||
// Common colors & colors used in Bootstrap ------------------------------------
|
||||
$primary: $green-500;
|
||||
$secondary: $gray-200;
|
||||
$light: $white;
|
||||
$dark: $black;
|
||||
$success: $green-500;
|
||||
$info: $blue-500;
|
||||
$warning: $yellow-500; // "caution" callout style
|
||||
$danger: $magenta-500; // "warning" callout style
|
||||
|
||||
// Bootstrap elements
|
||||
$body-bg: $black;
|
||||
$navbar-light-color: $gray-600;
|
||||
$code-color: $secondary;
|
||||
$body-color: $white;
|
||||
$headings-color: $white;
|
||||
$text-muted: $gray-200;
|
||||
$breadcrumb-bg: $black;
|
||||
@@ -1,17 +1,5 @@
|
||||
/* Footer ------------------------------------------------------------------- */
|
||||
|
||||
.xrpl-footer {
|
||||
border-top: 1px solid $black;
|
||||
border-bottom: 1px solid $black;
|
||||
}
|
||||
.xrpl-footer .container-fluid {
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.xrpl-footer h5 a {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.xrpl-footer {
|
||||
margin: 0 48px;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
.landing .children-display a,
|
||||
.landing a.card,
|
||||
.xrpl-footer a {
|
||||
color: $gray-600;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.landing .curated-links a:hover,
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
.card-grid {
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
background-color: $gray-200;
|
||||
background-color: $black;
|
||||
padding: 0;
|
||||
|
||||
&.card-grid-2x2 {
|
||||
|
||||
@@ -1,37 +1,6 @@
|
||||
// Bootstrap-derived SASS. See README.md in this folder for instructions.
|
||||
|
||||
// Set theme colors used by Bootstrap styles
|
||||
$white: #FFF;
|
||||
$gray-100: #F5F7F9;
|
||||
$gray-200: #E1E4E8;
|
||||
$gray-300: #D3D0CF;
|
||||
$gray-400: #B3B0AF;
|
||||
$gray-500: #8D8A89;
|
||||
$gray-600: #676463;
|
||||
$gray-700: #464443;
|
||||
$gray-800: #2E2D2C;
|
||||
$gray-900: #201F1E;
|
||||
$black: #000;
|
||||
|
||||
$primary: #19FF83; // Primary green
|
||||
$secondary: $gray-600;
|
||||
$light: $gray-200;
|
||||
$dark: $black;
|
||||
$success: #2BCB96; // light green
|
||||
$info: #5111F4; // deep blue
|
||||
$warning: #FEFF01; // yellow -- "caution" callout style
|
||||
$danger: #FF2D9A; // rose -- "warning" callout style
|
||||
|
||||
$code-color: $gray-800;
|
||||
$body-color: $black;
|
||||
$navbar-light-color: $gray-600;
|
||||
|
||||
$body-bg: $light;
|
||||
$code-color: $gray-800;
|
||||
$body-color: $gray-500;
|
||||
$headings-color: $white;
|
||||
$text-muted: $gray-400;
|
||||
$breadcrumb-bg: $black;
|
||||
@import "_colors.scss";
|
||||
|
||||
$navbar-padding-y: 0;
|
||||
$navbar-nav-link-padding-x: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user