anubis-ui 1.3.0 → 1.4.0

package/dist/tools/mapping/mapColors.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapColorsIntoTokens = exports.mapColorsIntoMixinDeclaration = void 0;
+const css_output_1 = require("../output/css.output");
+const config_tool_1 = require("../config.tool");
+const mapColorsIntoMixinDeclaration = (colors) => {
+    var _a, _b;
+    const mappedColors = (_b = (_a = Object.entries(colors)) === null || _a === void 0 ? void 0 : _a.map(([colorName, { light, dark }]) => (0, css_output_1.defineColor)(colorName, light, dark))) === null || _b === void 0 ? void 0 : _b.join('\n');
+    return mappedColors;
+};
+exports.mapColorsIntoMixinDeclaration = mapColorsIntoMixinDeclaration;
+const mapColorsIntoTokens = () => {
+    var _a, _b;
+    const colors = config_tool_1.config.colors;
+    const tokenizedColors = (_b = (_a = Object.entries(colors)) === null || _a === void 0 ? void 0 : _a.map(([colorName, { light, dark }]) => (0, css_output_1.defineToken)(colorName, light, dark))) === null || _b === void 0 ? void 0 : _b.join('\n\n');
+    return tokenizedColors;
+};
+exports.mapColorsIntoTokens = mapColorsIntoTokens;

package/dist/tools/mapping/mapUtilities.d.ts

@@ -0,0 +1 @@
+export declare const mapUtilitiesIntoOverride: () => string;

package/dist/tools/mapping/mapUtilities.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapUtilitiesIntoOverride = void 0;
+const config_tool_1 = require("../config.tool");
+const mapUtilitiesIntoOverride = () => {
+    var _a, _b;
+    const utilities = (_a = [...config_tool_1.config.utilities]) === null || _a === void 0 ? void 0 : _a.filter(u => { var _a; return ((_a = u.overrides) === null || _a === void 0 ? void 0 : _a.length) >= 1; });
+    const overrides = (_b = utilities === null || utilities === void 0 ? void 0 : utilities.map(u => {
+        var _a, _b, _c;
+        const { variations, overrides } = u;
+        const defaultVariation = (_b = (_a = Object.entries(variations)) === null || _a === void 0 ? void 0 : _a.find(([key]) => key === 'default')) === null || _b === void 0 ? void 0 : _b[1];
+        const mappedOverrides = (_c = overrides === null || overrides === void 0 ? void 0 : overrides.map(o => `$${o}: ${defaultVariation};`)) === null || _c === void 0 ? void 0 : _c.join('\n');
+        return mappedOverrides;
+    })) === null || _b === void 0 ? void 0 : _b.join('\n');
+    return overrides;
+};
+exports.mapUtilitiesIntoOverride = mapUtilitiesIntoOverride;

package/dist/tools/output/css.output.d.ts

@@ -0,0 +1,11 @@
+export declare const mixins = "@use \"sass:color\";\n\n$background-opacity: (\n  10: 0.1,\n  20: 0.2,\n  30: 0.3,\n  40: 0.4,\n  50: 0.5,\n  60: 0.6,\n  70: 0.7,\n  80: 0.8,\n  90: 0.9\n);\n\n// Mixin that will automatically generate colors for light and/or dark themes (with opacity variations)\n@mixin setRootColors ($name, $lightColor: null, $darkColor: null) {\n  :root {\n    @if $lightColor != null {\n      body.body--light {\n        #{\"--\"+$name}: $lightColor;\n\n        // Only generate opacity variations for non transparent colors\n        @if $lightColor != transparent {\n          @each $opacity, $multiplier in $background-opacity {\n            #{\"--\"+$name+\"-\"+$opacity}: #{color.change($lightColor, $alpha: $multiplier)};\n          }\n        }\n      }\n    }\n\n    @if $darkColor != null {\n      body.body--dark {\n        #{\"--\"+$name}: $darkColor;\n\n        // Only generate opacity variations for non transparent colors\n        @if $darkColor != transparent {\n          @each $opacity, $multiplier in $background-opacity {\n            #{\"--\"+$name+\"-\"+$opacity}: #{color.change($darkColor, $alpha: $multiplier)};\n          }\n        }\n      }\n    }\n  }\n}\n";
+export declare const getHeader: () => string;
+export declare const comments: {
+    colors: string;
+    variations: string;
+    rules: string;
+};
+/** Map a colorName and hex into mixins function call */
+export declare const defineColor: (colorName: string, light?: string, dark?: string) => string;
+/** Map a color name and hex into token declaration for global usage */
+export declare const defineToken: (colorName: string, light?: string, dark?: string) => string;

