Add TailwindCSS (#1252)

* Setup TailwindCSS * Fully setup configuration * Refactor some tailwind variables
2024-07-06 20:57:32 -07:00
parent 0f2ddb452c
commit abec2e48d4
176 changed files with 7905 additions and 7433 deletions
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.js
@@ -0,0 +1,139 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+    // monorepo
+    "../../packages/**/*.{js,vue,ts}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        icon: "var(--color-icon)",
+        // Text
+        primary: "var(--color-text)",
+        secondary: "var(--color-secondary)",
+        inactive: "var(--color-text-inactive)",
+        dark: "var(--color-text-dark)",
+        inverted: "var(--color-text-inverted)",
+        heading: "var(--color-heading)",
+        bg: {
+          DEFAULT: "var(--color-bg)",
+          red: "var(--color-red-bg)",
+          raised: "var(--color-bg-raised)",
+        },
+        divider: {
+          DEFAULT: "var(--color-divider)",
+          dark: "var(--color-divider-dark)",
+        },
+        brand: {
+          DEFAULT: "var(--color-brand)",
+          green: "var(--color-brand-green)",
+          highlight: "var(--color-brand-highlight)",
+          shadow: "var(--color-brand-shadow)",
+          inverted: "var(--color-brand-inverted)",
+        },
+        tabUnderlineHovered: "var(--tab-underline-hovered)",
+        button: {
+          bg: "var(--color-button-bg)",
+          text: "var(--color-button-text)",
+          bgHover: "var(--color-button-bg-hover)",
+          textHover: "var(--color-button-text-hover)",
+          bgActive: "var(--color-button-bg-active)",
+          textActive: "var(--color-button-text-active)",
+        },
+        toggleHandle: "var(--color-toggle-handle)",
+        dropdown: {
+          bg: "var(--color-dropdown-bg)",
+          text: "var(--color-dropdown-text)",
+        },
+        tooltip: {
+          bg: "var(--color-tooltip-bg)",
+          text: "var(--color-tooltip-text)",
+        },
+        code: {
+          bg: "var(--color-code-bg)",
+          text: "var(--color-code-text)",
+        },
+        kbdShadow: "var(--color-kbd-shadow)",
+        ad: {
+          DEFAULT: "var(--color-ad)",
+          raised: "var(--color-ad-raised)",
+          contrast: "var(--color-ad-contrast)",
+          highlight: "var(--color-ad-highlight)",
+        },
+        greyLink: {
+          DEFAULT: "var(--color-grey-link)",
+          hover: "var(--color-grey-link-hover)",
+          active: "var(--color-grey-link-active)",
+        },
+        link: {
+          DEFAULT: "var(--color-link)",
+          hover: "var(--color-link-hover)",
+          active: "var(--color-link-active)",
+        },
+        warning: {
+          bg: "var(--color-warning-bg)",
+          text: "var(--color-warning-text)",
+          banner: {
+            text: "var(--color-warning-banner-text)",
+            bg: "var(--color-warning-banner-bg)",
+            side: "var(--color-warning-banner-side)",
+          },
+        },
+        infoBanner: {
+          text: "var(--color-info-banner-text)",
+          bg: "var(--color-info-banner-bg)",
+          side: "var(--color-info-banner-side)",
+        },
+        blockQuote: "var(--color-block-quote)",
+        headerUnderline: "var(--color-header-underline)",
+        hr: "var(--color-hr)",
+        table: {
+          border: "var(--color-table-border)",
+          alternateRow: " var(--color-table-alternate-row)",
+        },
+      },
+      backgroundImage: {
+        mazeBg: "var(--landing-maze-bg)",
+        mazeGradientBg: "var(--landing-maze-gradient-bg)",
+        landing: {
+          mazeOuterBg: "var(--landing-maze-outer-bg)",
+          colorHeading: "var(--landing-color-heading)",
+          colorSubheading: "var(--landing-color-subheading)",
+          transitionGradientStart: "var(--landing-transition-gradient-start)",
+          transitionGradientEnd: "var(--landing-transition-gradient-end)",
+          hoverCardGradient: "var(--landing-hover-card-gradient)",
+          borderGradient: "var(--landing-border-gradient)",
+          borderColor: "var(--landing-border-color)",
+          creatorGradient: "var(--landing-creator-gradient)",
+          blobGradient: "var(--landing-blob-gradient)",
+          cardBg: "var(--landing-card-bg)",
+          blueLabel: "var(--landing-blue-label)",
+          blueLabelBg: "var(--landing-blue-label-bg)",
+          greenLabel: "var(--landing-green-label)",
+          greenLabelBg: "var(--landing-green-label-bg)",
+          rawBg: "var(--landing-raw-bg)",
+        },
+      },
+      boxShadow: {
+        insetLg: "var(--shadow-inset-lg)",
+        inset: "var(--shadow-inset)",
+        insetSm: "var(--shadow-inset-sm)",
+        raisedLg: "var(--shadow-raised-lg)",
+        raised: "var(--shadow-raised)",
+        floating: "var(--shadow-floating)",
+        card: "var(--shadow-card)",
+        landing: {
+          blobShadow: "var(--landing-blob-shadow)",
+          cardShadow: "var(--landing-card-shadow)",
+        },
+      },
+    },
+  },
+  plugins: [],
+};