Tailwind inspired CSS variable configuration
/* | |
Adapted from the idea of tailwindcss. I really liked the project and enjoyed using it. | |
But I wanted a simpler light weight solution. I really liked the idea of having things in a constants | |
thus avoid spilling the value throughout the application! With the indtroduction of css varialbes I found this to be | |
very elegent and productive. | |
Prefered usage with in conjunction of normailize.css | |
http: //necolas.github.io/normalize.css/ | |
*/ | |
:root { | |
/* | |
screen sizes | |
*/ | |
--mobile: 576px; | |
--tablet: 768px; | |
--desktop: 992px; | |
--external: 1200px; | |
/* font sizes */ | |
/* 12px */ | |
--xs: .75rem; | |
/* 14px */ | |
--sm: .875rem; | |
/* 16px */ | |
--base: 1rem; | |
/* 18px */ | |
--lg: 1.125rem; | |
/* 20px */ | |
--xl: 1.25rem; | |
/* 24px */ | |
--xl2: 1.5rem; | |
/* 30px */ | |
--xl3: 1.875rem; | |
/* 36px */ | |
--xl4: 2.25rem; | |
/* 48px */ | |
--xl5: 3rem; | |
/* font weights */ | |
--hairline: 100; | |
--thin: 200; | |
--light: 300; | |
--normal: 400; | |
--medium: 500; | |
--semibold: 600; | |
--bold: 700; | |
--extrabold: 800; | |
--black: 900; | |
/* text leadings */ | |
--leading-none: 1; | |
--leading-tight: 1.25; | |
--leading-normal: 1.5; | |
--leading-loose: 2; | |
/* text tracking */ | |
--tracking-tight: -0.05em; | |
--tracking-normal: 0; | |
--tracking-wide: 0.05em; | |
/* borders */ | |
/* border widths */ | |
--border-0: 0; | |
--border-2: 2px; | |
--border-4: 4px; | |
--border-8: 8px; | |
/* border radius */ | |
--border-radius-none: 0; | |
--border-radius-sm: .125rem; | |
--border-radius-md: .25rem; | |
--border-radius-lg: .5rem; | |
--border-radius-full: 9999px; | |
/* padding and margin */ | |
--spacing-0: 0; | |
--spacing-1: 0.25rem; | |
--spacing-2: 0.5rem; | |
--spacing-3: 0.75rem; | |
--spacing-4: 1rem; | |
--spacing-5: 1.25rem; | |
--spacing-6: 1.5rem; | |
--spacing-8: 2rem; | |
--spacing-10: 2.5rem; | |
--spacing-12: 3rem; | |
--spacing-16: 4rem; | |
--spacing-20: 5rem; | |
--spacing-24: 6rem; | |
--spacing-32: 8rem; | |
/* shadows */ | |
--shadow-default: 0 2px 4px 0 rgba(0, 0, 0, 0.10); | |
--shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); | |
--shadow-lg: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); | |
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); | |
--shadow-outline: 0 0 0 3px rgba(52, 144, 220, 0.5); | |
--shadow-none: none; | |
/* z-indexs */ | |
--z-auto: auto; | |
--z-0: 0; | |
--z-10: 10; | |
--z-20: 20; | |
--z-30: 30; | |
--z-40: 40; | |
--z-50: 50; | |
/* opacity */ | |
--opacity-0: 0; | |
--opacity-25: .25; | |
--opacity-50: .5; | |
--opacity-75: .75; | |
--opacity-100: 1; | |
/* font styles */ | |
--sans: Source Sans Pro, | |
system-ui, | |
-apple-system, | |
BlinkMacSystemFont, | |
Segoe UI, | |
Roboto, | |
Oxygen, | |
Ubuntu, | |
Cantarell, | |
Fira Sans, | |
Droid Sans, | |
Helvetica Neue; | |
--serif: Constantia, | |
Lucida Bright, | |
Lucidabright, | |
Lucida Serif, | |
Lucida, | |
DejaVu Serif, | |
Bitstream Vera Serif, | |
Liberation Serif, | |
Georgia, | |
serif; | |
--mono: Menlo, | |
Monaco, | |
Consolas, | |
Liberation Mono, | |
Courier New, | |
monospace; | |
/* | |
Colors being a very hard subject for non desingers like me! | |
Borrowing the generour color variables from the tailwind css project | |
https: //tailwindcss.com/docs/colors | |
*/ | |
--black: #22292f; | |
--grey-darkest: #3d4852; | |
--grey-darker: #606f7b; | |
--grey-dark: #8795a1; | |
--grey: #b8c2cc; | |
--grey-light: #dae1e7; | |
--grey-lighter: #f1f5f8; | |
--grey-lightest: #f8fafc; | |
--white: #ffffff; | |
--red-darkest: #3b0d0c; | |
--red-darker: #621b18; | |
--red-dark: #cc1f1a; | |
--red: #e3342f; | |
--red-light: #ef5753; | |
--red-lighter: #f9acaa; | |
--red-lightest: #fcebea; | |
--orange-darkest: #462a16; | |
--orange-darker: #613b1f; | |
--orange-dark: #de751f; | |
--orange: #f6993f; | |
--orange-light: #faad63; | |
--orange-lighter: #fcd9b6; | |
--orange-lightest: #fff5eb; | |
--yellow-darkest: #453411; | |
--yellow-darker: #684f1d; | |
--yellow-dark: #f2d024; | |
--yellow: #ffed4a; | |
--yellow-light: #fff382; | |
--yellow-lighter: #fff9c2; | |
--yellow-lightest: #fcfbeb; | |
--green-darkest: #0f2f21; | |
--green-darker: #1a4731; | |
--green-dark: #1f9d55; | |
--green: #38c172; | |
--green-light: #51d88a; | |
--green-lighter: #a2f5bf; | |
--green-lightest: #e3fcec; | |
--teal-darkest: #0d3331; | |
--teal-darker: #20504f; | |
--teal-dark: #38a89d; | |
--teal: #4dc0b5; | |
--teal-light: #64d5ca; | |
--teal-lighter: #a0f0ed; | |
--teal-lightest: #e8fffe; | |
--blue-darkest: #12283a; | |
--blue-darker: #1c3d5a; | |
--blue-dark: #2779bd; | |
--blue: #3490dc; | |
--blue-light: #6cb2eb; | |
--blue-lighter: #bcdefa; | |
--blue-lightest: #eff8ff; | |
--indigo-darkest: #191e38; | |
--indigo-darker: #2f365f; | |
--indigo-dark: #5661b3; | |
--indigo: #6574cd; | |
--indigo-light: #7886d7; | |
--indigo-lighter: #b2b7ff; | |
--indigo-lightest: #e6e8ff; | |
--purple-darkest: #21183c; | |
--purple-darker: #382b5f; | |
--purple-dark: #794acf; | |
--purple: #9561e2; | |
--purple-light: #a779e9; | |
--purple-lighter: #d6bbfc; | |
--purple-lightest: #f3ebff; | |
--pink-darkest: #451225; | |
--pink-darker: #6f213f; | |
--pink-dark: #eb5286; | |
--pink: #f66d9b; | |
--pink-light: #fa7ea8; | |
--pink-lighter: #ffbbca; | |
--pink-lightest: #ffebef; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment