@licklist/design 0.68.6-dev.0 → 0.68.6-dev.1

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/dist/auth/Layout/UserNavDropDownToggle.js

@@ -21,7 +21,7 @@ function UserNavDropDownToggle(props) {
                 })
             }),
             /*#__PURE__*/ jsx(Icon, {
-                className: "header-user-image img-profile rounded-circle",
+                className: "header-user-image img-profile rounded-circle tw-ring-white",
                 alt: user === null || user === void 0 ? void 0 : user.last_name,
                 roundedCircle: true
             })

package/dist/root.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 95%;
+        --foreground: 0 0% 3.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+
+        --primary: 204 88% 47%;
+        --primary-foreground: 0 0% 98%;
+
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.68.6-dev.0",
+  "version": "0.68.6-dev.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -64,6 +64,8 @@
     "@licklist/core": "0.30.0-dev.0",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.33.0-dev.0",
+    "@mantine/core": "6.0.22",
+    "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -160,15 +162,21 @@
     "@typescript-eslint/eslint-plugin": "5.8.1",
     "@typescript-eslint/parser": "5.8.1",
     "@vitejs/plugin-react": "4.3.1",
+    "autoprefixer": "10.4.20",
     "babel-loader": "8.2.2",
     "css-loader": "5.1.1",
+    "cssnano": "7.0.6",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-react-hooks": "4.2.0",
     "husky": "7.0.4",
     "lint-staged": "12.3.2",
+    "postcss": "8.4.47",
+    "postcss-preset-mantine": "1.17.0",
+    "postcss-simple-vars": "7.0.1",
     "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "0.6.8",
     "rollup": "3.29.4",
     "rollup-plugin-auto-external": "2.0.0",
     "rollup-plugin-copy": "3.5.0",
@@ -179,6 +187,7 @@
     "sass": "1.77.8",
     "sass-loader": "10.1.1",
     "style-loader": "2.0.0",
+    "tailwindcss": "3.4.13",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
     "vite": "5.3.5",

package/postcss.config.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
+  },
+};

package/rollup.config.js

@@ -33,6 +33,7 @@ export default [
         targets: [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
+          { src: './src/root.css', dest: './dist' },
         ],
       }),
 

package/src/auth/Layout/UserNavDropDownToggle.tsx

@@ -19,7 +19,7 @@ function UserNavDropDownToggle(props: UserNavDropDownToggleProps) {
       </span>
 
       <DefaultUserImage
-        className='header-user-image img-profile rounded-circle'
+        className='header-user-image img-profile rounded-circle tw-ring-white'
         alt={user?.last_name}
         roundedCircle
       />

package/src/root.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 95%;
+        --foreground: 0 0% 3.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+
+        --primary: 204 88% 47%;
+        --primary-foreground: 0 0% 98%;
+
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}

package/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  prefix: "tw-",
+  // @TODO: remove this after removing bootstrap from a project
+  corePlugins: {
+    preflight: false,
+  },
+  content: [
+    "./src/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+