Sass color variables

package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.56.0",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },

src/index.tsx

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
 import '../src/assets/index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+// import sass styles
+import './sass/styles.scss';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement

src/sass/_color-variables.scss

@@ -0,0 +1,80 @@
+//colors variables
+// true white
+$color-true-white: #f5fffd;
+//primary green
+$color-primary-green-100: #f5fffd;
+$color-primary-green-200: #ccfff3;
+$color-primary-green-300: #99ffe7;
+$color-primary-green-400: #66ffdb;
+$color-primary-green-500: #33ffcf;
+$color-primary-green-600: #00ffc3;
+$color-primary-green-700: #00cc9c;
+$color-primary-green-800: #009975;
+$color-primary-green-900: #00664e;
+$color-primary-green-1000: #003327;
+$color-primary-green-1100: #000f0c;
+
+//neutral
+$color-neutral-100: #f7f7f7;
+$color-neutral-200: #e5e6e6;
+$color-neutral-300: #cbcdcc;
+$color-neutral-400: #b2b3b3;
+$color-neutral-500: #009975;
+$color-neutral-600: #7e8180;
+$color-neutral-700: #656767;
+$color-neutral-800: #4c4d4d;
+$color-neutral-900: #00664e;
+$color-neutral-1000: #003327;
+$color-neutral-1100: #080808;
+
+// red
+$color-red-100: #fff0f0;
+$color-red-200: #ffcccc;
+$color-red-300: #ff9999;
+$color-red-400: #fe6767;
+$color-red-500: #fe3434;
+$color-red-600: #fe0101;
+$color-red-700: #cb0101;
+$color-red-800: #980101;
+$color-red-900: #660000;
+$color-red-1000: #330000;
+$color-red-1100: #0f0000;
+
+// blue
+$color-blue-100: #e8f3ff;
+$color-blue-200: #b5d8ff;
+$color-blue-300: #82beff;
+$color-blue-400: #4fa3ff;
+$color-blue-500: #197be5;
+$color-blue-600: #0061cc;
+$color-blue-700: #2f6299;
+$color-blue-800: #204166;
+$color-blue-900: #102133;
+$color-blue-1000: #08101a;
+$color-blue-1100: #04080d;
+
+// yellow
+$color-yellow-100: #fffcf2;
+$color-yellow-200: #fff4cc;
+$color-yellow-300: #ffe999;
+$color-yellow-400: #ffdd66;
+$color-yellow-500: #ffd233;
+$color-yellow-600: #ffc700;
+$color-yellow-700: #cc9f00;
+$color-yellow-800: #997700;
+$color-yellow-900: #665000;
+$color-yellow-1000: #332800;
+$color-yellow-1100: #1a1400;
+
+// usage example
+// use varible to color fonts, container backgrounds...
+// element to be styled
+/* 
+body {
+   //call the varible with the color you want
+   // backgroud color
+   background-color: $color-blue-100;
+   // as font color
+   color: $color-primary-green-600;
+ }
+ */

src/sass/_fonts.scss

@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+// desktop
+@mixin desktop-title {
+  size: xxxx-large;
+  font-size: 3.815 rem;
+  font-weight: bold;
+  line-height: 5.719 rem;
+}
+@mixin desktop-h1 {
+  size: xxx-large;
+  font-size: 3.052 rem;
+  font-weight: semi-bold;
+  line-height: 4.594 rem;
+}
+@mixin desktop-h2 {
+  size: xx-large;
+  font-size: 2.441 rem;
+  font-weight: medium;
+  line-height: 3.656 rem;
+}
+@mixin desktop-h3 {
+  size: x-large;
+  font-size: 1.953 rem;
+  font-weight: medium;
+  line-height: 2.906 rem;
+}
+@mixin desktop-h4 {
+  size: large;
+  font-size: 1.562 rem;
+  font-weight: regular;
+  line-height: 2.344 rem;
+}
+@mixin desktop-h4-bold {
+  size: large;
+  font-size: 1.562 rem;
+  font-weight: bold;
+  line-height: 2.344 rem;
+}
+@mixin desktop-paragraph-big {
+  size: medium;
+  font-size: 1.25 rem;
+  font-weight: regular;
+  line-height: 1.875 rem;
+}
+@mixin desktop-paragraph-big-bold {
+  size: medium;
+  font-size: 1.25 rem;
+  font-weight: bold;
+  line-height: 1.875 rem;
+}
+@mixin desktop-paragraph-standard {
+  size: base;
+  font-size: 1 rem;
+  font-weight: regular;
+  line-height: 1.5 rem;
+}
+@mixin desktop-paragraph-standard-bold {
+  size: base;
+  font-size: 1 rem;
+  font-weight: bold;
+  line-height: 1.5 rem;
+}
+@mixin desktop-captions {
+  size: caption;
+  font-size: 0.8 rem;
+  font-weight: bold;
+  line-height: 1.219 rem;
+}
+// mobile
+@mixin mobile-title {
+  size: xxx-large;
+  font-size: 3.052 rem;
+  font-weight: semi-bold;
+  line-height: 4.594 rem;
+}
+@mixin mobile-h1 {
+  size: xx-large;
+  font-size: 2.441 rem;
+  font-weight: medium;
+  line-height: 3.656 rem;
+}
+@mixin mobile-h2 {
+  size: x-large;
+  font-size: 1.953 rem;
+  font-weight: medium;
+  line-height: 2.906 rem;
+}
+@mixin mobile-h3-bold {
+  size: x-large;
+  font-size: 1.562 rem;
+  font-weight: regular;
+  line-height: 2.344 rem;
+}
+@mixin mobile-paragraph-big {
+  size: medium;
+  font-size: 1.25 rem;
+  font-weight: regular;
+  line-height: 1.875 rem;
+}
+@mixin mobile-paragraph-big-bold {
+  size: medium;
+  font-size: 1.25 rem;
+  font-weight: bold;
+  line-height: 1.875 rem;
+}
+@mixin mobile-paragraph-standard {
+  size: base;
+  font-size: 1 rem;
+  font-weight: regular;
+  line-height: 1.5 rem;
+}
+@mixin mobile-paragraph-standard-bold {
+  size: base;
+  font-size: 1 rem;
+  font-weight: bold;
+  line-height: 1.5 rem;
+}
+@mixin mobile-captions {
+  size: caption;
+  font-size: 0.8 rem;
+  font-weight: bold;
+  line-height: 1.219 rem;
+}
+
+// usage example
+// use refrence to design spec
+/*
+.section-className{
+  // your paragraph element
+  .paragraph-className{
+    //call mixin style you want to apply
+    @include desktop-paragraph-standard //applies styles defined in the mixin
+  }
+}
+*/

