@salla.sa/twilight 1.0.5 → 1.0.7

package/components/package.json

@@ -19,7 +19,8 @@
   "unpkg": "dist/atoms/atoms.js",
   "files": [
     "dist/",
-    "loader/"
+    "loader/",
+    "src/plugins"
   ],
   "repository": {
     "type": "git",

package/components/src/plugins/tailwind-theme/index.js

@@ -0,0 +1,32 @@
+const plugin = require('tailwindcss/plugin');
+const fs = require('fs');
+const path = require('path');
+
+module.exports = plugin.withOptions(() => {
+
+  
+  return function({addUtilities}) {
+    addUtilities({
+      // TODO :: find if there are used and defined them here if its.
+      '.anime-item': {},
+      '.text-md': {},
+      '.items-top': {},
+      '.error': {},
+      '.search-box': {},
+      '.spinner-loader-wrap': {}
+    });
+
+    // todo :: move it to global
+    addUtilities({
+      '.spinner-loader': {
+        'border-right-color': 'var(--main-color) !important',
+        '&.reverse': {
+          'border-right-color': '#9f7171 !important',
+          'background-color': '#f98181'
+        }
+      }
+    });
+
+    addUtilities(JSON.parse(fs.readFileSync(path.resolve(__dirname, 'utilities.json'), 'UTF-8')));
+  };
+});

package/components/src/plugins/tailwind-theme/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@salla.sa/twilight-tailwind-theme",
+  "version": "1.0.0",
+  "license": "MIT",
+  "keywords": [
+    "Salla twilight",
+    "tailwind",
+    "tailwind-theme",
+    "Salla",
+    "web component"
+  ],
+  "description": "Tailwind theme for twilight (Salla Themes)",
+  "homepage": "https://salla.dev",
+  "scripts": {
+    "generate": "node scripts/generator.js",
+    "publish": "npm version patch && generate && npm publish --access private"
+  },
+  "files": [
+    "index.js",
+    "package.json",
+    "safe-list-css.txt",
+    "utilities.json"
+  ],
+  "devDependencies": {
+    "lodash": "^4.17.21",
+    "tailwindcss": "^2.2.19"
+  }
+}

package/components/src/plugins/tailwind-theme/readme.md

@@ -0,0 +1,47 @@
+## Usage 
+
+1. add the plugin to tailwaind plugins in `tailwind.config.js` file
+```js
+    plugins: [
+      ...
+      require('@salla.sa/twilight-tailwind-theme'),
+      ....
+    ]
+```
+2. (Optional) in case you are enabling the `purge` you should add the safe list css class to purge settings  in `tailwind.config.js` file
+
+### JIT Enabled 
+
+because of https://tailwindcss.com/docs/just-in-time-mode#limitations
+
+```js
+    purge   : {
+      enabled: true,
+      content: ["views/**/*.twig", "node_modules/@salla.sa/twilight-tailwind-theme/safe-list-css.txt"]
+    }
+```
+
+### JIT Disabled
+
+You can easly add `/^s-.*/` to safelist
+```js
+    purge   : {
+        enabled: true,
+        content: ["views/**/*.twig"],
+        options: {
+            safelist: [/^s-.*/]
+        }
+    },
+```
+
+ ## Add A new compnoent 
+ 
+ 1. create a new folder with the name of compnenet
+ 2. create a `utilities.json` file with list of class as json
+
+
+## Publish 
+
+```
+npm run publish
+```

package/components/src/plugins/tailwind-theme/safe-list-css.txt

@@ -0,0 +1,19 @@
+s-search-modal-search-button-icon
+s-search-modal-container
+s-search-modal-wrapper
+s-search-modal-inner
+s-search-modal-search-box-container
+s-search-modal-search-box-inner
+s-search-modal-search-box-inner-open
+s-search-modal-input
+s-search-modal-search-icon
+s-search-modal-spinner
+s-search-modal-spinner-loader
+s-search-modal-search-results
+s-search-modal-no-results
+s-search-modal-product
+s-search-modal-product-image-container
+s-search-modal-product-image
+s-search-modal-product-details
+s-search-modal-product-title
+s-search-modal-product-price

package/components/src/plugins/tailwind-theme/utilities.json

@@ -0,0 +1 @@
+{".s-search-modal-search-button-icon":{"@apply bg-gray-bg2 hover:bg-gray-150 dark:hover:bg-opacity-10 transition duration-300 mx-3 text-sm rounded-full w-9 h-9":{}},".s-search-modal-container":{"@apply fixed inset-0 z-50 flex items-top justify-center overflow-auto items-top":{}},".s-search-modal-wrapper":{"@apply bg-transparent w-full":{}},".s-search-modal-inner":{"@apply mx-auto w-11/12 lg:w-6/12":{}},".s-search-modal-search-box-container":{"@apply mt-36 search-box anime-item":{}},".s-search-modal-search-box-inner":{"@apply relative bg-white rounded-tiny border border-border-color":{}},".s-search-modal-search-box-inner-open":{"@apply relative bg-white rounded-tiny border border-border-color rounded-b-none":{}},".s-search-modal-input":{"@apply anime-item bg-transparent border-0 form-input w-full ps-10 pt-6 pb-7 rounded-tiny text-gray-600":{}},".s-search-modal-search-icon":{"@apply anime-item flex justify-end items-center absolute top-4 start-4 text-md text-gray-text":{}},".s-search-modal-spinner":{"@apply spinner-loader-wrap absolute top-1/2 transform -translate-y-1/2 start-4 w-4 h-4":{}},".s-search-modal-spinner-loader":{"@apply  block spinner-loader w-4 h-4 animate-spin border-2 border-gray-300 rounded-full":{}},".s-search-modal-search-results":{"@apply m-auto max-h-96  overflow-y-auto bg-white rounded-b-tiny":{}},".s-search-modal-no-results":{"@apply error p-4 text-sm text-gray-text":{}},".s-search-modal-product":{"@apply h-full transition duration-500 bg-transparent justify-around overflow-hidden flex transition-colors duration-300 hover:bg-gray-bg2 px-4 xs:px-5 py-5 border-t-0":{}},".s-search-modal-product-image-container":{"@apply relative overflow-hidden w-20 h-20 sm:w-28 sm:h-28 rounded-md":{}},".s-search-modal-product-image":{"@apply h-full w-full object-cover":{}},".s-search-modal-product-details":{"@apply flex-1 ps-4 xs:ps-5 pt-1":{}},".s-search-modal-product-title":{"@apply flex flex-col justify-start items-baseline text-sm font-bold text-title-color leading-6 mb-2.5":{}},".s-search-modal-product-price":{"@apply w-full flex justify-between items-center mb-5 text-primary font-bold text-sm":{}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Salla Theme Toolkit, Webcomponents, Events, Requests, Utils",
   "main": "dist/twilight.js",
   "scripts": {