From 01510c77d36cab770c002acca0c0cdff21f54547 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Mon, 16 Oct 2023 14:21:51 +0300
Subject: [PATCH] feat: extends tailwind config styles (#51932)

---
 tools/ui-components/tailwind.config.js | 164 ++++++++++++-------------
 1 file changed, 82 insertions(+), 82 deletions(-)

diff --git a/tools/ui-components/tailwind.config.js b/tools/ui-components/tailwind.config.js
index 0e86e8c53a0..eca68d5bc58 100644
--- a/tools/ui-components/tailwind.config.js
+++ b/tools/ui-components/tailwind.config.js
@@ -14,89 +14,89 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
-    colors: {
-      transparent: 'transparent',
-      'dark-theme-background': 'var(--gray90)',
-      'light-theme-background': 'var(--gray00)',
-      // Foreground
-      'foreground-primary': 'var(--foreground-primary)',
-      'foreground-secondary': 'var(--foreground-secondary)',
-      'foreground-tertiary': 'var(--foreground-tertiary)',
-      'foreground-quaternary': 'var(--foreground-quaternary)',
-      'foreground-danger': 'var(--foreground-danger)',
-      'foreground-info': 'var(--foreground-info)',
-      // Background
-      'background-primary': 'var(--background-primary)',
-      'background-secondary': 'var(--background-secondary)',
-      'background-tertiary': 'var(--background-tertiary)',
-      'background-quaternary': 'var(--background-quaternary)',
-      'background-danger': 'var(--background-danger)',
-      'background-info': 'var(--background-info)',
-      // Focus outline
-      'focus-outline-color': 'var(--focus-outline-color)',
-      gray: {
-        0: 'var(--gray00)',
-        50: 'var(--gray05)',
-        100: 'var(--gray10)',
-        150: 'var(--gray15)',
-        450: 'var(--gray45)',
-        750: 'var(--gray75)',
-        800: 'var(--gray80)',
-        850: 'var(--gray85)',
-        900: 'var(--gray90)'
-      },
-      green: {
-        50: 'var(--green05)',
-        100: 'var(--green10)',
-        400: 'var(--green40)',
-        700: 'var(--green70)',
-        900: 'var(--green90)'
-      },
-      blue: {
-        50: 'var(--blue05)',
-        100: 'var(--blue10)',
-        300: 'var(--blue30)',
-        500: 'var(--blue50)',
-        700: 'var(--blue70)',
-        900: 'var(--blue90)'
-      },
-      yellow: {
-        50: 'var(--yellow05)',
-        100: 'var(--yellow10)',
-        400: 'var(--yellow40)',
-        450: 'var(--yellow45)',
-        500: 'var(--yellow50)',
-        700: 'var(--yellow70)',
-        900: 'var(--yellow90)'
-      },
-      red: {
-        50: 'var(--red05)',
-        100: 'var(--red10)',
-        150: 'var(--red15)',
-        300: 'var(--red30)',
-        700: 'var(--red70)',
-        800: 'var(--red80)',
-        900: 'var(--red90)'
-      }
-    },
-    borderWidth: {
-      1: '1px',
-      3: '3px'
-    },
-    outlineWidth: {
-      3: '3px'
-    },
-    fontSize: {
-      // https://tailwindcss.com/docs/font-size#providing-a-default-line-height
-      // [fontSize, lineHeight]
-      sm: ['16px', '1.5'],
-      md: ['18px', '1.42857143'],
-      lg: ['24px', '1.3333333']
-    },
-    minHeight: {
-      '43-px': '43px'
-    },
     extend: {
+      colors: {
+        transparent: 'transparent',
+        'dark-theme-background': 'var(--gray90)',
+        'light-theme-background': 'var(--gray00)',
+        // Foreground
+        'foreground-primary': 'var(--foreground-primary)',
+        'foreground-secondary': 'var(--foreground-secondary)',
+        'foreground-tertiary': 'var(--foreground-tertiary)',
+        'foreground-quaternary': 'var(--foreground-quaternary)',
+        'foreground-danger': 'var(--foreground-danger)',
+        'foreground-info': 'var(--foreground-info)',
+        // Background
+        'background-primary': 'var(--background-primary)',
+        'background-secondary': 'var(--background-secondary)',
+        'background-tertiary': 'var(--background-tertiary)',
+        'background-quaternary': 'var(--background-quaternary)',
+        'background-danger': 'var(--background-danger)',
+        'background-info': 'var(--background-info)',
+        // Focus outline
+        'focus-outline-color': 'var(--focus-outline-color)',
+        gray: {
+          0: 'var(--gray00)',
+          50: 'var(--gray05)',
+          100: 'var(--gray10)',
+          150: 'var(--gray15)',
+          450: 'var(--gray45)',
+          750: 'var(--gray75)',
+          800: 'var(--gray80)',
+          850: 'var(--gray85)',
+          900: 'var(--gray90)'
+        },
+        green: {
+          50: 'var(--green05)',
+          100: 'var(--green10)',
+          400: 'var(--green40)',
+          700: 'var(--green70)',
+          900: 'var(--green90)'
+        },
+        blue: {
+          50: 'var(--blue05)',
+          100: 'var(--blue10)',
+          300: 'var(--blue30)',
+          500: 'var(--blue50)',
+          700: 'var(--blue70)',
+          900: 'var(--blue90)'
+        },
+        yellow: {
+          50: 'var(--yellow05)',
+          100: 'var(--yellow10)',
+          400: 'var(--yellow40)',
+          450: 'var(--yellow45)',
+          500: 'var(--yellow50)',
+          700: 'var(--yellow70)',
+          900: 'var(--yellow90)'
+        },
+        red: {
+          50: 'var(--red05)',
+          100: 'var(--red10)',
+          150: 'var(--red15)',
+          300: 'var(--red30)',
+          700: 'var(--red70)',
+          800: 'var(--red80)',
+          900: 'var(--red90)'
+        }
+      },
+      borderWidth: {
+        1: '1px',
+        3: '3px'
+      },
+      outlineWidth: {
+        3: '3px'
+      },
+      fontSize: {
+        // https://tailwindcss.com/docs/font-size#providing-a-default-line-height
+        // [fontSize, lineHeight]
+        sm: ['16px', '1.5'],
+        md: ['18px', '1.42857143'],
+        lg: ['24px', '1.3333333']
+      },
+      minHeight: {
+        '43-px': '43px'
+      },
       zIndex: {
         2: '2'
       }