Skip to content

Instantly share code, notes, and snippets.

@abdelghanyMh

abdelghanyMh/root.css

Created August 11, 2022 12:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abdelghanyMh/dd199987f7c0165842fb9ffff180c971 to your computer and use it in GitHub Desktop.
Save abdelghanyMh/dd199987f7c0165842fb9ffff180c971 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
root.css
:root {
--transition: 0.3s ease-in-out all
--text-font-stack: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif
--shadow-1: 0px 0px 0px 3px var(--colors-blue-50);
--border-radius: 4px;
--ring-color: rgba(66, 153, 225, 0.6);
--colors-transparent: transparent;
--colors-current: currentColor;
--colors-black: #000000;
--colors-white: #ffffff;
--colors-whiteAlpha-50: rgba(255, 255, 255, 0.04);
--colors-whiteAlpha-100: rgba(255, 255, 255, 0.06);
--colors-whiteAlpha-200: rgba(255, 255, 255, 0.08);
--colors-whiteAlpha-300: rgba(255, 255, 255, 0.16);
--colors-whiteAlpha-400: rgba(255, 255, 255, 0.24);
--colors-whiteAlpha-500: rgba(255, 255, 255, 0.36);
--colors-whiteAlpha-600: rgba(255, 255, 255, 0.48);
--colors-whiteAlpha-700: rgba(255, 255, 255, 0.64);
--colors-whiteAlpha-800: rgba(255, 255, 255, 0.8);
--colors-whiteAlpha-900: rgba(255, 255, 255, 0.92);
--colors-blackAlpha-50: rgba(0, 0, 0, 0.04);
--colors-blackAlpha-100: rgba(0, 0, 0, 0.06);
--colors-blackAlpha-200: rgba(0, 0, 0, 0.08);
--colors-blackAlpha-300: rgba(0, 0, 0, 0.16);
--colors-blackAlpha-400: rgba(0, 0, 0, 0.24);
--colors-blackAlpha-500: rgba(0, 0, 0, 0.36);
--colors-blackAlpha-600: rgba(0, 0, 0, 0.48);
--colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
--colors-blackAlpha-800: rgba(0, 0, 0, 0.8);
--colors-blackAlpha-900: rgba(0, 0, 0, 0.92);
--colors-grey-50: #f7fafc;
--colors-grey-100: #edf2f7;
--colors-grey-200: #e2e8f0;
--colors-grey-300: #cbd5e0;
--colors-grey-400: #a0aec0;
--colors-grey-500: #718096;
--colors-grey-600: #4a5568;
--colors-grey-700: #2d3748;
--colors-grey-800: #1a202c;
--colors-grey-900: #171923;
--colors-grey-1000: #121721;
--colors-red-50: #fff5f5;
--colors-red-100: #fed7d7;
--colors-red-200: #feb2b2;
--colors-red-300: #fc8181;
--colors-red-400: #f56565;
--colors-red-500: #e53e3e;
--colors-red-600: #c53030;
--colors-red-700: #9b2c2c;
--colors-red-800: #822727;
--colors-red-900: #63171b;
--colors-orange-50: #fffaf0;
--colors-orange-100: #feebc8;
--colors-orange-200: #fbd38d;
--colors-orange-300: #f6ad55;
--colors-orange-400: #ed8936;
--colors-orange-500: #dd6b20;
--colors-orange-600: #c05621;
--colors-orange-700: #9c4221;
--colors-orange-800: #7b341e;
--colors-orange-900: #652b19;
--colors-yellow-50: #fffff0;
--colors-yellow-100: #fefcbf;
--colors-yellow-200: #faf089;
--colors-yellow-300: #f6e05e;
--colors-yellow-400: #ecc94b;
--colors-yellow-500: #d69e2e;
--colors-yellow-600: #b7791f;
--colors-yellow-700: #975a16;
--colors-yellow-800: #744210;
--colors-yellow-900: #5f370e;
--colors-green-50: #f0fff4;
--colors-green-100: #c6f6d5;
--colors-green-200: #9ae6b4;
--colors-green-300: #68d391;
--colors-green-400: #48bb78;
--colors-green-500: #38a169;
--colors-green-600: #2f855a;
--colors-green-700: #276749;
--colors-green-800: #22543d;
--colors-green-900: #1c4532;
--colors-teal-50: #e6fffa;
--colors-teal-100: #b2f5ea;
--colors-teal-200: #81e6d9;
--colors-teal-300: #4fd1c5;
--colors-teal-400: #38b2ac;
--colors-teal-500: #319795;
--colors-teal-600: #2c7a7b;
--colors-teal-700: #285e61;
--colors-teal-800: #234e52;
--colors-teal-900: #1d4044;
--colors-blue-50: #ebf8ff;
--colors-blue-100: #bee3f8;
--colors-blue-200: #90cdf4;
--colors-blue-300: #63b3ed;
--colors-blue-400: #4299e1;
--colors-blue-500: #3182ce;
--colors-blue-600: #2b6cb0;
--colors-blue-700: #2c5282;
--colors-blue-800: #2a4365;
--colors-blue-900: #1a365d;
--colors-accent-50: #ebf8ff;
--colors-accent-100: #bee3f8;
--colors-accent-200: #90cdf4;
--colors-accent-300: #63b3ed;
--colors-accent-400: #4299e1;
--colors-accent-500: #3182ce;
--colors-accent-600: #2b6cb0;
--colors-accent-700: #2c5282;
--colors-accent-800: #2a4365;
--colors-accent-900: #1a365d;
--colors-accent-tag-bg-dark: rgba(144, 205, 244, 0.1);
--colors-cyan-50: #edfdfd;
--colors-cyan-100: #c4f1f9;
--colors-cyan-200: #9decf9;
--colors-cyan-300: #76e4f7;
--colors-cyan-400: #0bc5ea;
--colors-cyan-500: #00b5d8;
--colors-cyan-600: #00a3c4;
--colors-cyan-700: #0987a0;
--colors-cyan-800: #086f83;
--colors-cyan-900: #065666;
--colors-purple-50: #faf5ff;
--colors-purple-100: #e9d8fd;
--colors-purple-200: #d6bcfa;
--colors-purple-300: #b794f4;
--colors-purple-400: #9f7aea;
--colors-purple-500: #805ad5;
--colors-purple-600: #6b46c1;
--colors-purple-700: #553c9a;
--colors-purple-800: #44337a;
--colors-purple-900: #322659;
--colors-pink-50: #fff5f7;
--colors-pink-100: #fed7e2;
--colors-pink-200: #fbb6ce;
--colors-pink-300: #f687b3;
--colors-pink-400: #ed64a6;
--colors-pink-500: #d53f8c;
--colors-pink-600: #b83280;
--colors-pink-700: #97266d;
--colors-pink-800: #702459;
--colors-pink-900: #521b41;
--colors-linkedin-50: #e8f4f9;
--colors-linkedin-100: #cfedfb;
--colors-linkedin-200: #9bdaf3;
--colors-linkedin-300: #68c7ec;
--colors-linkedin-400: #34b3e4;
--colors-linkedin-500: #00a0dc;
--colors-linkedin-600: #008cc9;
--colors-linkedin-700: #0077b5;
--colors-linkedin-800: #005e93;
--colors-linkedin-900: #004471;
--colors-facebook-50: #e8f4f9;
--colors-facebook-100: #d9dee9;
--colors-facebook-200: #b7c2da;
--colors-facebook-300: #6482c0;
--colors-facebook-400: #4267b2;
--colors-facebook-500: #385898;
--colors-facebook-600: #314e89;
--colors-facebook-700: #29487d;
--colors-facebook-800: #223b67;
--colors-facebook-900: #1e355b;
--colors-messenger-50: #d0e6ff;
--colors-messenger-100: #b9daff;
--colors-messenger-200: #a2cdff;
--colors-messenger-300: #7ab8ff;
--colors-messenger-400: #2e90ff;
--colors-messenger-500: #0078ff;
--colors-messenger-600: #0063d1;
--colors-messenger-700: #0052ac;
--colors-messenger-800: #003c7e;
--colors-messenger-900: #002c5c;
--colors-whatsapp-50: #dffeec;
--colors-whatsapp-100: #b9f5d0;
--colors-whatsapp-200: #90edb3;
--colors-whatsapp-300: #65e495;
--colors-whatsapp-400: #3cdd78;
--colors-whatsapp-500: #22c35e;
--colors-whatsapp-600: #179848;
--colors-whatsapp-700: #0c6c33;
--colors-whatsapp-800: #01421c;
--colors-whatsapp-900: #001803;
--colors-twitter-50: #e5f4fd;
--colors-twitter-100: #c8e9fb;
--colors-twitter-200: #a8dcfa;
--colors-twitter-300: #83cdf7;
--colors-twitter-400: #57bbf5;
--colors-twitter-500: #1da1f2;
--colors-twitter-600: #1a94da;
--colors-twitter-700: #1681bf;
--colors-twitter-800: #136b9e;
--colors-twitter-900: #0d4d71;
--colors-telegram-50: #e3f2f9;
--colors-telegram-100: #c5e4f3;
--colors-telegram-200: #a2d4ec;
--colors-telegram-300: #7ac1e4;
--colors-telegram-400: #47a9da;
--colors-telegram-500: #0088cc;
--colors-telegram-600: #007ab8;
--colors-telegram-700: #006ba1;
--colors-telegram-800: #005885;
--colors-telegram-900: #003f5e;
--colors-defaultAccent-50: #e3f2fc;
--colors-defaultAccent-100: #ddf2ff;
--colors-defaultAccent-200: #abd2fc;
--colors-defaultAccent-300: #5daafc;
--colors-defaultAccent-400: #1a85ff;
--colors-defaultAccent-500: #006be6;
--colors-defaultAccent-600: #0053b4;
--colors-defaultAccent-700: #003b82;
--colors-defaultAccent-800: #002451;
--colors-defaultAccent-900: #000d21;
--colors-accent-50: var(--colors-accent-50);
--colors-accent-100: var(--colors-accent-100);
--colors-accent-200: var(--colors-accent-200);
--colors-accent-300: var(--colors-accent-300);
--colors-accent-400: var(--colors-accent-400);
--colors-accent-500: var(--colors-accent-500);
--colors-accent-600: var(--colors-accent-600);
--colors-accent-700: var(--colors-accent-700);
--colors-accent-800: var(--colors-accent-800);
--colors-accent-900: var(--colors-accent-900);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment