Tailwind inspired CSS variable configuration

constant.css

/*
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;
}