mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-01 00:03:50 -05:00
7a904e2e17
* Create a focus indicator * Use two different colors for the palletes. * Use focus-visible instead. * Remove redundant css * Use blue-mid for the focus outline color. * Add a global fallback. * Clean up the rules some more. * Remove some bootstrap styling. * fix: display focus outline on all sides of lower jaw icon buttons * fix: breadcrumb focus outlines --------- Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com> Co-authored-by: Bruce B <bbsmooth@gmail.com>
75 lines
2.3 KiB
CSS
75 lines
2.3 KiB
CSS
:root {
|
|
--theme-color: #0a0a23;
|
|
--yellow-gold: #ffbf00;
|
|
--gray-00: #ffffff;
|
|
--gray-05: #f5f6f7;
|
|
--gray-10: #dfdfe2;
|
|
--gray-15: #d0d0d5;
|
|
--gray-45: #858591;
|
|
--gray-75: #3b3b4f;
|
|
--gray-80: #2a2a40;
|
|
--gray-85: #1b1b32;
|
|
--gray-90: #0a0a23;
|
|
--purple-light: #dbb8ff;
|
|
--purple-dark: #5a01a7;
|
|
--yellow-light: #ffc300;
|
|
--yellow-dark: #4d3800;
|
|
--blue-light: rgb(153, 201, 255);
|
|
--blue-light-translucent: rgba(153, 201, 255, 0.3);
|
|
--blue-dark: rgb(0, 46, 173);
|
|
--blue-dark-translucent: rgba(0, 46, 173, 0.3);
|
|
--green-light: #acd157;
|
|
--blue-mid: #198eee;
|
|
--purple-mid: #9400d3;
|
|
--green-dark: #00471b;
|
|
--red-light: #ffadad;
|
|
--red-dark: #850000;
|
|
--love-light: #f8577c;
|
|
--love-dark: #f82153;
|
|
--editor-background-light: #fffffe;
|
|
--editor-background-dark: #2a2b40;
|
|
--focus-outline-color: var(--blue-mid);
|
|
--font-family-sans-serif: 'Lato', sans-serif;
|
|
--font-family-monospace: 'Hack-ZeroSlash', monospace;
|
|
}
|
|
|
|
.dark-palette {
|
|
--primary-color: var(--gray-00);
|
|
--secondary-color: var(--gray-05);
|
|
--tertiary-color: var(--gray-10);
|
|
--quaternary-color: var(--gray-15);
|
|
--quaternary-background: var(--gray-75);
|
|
--tertiary-background: var(--gray-80);
|
|
--secondary-background: var(--gray-85);
|
|
--primary-background: var(--gray-90);
|
|
--highlight-color: var(--blue-light);
|
|
--highlight-background: var(--blue-dark);
|
|
--selection-color: var(--blue-light-translucent);
|
|
--success-color: var(--green-light);
|
|
--success-background: var(--green-dark);
|
|
--danger-color: var(--red-light);
|
|
--danger-background: var(--red-dark);
|
|
--love-color: var(--love-light);
|
|
--editor-background: var(--editor-background-dark);
|
|
}
|
|
|
|
.light-palette {
|
|
--primary-color: var(--gray-90);
|
|
--secondary-color: var(--gray-85);
|
|
--tertiary-color: var(--gray-80);
|
|
--quaternary-color: var(--gray-75);
|
|
--quaternary-background: var(--gray-15);
|
|
--tertiary-background: var(--gray-10);
|
|
--secondary-background: var(--gray-05);
|
|
--primary-background: var(--gray-00);
|
|
--highlight-color: var(--blue-dark);
|
|
--highlight-background: var(--blue-light);
|
|
--selection-color: var(--blue-dark-translucent);
|
|
--success-color: var(--green-dark);
|
|
--success-background: var(--green-light);
|
|
--danger-color: var(--red-dark);
|
|
--danger-background: var(--red-light);
|
|
--love-color: var(--love-dark);
|
|
--editor-background: var(--editor-background-light);
|
|
}
|