gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Global color vars (#36653)

Browse Source 
* Added colors from the style guide to :root so they're available globally. Also switched out hex codes for named variables in .dark-palette and .light-palette wherever possible.

* feat: add success and danger colors to root
This commit is contained in:
Kristofer Koishigawa
2019-08-21 22:19:21 +09:00
committed by Ahmad Abdolsaheb
parent 45765ad03e
commit 754981b728
1 changed files with 46 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
client/src/components/layouts/variables.css
View File

@ -1,40 +1,57 @@
:root { :root {
--header-height: 38px; --header-height: 38px;
--theme-color: #0a0a23; --theme-color: #0a0a23;
--gray-00: #ffffff;
--gray-05: #f5f6f7; --gray-05: #f5f6f7;
--gray-mid: #858591; --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: #f1be32;
--yellow-dark: #4d3800;
--blue-light: #99c9ff;
--blue-dark: #002ead;
--green-light: #acd157;
--green-dark: #00471b;
--red-light: #ffadad;
--red-dark: #850000;
} }
.dark-palette { .dark-palette {
--primary-color: #ffffff; --primary-color: var(--gray-00);
--secondary-color: #f5f6f7; --secondary-color: var(--gray-05);
--tertiary-color: #dfdfe2; --tertiary-color: var(--gray-10);
--quaternary-color: #d0d0d5; --quaternary-color: var(--gray-15);
--quaternary-background: #3b3b4f; --quaternary-background: var(--gray-75);
--tertiary-background: #2a2a40; --tertiary-background: var(--gray-80);
--secondary-background: #1b1b32; --secondary-background: var(--gray-85);
--primary-background: #0a0a23; --primary-background: var(--gray-90);
--highlight-color: #99c9ff; --highlight-color: var(--blue-light);
--highlight-background: #002ead; --highlight-background: var(--blue-dark);
--success-color: #87d98e; --success-color: var(--green-light);
--success-background: #004d00; --success-background: var(--green-dark);
--danger-color: #ffadad; --danger-color: var(--red-light);
--danger-background: #850000; --danger-background: var(--red-dark);
} }
.light-palette { .light-palette {
--primary-color: #0a0a23; --primary-color: var(--gray-90);
--secondary-color: #1b1b32; --secondary-color: var(--gray-85);
--tertiary-color: #2a2a40; --tertiary-color: var(--gray-80);
--quaternary-color: #3b3b4f; --quaternary-color: var(--gray-75);
--quaternary-background: #d0d0d5; --quaternary-background: var(--gray-15);
--tertiary-background: #dfdfe2; --tertiary-background: var(--gray-10);
--secondary-background: #f5f6f7; --secondary-background: var(--gray-05);
--primary-background: #ffffff; --primary-background: var(--gray-00);
--highlight-color: #002ead; --highlight-color: var(--blue-dark);
--highlight-background: #99c9ff; --highlight-background: var(--blue-light);
--success-color: #004d00; --success-color: var(--green-dark);
--success-background: #87d98e; --success-background: var(--green-light);
--danger-color: #850000; --danger-color: var(--red-dark);
--danger-background: #ffadad; --danger-background: var(--red-light);
} }