package/dist/tools/output/css.output.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineToken = exports.defineColor = exports.comments = exports.getHeader = exports.mixins = void 0;
+const version_1 = require("../../version");
+const file_tools_1 = require("../fileStuff/file.tools");
+const header = `/**
+ * Anubis v.${version_1.version}
+ * Improba
+ * Released under the MIT License.
+ */
+@use "${file_tools_1.mixinsFile}";
+@use "${file_tools_1.tokensFile}";
+`;
+exports.mixins = `@use "sass:color";
+
+$background-opacity: (
+  10: 0.1,
+  20: 0.2,
+  30: 0.3,
+  40: 0.4,
+  50: 0.5,
+  60: 0.6,
+  70: 0.7,
+  80: 0.8,
+  90: 0.9
+);
+
+// Mixin that will automatically generate colors for light and/or dark themes (with opacity variations)
+@mixin setRootColors ($name, $lightColor: null, $darkColor: null) {
+  :root {
+    @if $lightColor != null {
+      body.body--light {
+        #{"--"+$name}: $lightColor;
+
+        // Only generate opacity variations for non transparent colors
+        @if $lightColor != transparent {
+          @each $opacity, $multiplier in $background-opacity {
+            #{"--"+$name+"-"+$opacity}: #{color.change($lightColor, $alpha: $multiplier)};
+          }
+        }
+      }
+    }
+
+    @if $darkColor != null {
+      body.body--dark {
+        #{"--"+$name}: $darkColor;
+
+        // Only generate opacity variations for non transparent colors
+        @if $darkColor != transparent {
+          @each $opacity, $multiplier in $background-opacity {
+            #{"--"+$name+"-"+$opacity}: #{color.change($darkColor, $alpha: $multiplier)};
+          }
+        }
+      }
+    }
+  }
+}
+`;
+const getHeader = () => {
+    return `${header}`;
+};
+exports.getHeader = getHeader;
+exports.comments = {
+    colors: `/**
+   * These colors will be mapped to css variables in
+   * the :root element on the html page.
+   *
+   * It allows you to write custom css/scss classes in your web
+   * components.
+   */`,
+    variations: `/**
+   * These css variables are generated automatically when Anubis
+   * detects that they are used in utilities in your config.
+   *
+   * It allows you to write custom css/scss classes in your web
+   * components like:
+   *
+   * .paragraph-small {
+   *    font-size: var(--size-xs);
+   *    font-weight: var(--weight-light);
+   * }
+   *
+   * (You can also force the generation of all variants from a
+   * utility by setting the 'export' to 'variations')
+   */`,
+    rules: `/**
+   * These are the css classes generated by Anubis based on your config
+   * and what was detected in your source files.
+   */`,
+};
+/** Map a colorName and hex into mixins function call */
+const defineColor = (colorName, light, dark) => {
+    var _a, _b;
+    const useToken = true;
+    const lightColor = useToken ? `$${colorName}` : light;
+    const darkColor = useToken ? `$${colorName}-dark` : dark;
+    // _ only dark
+    if (!light && dark) {
+        return `@include setRootColors('${colorName}', null, ${darkColor});`;
+    }
+    // _ light and/or dark
+    return `@include setRootColors('${colorName}', ${(_b = (_a = [lightColor, darkColor]) === null || _a === void 0 ? void 0 : _a.filter(Boolean)) === null || _b === void 0 ? void 0 : _b.join(', ')});`;
+};
+exports.defineColor = defineColor;
+/** Map a color name and hex into token declaration for global usage */
+const defineToken = (colorName, light, dark) => {
+    let tokens = [];
+    if (light) {
+        tokens.push(`$${colorName}: ${light};`);
+        tokens.push(`$${colorName}-light: ${light};`);
+    }
+    if (dark) {
+        tokens.push(`$${colorName}-dark: ${dark};`);
+    }
+    const stringifiedTokens = tokens === null || tokens === void 0 ? void 0 : tokens.join('\n');
+    return stringifiedTokens;
+};
+exports.defineToken = defineToken;

package/dist/tools/validation/color.validation.d.ts

@@ -0,0 +1,12 @@
+import { IColor } from '../../interfaces/color.interface';
+/**
+ * Validates a single color value (hex color or 'transparent')
+ */
+declare const isValidColorValue: (value: string) => boolean;
+/**
+ * Validates the colors configuration
+ * Ensures each color has at least one valid theme (light or dark)
+ * @throws Error if validation fails
+ */
+declare const validateColors: (colors: IColor) => void;
+export { validateColors, isValidColorValue };

