@newlogic-digital/core 0.9.0 → 0.9.4

package/index.js

@@ -15,7 +15,7 @@ import {
     root
 } from "./modules/Core.js";
 
-import { tailwindColors, tailwindVariables } from './modules/tailwind/index.js'
+import { tailwindColors, tailwindColorsRgba, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent } from './modules/tailwind/index.js'
 
 const defineConfig = (config) => new Core().init(config);
 
@@ -23,6 +23,9 @@ export {
     defineConfig,
     tailwindColors,
     tailwindVariables,
+    tailwindColorsRgba,
+    tailwindColorsAccent,
+    tailwindColorsCurrent,
     Core,
     Utils,
     Styles,

package/modules/Serve.js

@@ -51,8 +51,15 @@ export const Serve = new class {
                 }
             }
 
+            const reloadTailwind = {
+                name: 'reload-tailwind',
+                transformIndexHtml(html) {
+                    return html.replace('tailwind.css', 'tailwind.css?v=' + new Date().getTime())
+                }
+            }
+
             let config = {
-                plugins: (Config.serve.mode === "dev" && Config.styles.ratio.enabled) ? [middleware, ratio, reload] : [middleware, reload],
+                plugins: (Config.serve.mode === "dev" && Config.styles.ratio.enabled) ? [middleware, ratio, reload, reloadTailwind] : [middleware, reload, reloadTailwind],
                 publicDir: `${Config.paths.output.root}`,
                 server: {
                     open: Config.serve.index,
@@ -60,9 +67,6 @@ export const Serve = new class {
                     fsServe: {
                         strict: false
                     },
-                    hmr: {
-                        host: 'localhost'
-                    },
                     watch: {
                         ignored: ['**/node_modules/**', '**/.git/**', '**/src/templates/**', '**/src/main.json', `**/${Config.paths.output.root}/*.html`]
                     }
@@ -76,6 +80,9 @@ export const Serve = new class {
                         https: {
                             key: fs.readFileSync(path.join(os.homedir(),'.ssh/localhost-key.pem')),
                             cert: fs.readFileSync(path.join(os.homedir(),'.ssh/localhost.pem')),
+                        },
+                        hmr: {
+                            host: 'localhost'
                         }
                     }
                 })

package/modules/tailwind/index.cjs

@@ -15,6 +15,47 @@ const tailwindColors = (colors = []) => {
   return colors
 };
 
+const tailwindColorsRgba = (colors = []) => {
+  colors.forEach(name => {
+    colors[name] = ({opacityVariable, opacityValue}) => {
+      if (opacityValue !== undefined) {
+        return `rgba(var(--color-${name}), ${opacityValue})`
+      }
+      if (opacityVariable !== undefined) {
+        return `rgba(var(--color-${name}), var(${opacityVariable}, 1))`
+      }
+      return `rgb(var(--color-${name}))`
+    };
+  });
+
+  return colors
+};
+
+const tailwindColorsAccent = (colors = []) => {
+  const result = {};
+
+  colors.forEach(color => {
+    result[`.accent-${color}`] = {
+      '--color-accent': `var(--color-${color})`,
+      'accent-color': 'rgb(var(--color-accent))'
+    };
+  });
+
+  return result
+};
+
+const tailwindColorsCurrent = (colors = []) => {
+  const result = {};
+
+  colors.forEach(color => {
+    result[`.text-${color}`] = {
+      '--color-current': `var(--color-${color})`
+    };
+  });
+
+  return result
+};
+
 const tailwindVariables = (type, variables = [], values = {}) => {
   variables.forEach(name => {
     values[name] = `var(--${type}-${name})`;
@@ -24,4 +65,7 @@ const tailwindVariables = (type, variables = [], values = {}) => {
 };
 
 exports.tailwindColors = tailwindColors;
+exports.tailwindColorsAccent = tailwindColorsAccent;
+exports.tailwindColorsCurrent = tailwindColorsCurrent;
+exports.tailwindColorsRgba = tailwindColorsRgba;
 exports.tailwindVariables = tailwindVariables;

package/modules/tailwind/index.js

@@ -11,6 +11,47 @@ const tailwindColors = (colors = []) => {
   return colors
 }
 
+const tailwindColorsRgba = (colors = []) => {
+  colors.forEach(name => {
+    colors[name] = ({opacityVariable, opacityValue}) => {
+      if (opacityValue !== undefined) {
+        return `rgba(var(--color-${name}), ${opacityValue})`
+      }
+      if (opacityVariable !== undefined) {
+        return `rgba(var(--color-${name}), var(${opacityVariable}, 1))`
+      }
+      return `rgb(var(--color-${name}))`
+    }
+  })
+
+  return colors
+}
+
+const tailwindColorsAccent = (colors = []) => {
+  const result = {}
+
+  colors.forEach(color => {
+    result[`.accent-${color}`] = {
+      '--color-accent': `var(--color-${color})`,
+      'accent-color': 'rgb(var(--color-accent))'
+    }
+  })
+
+  return result
+}
+
+const tailwindColorsCurrent = (colors = []) => {
+  const result = {};
+
+  colors.forEach(color => {
+    result[`.text-${color}`] = {
+      '--color-current': `var(--color-${color})`
+    };
+  });
+
+  return result
+};
+
 const tailwindVariables = (type, variables = [], values = {}) => {
   variables.forEach(name => {
     values[name] = `var(--${type}-${name})`
@@ -19,4 +60,4 @@ const tailwindVariables = (type, variables = [], values = {}) => {
   return values
 }
 
-export { tailwindColors, tailwindVariables }
+export { tailwindColors, tailwindVariables, tailwindColorsRgba, tailwindColorsAccent, tailwindColorsCurrent }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newlogic-digital/core",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.4",
   "main": "index.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Set of tools that can be used to create modern web applications",