src/sass/_module-name.scss

@@ -0,0 +1,7 @@
+// example style file, (create your component's style file)
+// create a file and name it beginning with underscore
+// example:
+// _footer.scss
+// import your file on the main style file
+// @import './your-file-name';
+// write your sass style import any varible you need directly.

src/sass/_spacing.scss

@@ -0,0 +1,26 @@
+// spacing variables
+$spacing-01: 0.125rem;
+$spacing-02: 0.25rem;
+$spacing-03: 0.5rem;
+$spacing-04: 0.75rem;
+$spacing-05: 1rem;
+$spacing-06: 1.25rem;
+$spacing-07: 1.5rem;
+$spacing-08: 2rem;
+$spacing-09: 2.5rem;
+$spacing-10: 3rem;
+$spacing-11: 4rem;
+$spacing-12: 5rem;
+$spacing-13: 6rem;
+$spacing-14: 8rem;
+
+// usage example
+// use to space any element or apply marging and spacing in refrence to design spec
+/*
+button{
+    padding: $spacing-01 $spacing-02;
+}
+div{
+    margin-top: $spacing-04;
+}
+*/

src/sass/styles.scss

@@ -0,0 +1,22 @@
+// color variables
+@import './color-variables';
+// font variables
+@import './fonts';
+// spacing variables
+@import './spacing';
+
+// import your file module after this comment
+// @import './file-name';
+
+// global stylings
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+}

tailwind.config.js

@@ -2,7 +2,98 @@
 module.exports = {
   content: ['./src/**/*.{ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        sm: '480px',
+        md: '768px',
+        lg: '976px',
+        xl: '1440px',
+      },
+      colors: {
+        white: '#f5fffd',
+        green: {
+          100: '#f5fffd',
+          200: '#ccfff3',
+          300: '#99ffe7',
+          400: '#66ffdb',
+          500: '#33ffcf',
+          600: '#00ffc3',
+          700: '#00cc9c',
+          800: '#009975',
+          900: '#00664e',
+          1000: '#003327',
+          1100: '#000f0c',
+        },
+        neutral: {
+          100: '#f7f7f7',
+          200: '#e5e6e6',
+          300: '#cbcdcc',
+          400: '#b2b3b3',
+          500: '#009975',
+          600: '#7e8180',
+          700: '#656767',
+          800: '#4c4d4d',
+          900: '#00664e',
+          1000: '#003327',
+          1100: '#080808',
+        },
+        red: {
+          100: '#fff0f0',
+          200: '#ffcccc',
+          300: '#ff9999',
+          400: '#fe6767',
+          500: '#fe3434',
+          600: '#fe0101',
+          700: '#cb0101',
+          800: '#980101',
+          900: '#660000',
+          1000: '#330000',
+          1100: '#0f0000',
+        },
+        blue: {
+          100: '#e8f3ff',
+          200: '#b5d8ff',
+          300: '#82beff',
+          400: '#4fa3ff',
+          500: '#197be5',
+          600: '#0061cc',
+          700: '#2f6299',
+          800: '#204166',
+          900: '#102133',
+          1000: ' #08101a',
+          1100: ' #04080d',
+        },
+        yellow: {
+          100: '#fffcf2',
+          200: '#fff4cc',
+          300: '#ffe999',
+          400: '#ffdd66',
+          500: '#ffd233',
+          600: '#ffc700',
+          700: '#cc9f00',
+          800: '#997700',
+          900: '#665000',
+          1000: '#332800',
+          1100: '#1a1400',
+        },
+      },
+      spacing: {
+        1: '0.125rem',
+        2: '0.25rem',
+        3: '0.5rem',
+        4: '0.75rem',
+        5: '1rem',
+        6: '1.25rem',
+        7: '1.5rem',
+        8: '2rem',
+        9: '2.5rem',
+        10: '3rem',
+        11: '4rem',
+        12: '5rem',
+        13: '6rem',
+        14: '8rem',
+      },
+    },
   },
   plugins: [],
 };