package/{src/tools/validation/color.validation.ts → dist/tools/validation/color.validation.js}

@@ -1,51 +1,41 @@
-import { IColor } from '@interfaces/color.interface';
-import { log } from '@tools/logger';
-
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidColorValue = exports.validateColors = void 0;
+const logger_1 = require("../logger");
 /**
  * Validates a single color value (hex color or 'transparent')
  */
-const isValidColorValue = (value: string): boolean => {
+const isValidColorValue = (value) => {
     if (value === 'transparent') {
         return true;
     }
     // Validate hex color format (#RRGGBB or #RGB)
     return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value);
 };
-
+exports.isValidColorValue = isValidColorValue;
 /**
  * Validates the colors configuration
  * Ensures each color has at least one valid theme (light or dark)
  * @throws Error if validation fails
  */
-const validateColors = (colors: IColor): void => {
-    const errors: string[] = [];
-
+const validateColors = (colors) => {
+    const errors = [];
     Object.entries(colors).forEach(([colorName, colorConfig]) => {
         const { light, dark } = colorConfig;
-
         // Check if at least one theme is defined
         if (!light && !dark) {
-            errors.push(
-                `Color "${colorName}": must have at least one theme defined (light or dark)`
-            );
+            errors.push(`Color "${colorName}": must have at least one theme defined (light or dark)`);
             return;
         }
-
         // Validate light color if defined
         if (light && !isValidColorValue(light)) {
-            errors.push(
-                `Color "${colorName}": invalid light color value "${light}". Expected hex format (#RRGGBB) or "transparent"`
-            );
+            errors.push(`Color "${colorName}": invalid light color value "${light}". Expected hex format (#RRGGBB) or "transparent"`);
         }
-
         // Validate dark color if defined
         if (dark && !isValidColorValue(dark)) {
-            errors.push(
-                `Color "${colorName}": invalid dark color value "${dark}". Expected hex format (#RRGGBB) or "transparent"`
-            );
+            errors.push(`Color "${colorName}": invalid dark color value "${dark}". Expected hex format (#RRGGBB) or "transparent"`);
         }
     });
-
     if (errors.length > 0) {
         const errorMessage = [
             '❌ Color configuration validation failed:',
@@ -53,16 +43,9 @@ const validateColors = (colors: IColor): void => {
             '',
             'Please check your colors.config.json or anubis.config.json file.',
         ].join('\n');
-
-        log(errorMessage);
+        (0, logger_1.log)(errorMessage);
         throw new Error('Invalid color configuration');
     }
-
-    log(
-        `✅ Color configuration validated (${
-            Object.keys(colors).length
-        } colors)`
-    );
+    (0, logger_1.log)(`✅ Color configuration validated (${Object.keys(colors).length} colors)`);
 };
-
-export { validateColors, isValidColorValue };
+exports.validateColors = validateColors;

package/dist/version.d.ts

@@ -0,0 +1,5 @@
+export declare const version = "1.4.0";
+declare const _default: {
+    version: string;
+};
+export default _default;

package/dist/version.js

@@ -0,0 +1,7 @@
+"use strict";
+// This file is auto-generated by scripts/generate-version.js
+// Do not edit this file manually
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.version = void 0;
+exports.version = '1.4.0';
+exports.default = { version: exports.version };

package/index.js

@@ -1,26 +1,15 @@
 "use strict";
 
-const { init: initConfig, config } = require('./dist/tools/config.tool');
-const { log, logPrefix, logo } = require('./dist/tools/logger');
-const { init: initClassExtraction } = require('./dist/tools/extraction/extractClasses');
+const { config } = require('./dist/tools/config.tool');
+const { measureDuration, log, logPrefix, logo } = require('./dist/tools/logger');
+const { init: initAnubis } = require('./dist/tools/main')
 
 const init = async () => {
   logo();
-
-  console.time(`${logPrefix} Config initialized in`);
-  initConfig();
-  console.timeEnd(`${logPrefix} Config initialized in`);
-  log('---');
-
-  console.time(`${logPrefix} Rules generated in`);
-  await initClassExtraction();
-  console.timeEnd(`${logPrefix} Rules generated in`);
-  log('---');
+  await measureDuration('Anubis', initAnubis, false)
 };
 
 const refresh = async (file) => {
-  // console.log({ file });
-
   // _ Prevent self change loop
   // todo - add targets / ignore detection
   if (file.endsWith('_anubis.scss')) { return }
@@ -30,9 +19,7 @@ const refresh = async (file) => {
     return
   }
 
-  console.time(`${logPrefix} Refreshed in`);
-  await initClassExtraction();
-  console.timeEnd(`${logPrefix} Refreshed in`);
+  await measureDuration('Refresh', initAnubis, false)
 }
 
 function AnubisUI() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anubis-ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Class-based css generator",
   "main": "index.js",
   "keywords": [
@@ -16,13 +16,20 @@
   ],
   "scripts": {
     "dev": "rm -rf dist; npm run prepare; node src/manual/build.js",
-    "build": "node scripts/generate-version.js && tsc && tsc-alias",
-    "preinstall": "npm run build",
+    "build": "node scripts/generate-version.js && npx tsc && npx tsc-alias",
     "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
     "test": "vitest",
     "test:run": "vitest run",
     "test:ui": "vitest --ui"
   },
+  "files": [
+    "dist",
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
   "style": "dist/_anubis.scss",
   "repository": {
     "type": "git",

package/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>AnubisUI Test</title>
-        <link rel="stylesheet" href="src/css/_anubis.scss" />
-
-        <style>
-            .paragraph-small {
-                font-weight: var(--weight-bold);
-            }
-        </style>
-    </head>
-    <body class="body--light">
-        <div class="rounded bg-neutral border-primary-highest-thick shadow-neutral-wide">
-            <btn color="primary" textColor="secondary">Test button with variants</button>
-        </div>
-    </body>
-</html>

package/scripts/generate-version.js

@@ -1,15 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const packageJsonPath = path.join(__dirname, '..', 'package.json');
-const versionFilePath = path.join(__dirname, '..', 'src', 'version.ts');
-
-const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
-const versionCode = `// This file is auto-generated by scripts/generate-version.js
-// Do not edit this file manually
-
-export const version = '${packageJson.version}';
-export default { version };
-`;
-
-fs.writeFileSync(versionFilePath, versionCode, 'utf-8');

package/src/config/colors.config.json

@@ -1,242 +0,0 @@
-{
-  "none": {
-    "light": "transparent",
-    "dark": "transparent"
-  },
-  "text": {
-    "light": "#000",
-    "dark": "#fff"
-  },
-  "text-invert": {
-    "light": "#fff",
-    "dark": "#000"
-  },
-  "text-link": {
-    "light": "#0a5a8a",
-    "dark": "#0f84cb"
-  },
-  "accent": {
-    "light": "#0f84cb",
-    "dark": "#1a94db"
-  },
-  "accent-lowest": {
-    "light": "#f0f8ff",
-    "dark": "#082a3f"
-  },
-  "accent-lower": {
-    "light": "#e1f2ff",
-    "dark": "#0a5a8a"
-  },
-  "accent-low": {
-    "light": "#b3d9ff",
-    "dark": "#0e6b9a"
-  },
-  "accent-medium": {
-    "light": "#0f84cb",
-    "dark": "#1a94db"
-  },
-  "accent-high": {
-    "light": "#0c6ba3",
-    "dark": "#b3d9ff"
-  },
-  "accent-higher": {
-    "light": "#094a7a",
-    "dark": "#e1f2ff"
-  },
-  "accent-highest": {
-    "light": "#082a3f",
-    "dark": "#f0f8ff"
-  },
-  "primary": {
-    "light": "#0f84cb",
-    "dark": "#1a94db"
-  },
-  "primary-lowest": {
-    "light": "#f0f8ff",
-    "dark": "#082a3f"
-  },
-  "primary-lower": {
-    "light": "#e1f2ff",
-    "dark": "#0a5a8a"
-  },
-  "primary-low": {
-    "light": "#b3d9ff",
-    "dark": "#0e6b9a"
-  },
-  "primary-medium": {
-    "light": "#0f84cb",
-    "dark": "#1a94db"
-  },
-  "primary-high": {
-    "light": "#0c6ba3",
-    "dark": "#b3d9ff"
-  },
-  "primary-higher": {
-    "light": "#094a7a",
-    "dark": "#e1f2ff"
-  },
-  "primary-highest": {
-    "light": "#082a3f",
-    "dark": "#f0f8ff"
-  },
-  "secondary": {
-    "light": "#3b5161",
-    "dark": "#4a5f6f"
-  },
-  "secondary-lowest": {
-    "light": "#f5f7f8",
-    "dark": "#1e2a30"
-  },
-  "secondary-lower": {
-    "light": "#e8ecf0",
-    "dark": "#2a3a42"
-  },
-  "secondary-low": {
-    "light": "#b3c2cc",
-    "dark": "#354a55"
-  },
-  "secondary-medium": {
-    "light": "#3b5161",
-    "dark": "#4a5f6f"
-  },
-  "secondary-high": {
-    "light": "#2f404e",
-    "dark": "#b3c2cc"
-  },
-  "secondary-higher": {
-    "light": "#232f3a",
-    "dark": "#e8ecf0"
-  },
-  "secondary-highest": {
-    "light": "#1e2a30",
-    "dark": "#f5f7f8"
-  },
-  "neutral": {
-    "light": "#64748b",
-    "dark": "#64748b"
-  },
-  "neutral-lowest": {
-    "light": "#ffffff",
-    "dark": "#0f172a"
-  },
-  "neutral-lower": {
-    "light": "#f1f5f9",
-    "dark": "#475569"
-  },
-  "neutral-low": {
-    "light": "#cbd5e1",
-    "dark": "#475569"
-  },
-  "neutral-medium": {
-    "light": "#64748b",
-    "dark": "#64748b"
-  },
-  "neutral-high": {
-    "light": "#475569",
-    "dark": "#cbd5e1"
-  },
-  "neutral-higher": {
-    "light": "#1e293b",
-    "dark": "#f1f5f9"
-  },
-  "neutral-highest": {
-    "light": "#141e57",
-    "dark": "#ffffff"
-  },
-  "success": {
-    "light": "#00c99e",
-    "dark": "#25e2b3"
-  },
-  "success-lowest": {
-    "light": "#eafff7",
-    "dark": "#00302a"
-  },
-  "success-lower": {
-    "light": "#cdfeeb",
-    "dark": "#006756"
-  },
-  "success-low": {
-    "light": "#63f2ca",
-    "dark": "#00a481"
-  },
-  "success-medium": {
-    "light": "#00c99e",
-    "dark": "#25e2b3"
-  },
-  "success-high": {
-    "light": "#00836b",
-    "dark": "#63f2ca"
-  },
-  "success-higher": {
-    "light": "#005548",
-    "dark": "#cdfeeb"
-  },
-  "success-highest": {
-    "light": "#00302a",
-    "dark": "#eafff7"
-  },
-  "danger": {
-    "light": "#e64d4b",
-    "dark": "#f17a78"
-  },
-  "danger-lowest": {
-    "light": "#fdf3f3",
-    "dark": "#420e0d"
-  },
-  "danger-lower": {
-    "light": "#fde3e3",
-    "dark": "#932221"
-  },
-  "danger-low": {
-    "light": "#f8aaa9",
-    "dark": "#d3312f"
-  },
-  "danger-medium": {
-    "light": "#e64d4b",
-    "dark": "#f17a78"
-  },
-  "danger-high": {
-    "light": "#b12624",
-    "dark": "#f8aaa9"
-  },
-  "danger-higher": {
-    "light": "#7a2322",
-    "dark": "#fde3e3"
-  },
-  "danger-highest": {
-    "light": "#420e0d",
-    "dark": "#fdf3f3"
-  },
-  "warning": {
-    "light": "#ff9a00",
-    "dark": "#ffbd1b"
-  },
-  "warning-lowest": {
-    "light": "#fffbea",
-    "dark": "#481700"
-  },
-  "warning-lower": {
-    "light": "#fff3c5",
-    "dark": "#983c08"
-  },
-  "warning-low": {
-    "light": "#ffd346",
-    "dark": "#e27300"
-  },
-  "warning-medium": {
-    "light": "#ff9a00",
-    "dark": "#ffbd1b"
-  },
-  "warning-high": {
-    "light": "#bb4e02",
-    "dark": "#ffd346"
-  },
-  "warning-higher": {
-    "light": "#7c310b",
-    "dark": "#fff3c5"
-  },
-  "warning-highest": {
-    "light": "#481700",
-    "dark": "#fffbea"
-  }
-}

package/src/config/files.config.json

@@ -1,5 +0,0 @@
-{
-  "targets": [
-    "**/*.vue"
-  ]
-}

package/src/config/force.config.json

@@ -1 +0,0 @@
-[]

package/src/config/states.config.json

@@ -1,4 +0,0 @@
-[
-  "hover",
-  "not-hover"
-]