styles: adjust tailwind css & supports theme (#839)

* feat: add tailwind utils css

* feat: add tailwind components css

* feat: add tailwind bass css & color var

* feat: add tailwind bass theme biz vars

* feat: import tailwind css to app

* feat: remove repeated  config for tailwind

* feat: adjust tailwind configs

* feat: adjust tailwind config for theme infrastructures

* feat: fix import typo error

* feat: fix prettier error

---------

Co-authored-by: Neil <[email protected]>

Author: murrayee

.eslintignore

@@ -14,4 +14,5 @@ coverage/*
 build/*
 dist/*
 electron/dist/*
-svelte/build/*
+svelte/build/*
+pnpm-lock.yaml

.gitignore

@@ -7,4 +7,5 @@ copy.json
 electron/dist
 electrin/config.json
 dist
-.env
+.env
+.idea

.prettierignore

@@ -8,8 +8,9 @@ svelte/.svelte-kit
 
 # Ignore files for PNPM, NPM and YARN
 package-lock.json
+pnpm-lock.yaml
 dist
 coverage/*
 **/*.plist
 svelte/build/*
-electron/dist/*
+electron/dist/*

svelte/postcss.config.cjs

@@ -1,50 +1,6 @@
-const teal = "#00ffd0";
-const black = "#1a1a1a";
-const white = "#fff";
-const gray = "#949494";
-const purple = "#8000FF";
-const green = "#00A517";
-const blue = "#013B99";
-
 module.exports = {
   plugins: {
-    tailwindcss: {
-      content: ["./src/**/*.{html,svelte,ts,js}", "../ui/src/**/*.{html,svelte,ts,js}"],
-      theme: {
-        colors: {
-          primary: teal,
-          secondary: purple,
-          accent: purple,
-          green,
-          teal,
-          blue,
-          purple: {
-            700: purple,
-            900: "#B076EC"
-          },
-          black,
-          white,
-          gray
-        },
-        extend: {
-          fontFamily: {
-            inter: ["inter", "sans-serif"],
-            mona: ["mona-sans", "sans-serif"]
-          },
-          typography: {
-            excerpt: {
-              css: {
-                p: {
-                  fontFamily: "font-inter",
-                  fontSize: "font-2xl"
-                }
-              }
-            }
-          }
-        }
-      },
-      plugins: [require("@tailwindcss/line-clamp")]
-    },
+    tailwindcss: {},
     autoprefixer: {}
   }
 };

svelte/src/app.css

@@ -1,8 +1,8 @@
 @import url(./icons/icons.css);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url(./styles/base.css);
+@import url(./styles/components.css);
+@import url(./styles/utilities.css);
 
 @font-face {
   font-family: "mona-sans";

svelte/src/styles/base.css

@@ -0,0 +1,37 @@
+@tailwind base;
+
+/* base colors */
+@layer base {
+  :root {
+    --oss-app-color-teal: #00ffd0;
+    --oss-app-color-black: #1a1a1a;
+    --oss-app-color-white: #fff;
+    --oss-app-color-gray: #949494;
+    --oss-app-color-purple: #8000ff;
+    --oss-app-color-purple-900: #b076ec;
+    --oss-app-color-green: #00a517;
+    --oss-app-color-blue: #013b99;
+  }
+}
+
+/* base theme.  CSS variables with business meaning*/
+@layer base {
+  :root {
+    --oss-app-color-primary: var(--oss-app-color-teal);
+    --oss-app-color-secondary: var(--oss-app-color-purple);
+    --oss-app-fill-primary: var(--oss-app-color-black);
+  }
+
+  /* if needed? */
+  [data-theme="dark"] {
+    --oss-app-color-primary: var(--oss-app-color-teal);
+    --oss-app-color-secondary: var(--oss-app-color-purple);
+    --oss-app-fill-primary: var(--oss-app-color-black);
+  }
+}
+
+/* base sizes */
+@layer base {
+  :root {
+  }
+}

svelte/src/styles/components.css

@@ -0,0 +1,5 @@
+@tailwind components;
+
+@layer components {
+  /* Define common component styles here */
+}

svelte/src/styles/utilities.css

@@ -0,0 +1,20 @@
+@tailwind utilities;
+
+/*  tailwind class congregation*/
+@layer utilities {
+  .flex-center-between {
+    @apply flex items-center justify-between;
+  }
+
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .flex-row-end {
+    @apply flex items-end justify-center;
+  }
+
+  .flex-around {
+    @apply flex items-center justify-around;
+  }
+}

svelte/tailwind.config.ts

@@ -1,30 +1,28 @@
-const teal = "#00ffd0";
-const black = "#1a1a1a";
-const white = "#fff";
-const gray = "#949494";
-const purple = "#8000FF";
-const green = "#00A517";
-const blue = "#013B99";
-
 module.exports = {
+  // darkMode: ['class', '[data-theme="dark"]'],
   content: ["./src/**/*.{html,svelte,ts,js}", "../ui/src/**/*.{html,svelte,ts,js}"],
   theme: {
     colors: {
-      primary: teal,
-      secondary: purple,
-      accent: purple,
-      green,
-      teal,
-      blue,
+      primary: "var(--oss-app-color-teal)",
+      secondary: "var(--oss-app-color-purple)",
+      accent: "var(--oss-app-color-purple)",
+      green: "var(--oss-app-color-green)",
+      teal: "var(--oss-app-color-teal)",
+      blue: "var(--oss-app-color-blue)",
       purple: {
-        700: purple,
-        900: "#B076EC"
+        700: "var(--oss-app-color-purple)",
+        900: "var(--oss-app-color-purple-900)"
       },
-      black,
-      white,
-      gray
+      black: "var(--oss-app-color-black)",
+      white: "var(--oss-app-color-white)",
+      gray: "var(--oss-app-color-gray)"
     },
     extend: {
+      colors: {},
+      borderRadius: {},
+      keyframes: {},
+      animation: {},
+      boxShadow: {},
       fontFamily: {
         inter: ["inter", "sans-serif"],
         mona: ["mona-sans", "sans-serif"]
@@ -40,5 +38,9 @@ module.exports = {
         }
       }
     }
-  }
+  },
+  plugins: [
+    // require('tailwindcss-animate'),
+    require("@tailwindcss/line-clamp")
+  ]
 };