feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com> Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Co-authored-by: nivedin <nivedinp@gmail.com>
2023-11-01 21:25:08 +06:00
parent 59b5a50a97
commit a215860782
174 changed files with 6921 additions and 5185 deletions
--- a/packages/hoppscotch-ui/ui-preset.ts
+++ b/packages/hoppscotch-ui/ui-preset.ts
@@ -0,0 +1,124 @@
+import { Config } from "tailwindcss";
+import { theme } from 'tailwindcss/defaultConfig'
+
+export default {
+  content: [],
+  theme: {
+    container: {
+      center: true,
+    },
+    extend: {
+      inset: {
+        upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)",
+        upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)",
+        upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)",
+        upperFourthStickyFold: "var(--upper-fourth-sticky-fold)",
+        upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)",
+        upperMobileSecondaryStickyFold: "var(--upper-mobile-secondary-sticky-fold)",
+        upperMobileStickyFold: "var(--upper-mobile-sticky-fold)",
+        upperMobileTertiaryStickyFold: "var(--upper-mobile-tertiary-sticky-fold)",
+        lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
+        lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
+        lowerTertiaryStickyFold: "var(--lower-tertiary-sticky-fold)",
+        lowerFourthStickyFold: "var(--lower-fourth-sticky-fold)",
+        sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
+        sidebarSecondaryStickyFold: "var(--line-height-body)",
+      },
+      colors: {
+        primary: "var(--primary-color)",
+        primaryLight: "var(--primary-light-color)",
+        primaryDark: "var(--primary-dark-color)",
+        primaryContrast: "var(--primary-contrast-color)",
+        secondary: "var(--secondary-color)",
+        secondaryLight: "var(--secondary-light-color)",
+        secondaryDark: "var(--secondary-dark-color)",
+        accent: "var(--accent-color)",
+        accentLight: "var(--accent-light-color)",
+        accentDark: "var(--accent-dark-color)",
+        accentContrast: "var(--accent-contrast-color)",
+        divider: "var(--divider-color)",
+        dividerLight: "var(--divider-light-color)",
+        dividerDark: "var(--divider-dark-color)",
+        error: "var(--error-color)",
+        tooltip: "var(--tooltip-color)",
+        popover: "var(--popover-color)",
+        gradientFrom: "var(--gradient-from-color)",
+        gradientVia: "var(--gradient-via-color)",
+        gradientTo: "var(--gradient-to-color)",
+        dark: {
+          50: "#4a4a4a",
+          100: "#3c3c3c",
+          200: "#323232",
+          300: "#2d2d2d",
+          400: "#222222",
+          500: "#1f1f1f",
+          600: "#1c1c1e",
+          700: "#1b1b1b",
+          800: "#181818",
+          900: "#0f0f0f",
+        },
+        light: {
+          50: "#fdfdfd",
+        },
+      },
+      fontFamily: {
+        sans: "var(--font-sans)",
+        mono: "var(--font-mono)",
+        icon: "var(--font-icon)",
+      },
+      fontSize: {
+        tiny: "var(--font-size-tiny)",
+        body: "var(--font-size-body)",
+      },
+      lineHeight: {
+        body: "var(--line-height-body)",
+      },
+      cursor: {
+        nsResize: "ns-resize",
+        grab: "grab",
+        grabbing: "grabbing",
+      },
+      spacing: {
+        0.25: "0.0625rem",
+        0.75: "0.1875rem",
+        20: "5rem",
+        26: "6.5rem",
+        46: "11.5rem",
+      },
+      minWidth: {
+        4: "1rem",
+        5: "1.25rem",
+        20: "5rem",
+        46: "11.5rem",
+      },
+      minHeight: {
+        5: "1.25rem",
+        46: "11.5rem",
+      },
+      maxWidth: {
+        '1/2': '50%',
+        '1/3': '33%',
+        '3/4': '75%',
+        46: "11.5rem",
+      },
+      maxHeight: {
+        46: "11.5rem",
+        sm: "24rem",
+        md: "28rem",
+        lg: "32rem",
+      },
+      backgroundOpacity: {
+        15: "0.15",
+      },
+    },
+    screens: {
+      sm: "639px",
+      "<2xl": { max: "1536px" },
+      "<xl": { max: "1280px" },
+      "<lg": { max: "1024px" },
+      "<md": { max: "768px" },
+      "<sm": { max: "640px" },
+      ...theme?.screens,
+    },
+  },
+} satisfies Config