Customized and extended tailwind styles (#439)

* Customized and extended tailwind styles * Ran prettier
hackforla · Aug 30, 2023 · 8de2f28 · 8de2f28
1 parent 08ee60d
commit 8de2f28
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 14 deletions.
diff --git a/frontend/src/components/Buttons/_Button.scss b/frontend/src/components/Buttons/_Button.scss
@@ -70,7 +70,7 @@ $size-values: (
 }
 
 /**************************************
-*** Button classes concerning lenth ***
+*** Button classes concerning length ***
 **************************************/
 
 @mixin button-length($size) {

diff --git a/frontend/src/pages/Demo/DemoTailwind.tsx b/frontend/src/pages/Demo/DemoTailwind.tsx
@@ -15,19 +15,24 @@ const DemoTailwind = () => {
         Buttons
       </a>
       <br />
-      <div className="my-3 flex flex-col sm:flex-row">
-        <button className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded mr-3">
-          Button
+      <div className="m-3 flex flex-wrap">
+        <button className="h-8 px-3 rounded text-base  font-bold leading-extra-tight bg-blue-dark hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused text-white ">
+          Small
         </button>
-        <button className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
-          <svg
-            className="fill-current w-4 h-4 mr-2"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-          >
-            <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
-          </svg>
-          <span>Download</span>
+        <button className="h-10 px-5 rounded text-base font-bold bg-blue-dark hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused text-white ">
+          Medium-Long
+        </button>
+        <button className="h-10 px-3 rounded text-base font-bold bg-blue-dark hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused text-white ">
+          Medium-Narrow
+        </button>
+        <button className="h-10 px-4 rounded text-base font-bold bg-blue-dark hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused text-white ">
+          Medium
+        </button>
+        <button className="h-14 px-6 rounded-large text-xl font-bold bg-blue-dark hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused text-white ">
+          Large
+        </button>
+        <button className="h-16 px-6 rounded-x-large text-2xl font-bold bg-blue-dark hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused text-white ">
+          X-Large-Long
         </button>
       </div>
 

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -2,7 +2,57 @@
 module.exports = {
   content: ["./src/pages/Demo/DemoTailwind.tsx"], // Will change to "./src/**/*.{js,jsx,tsx}", "./templates/index.html"
   theme: {
-    extend: {},
+    screens: {
+      sm: "577px",
+      // => @media (min-width: 577px) { ... }
+      md: "769px",
+      // => @media (min-width: 769px) { ... }
+      lg: "1025px",
+      // => @media (min-width: 1025px) { ... }
+      xl: "1201px",
+      // => @media (min-width: 1201px) { ... }
+    },
+    colors: {
+      // Primary Colors
+      "blue-dark": "#3450a1",
+      "blue-darker": "#323d69",
+      "blue-dark-hover": "#445ea9",
+      "blue-dark-focused": "#273c79",
+      // Primary on Dark Colors
+      blue: "#44aff1",
+      "blue-focused": "#3fa1de",
+      // Secondary Colors
+      tan: "#ffe0b9",
+      "tan-light": "#ffefdb",
+      green: "#13831e",
+      // Neutral Colors
+      white: "#fff",
+      "grey-light": "#f2f2f2",
+      grey: "#c1c1c1",
+      "grey-dark": "#585858",
+      charcoal: "#333",
+    },
+    fontFamily: {
+      sans: ["Roboto", "Tahoma", "Verdana", "sans-serif"],
+    },
+    fontWeight: {
+      thin: "100",
+      light: "300",
+      normal: "400",
+      medium: "500",
+      bold: "700",
+      black: "900",
+    },
+    extend: {
+      lineHeight: {
+        "extra-tight": "1.125rem",
+      },
+      borderRadius: {
+        DEFAULT: "20px",
+        large: "60px",
+        "x-large": "100px",
+      },
+    },
   },
   plugins: [],
   // // Temporarily disables preflight for all components