@vinicunca/unocss-preset 0.3.0 → 0.3.1

package/dist/index.cjs

@@ -263,49 +263,29 @@ class Animation {
 class Color extends VinicuncaCore {
   constructor(options) {
     super(options);
+    this.onColors = {};
+    this.brands = this.resolveBrands(options.brands ?? {});
   }
-  static getThemes() {
-    return {
-      colors: {
-        surface: {
-          DEFAULT: "#FFFFFF",
-          variant: "#424242",
-          onVariant: "#EEEEEE",
-          dark: {
-            DEFAULT: "#212121",
-            variant: "#BDBDBD",
-            onVariant: "#424242"
+  resolveBrands(brands) {
+    for (const brand of Object.keys(brands)) {
+      const brandColors = brands[brand];
+      if (jsUtilities.isString(brandColors)) {
+        continue;
+      } else {
+        for (const color of Object.keys(brandColors)) {
+          if (/^on-[a-z]/.test(color)) {
+            const onKey = color.replace(/^on-/, "");
+            this.onColors[`${brand}-${onKey}`] = brandColors[color];
+            delete brandColors[color];
           }
-        },
-        primary: {
-          DEFAULT: "#1976D2",
-          dark: "#1565C0"
-        },
-        error: {
-          DEFAULT: "#d32f2f",
-          dark: "#c62828"
-        },
-        success: {
-          DEFAULT: "#2e7d32",
-          dark: "#1b5e20"
-        },
-        secondary: {
-          DEFAULT: "#9c27b0",
-          dark: "#7b1fa2"
-        },
-        info: {
-          DEFAULT: "#0288d1",
-          dark: "#01579b"
-        },
-        warning: {
-          DEFAULT: "#ed6c02",
-          dark: "#e65100"
-        },
-        border: {
-          DEFAULT: "#000000",
-          dark: "#FFFFFF"
         }
       }
+    }
+    return brands;
+  }
+  getThemes() {
+    return {
+      colors: this.brands
     };
   }
   getRules() {
@@ -314,36 +294,44 @@ class Color extends VinicuncaCore {
     ];
   }
   getBgRule() {
+    return [
+      /^bg-(.+)$/,
+      ([, body], { theme }) => this.resolveBgRule(body, theme)
+    ];
+  }
+  resolveBgRule(body, theme) {
     function getTextColorName(color) {
       const colorValue = jsUtilities.parseColor(color);
       const blackContrast = Math.abs(jsUtilities.APCAContrast(jsUtilities.parseColor(0), colorValue));
       const whiteContrast = Math.abs(jsUtilities.APCAContrast(jsUtilities.parseColor(16777215), colorValue));
       return whiteContrast > Math.min(blackContrast, 50) ? "white" : "black";
     }
-    return [
-      /^bg-(.+)$/,
-      ([, body], { theme }) => {
-        const css = {};
-        const bgCss = colorResolver({
-          property: "background-color",
-          varName: "bg",
-          body,
+    const css = {};
+    const bgCss = colorResolver({
+      property: "background-color",
+      varName: "bg",
+      body,
+      theme
+    });
+    Object.assign(css, bgCss?.css);
+    if (bgCss?.data.color) {
+      let bodyText = body;
+      if (!["inherit", "current", "transparent"].includes(body)) {
+        if (bodyText in this.onColors) {
+          bodyText = this.onColors[bodyText];
+        } else {
+          bodyText = getTextColorName(bgCss?.data.color);
+        }
+        const textCss = colorResolver({
+          property: "color",
+          varName: "text",
+          body: bodyText,
           theme
         });
-        Object.assign(css, bgCss?.css);
-        if (bgCss?.data.color) {
-          const textCss = colorResolver({
-            property: "color",
-            varName: "text",
-            body: getTextColorName(bgCss?.data.color),
-            theme
-          });
-          Object.assign(css, textCss?.css);
-        }
-        return css;
-      },
-      { layer: "vinicunca" }
-    ];
+        Object.assign(css, textCss?.css);
+      }
+    }
+    return css;
   }
 }
 function colorResolver({ property, varName, body, theme }) {
@@ -431,23 +419,6 @@ class Elevation {
 }
 
 class Opacity {
-  static getThemes() {
-    return {
-      opacity: {
-        "border": 0.12,
-        "emphasis-high": 0.87,
-        "emphasis-medium": 0.6,
-        "disabled": 0.38,
-        "idle": 0.04,
-        "hover": 0.04,
-        "focus": 0.12,
-        "selected": 0.08,
-        "activated": 0.12,
-        "pressed": 0.12,
-        "dragged": 0.08
-      }
-    };
-  }
   static getRules() {
     return [
       [
@@ -551,10 +522,11 @@ class Typography {
 
 class VinicuncaConfig {
   constructor(options) {
-    const { prefix, components } = options;
-    this.enablePreflight = options.enablePreflight ?? true;
+    const { prefix, components, opacities, brands } = options;
+    this.opacities = opacities ?? {};
     this.color = new Color({
-      prefix
+      prefix,
+      brands
     });
     this.divider = new Divider({
       prefix,
@@ -570,31 +542,34 @@ class VinicuncaConfig {
     });
   }
   getPreset() {
-    const preflights = this.enablePreflight ? this.definePreflights() : [];
     return {
       name: "unocss-preset-vinicunca",
       layers: {
-        preflight: -3,
-        vinicunca: -2,
+        preflight: -1,
         default: 0,
-        variants: 1
+        vinicunca: 1
       },
-      preflights,
       theme: this.defineTheme(),
-      rules: this.defineRules()
+      rules: this.defineRules(),
+      variants: [
+        (matcher) => {
+          if (matcher.startsWith("vin:")) {
+            return {
+              matcher: matcher.replace("vin:", "uno-layer-vinicunca:")
+            };
+          }
+        }
+      ]
     };
   }
-  definePreflights() {
-    return [];
-  }
   defineTheme() {
     const themes = [
+      this.color.getThemes(),
       Typography.getThemes(),
-      Color.getThemes(),
-      Opacity.getThemes(),
       Animation.getThemes(),
       Button.getThemes(),
       {
+        opacity: this.opacities,
         lineWidth: {
           thin: "thin",
           medium: "medium",

package/dist/index.d.ts

@@ -17,9 +17,14 @@ interface OverlayOptions {
     };
 }
 
+type ColorBrands = Record<string, Record<string, string> | string>;
+
+type OpacityTheme = Record<string, number | string>;
+
 interface IVinicuncaConfig {
-    enablePreflight?: boolean;
     prefix?: string;
+    brands?: ColorBrands;
+    opacities?: OpacityTheme;
     components?: {
         button?: CoreOptions;
         divider?: CoreOptions;
@@ -27,14 +32,13 @@ interface IVinicuncaConfig {
     };
 }
 declare class VinicuncaConfig {
-    private enablePreflight;
     private color;
+    private opacities;
     private divider;
     private button;
     private overlay;
     constructor(options: IVinicuncaConfig);
     getPreset(): Preset;
-    private definePreflights;
     private defineTheme;
     getTransformer(): SourceCodeTransformer;
     private defineRules;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createFilter } from '@rollup/pluginutils';
-import { toKebabCase, partition, trimAll, hasValue, parseColor as parseColor$1, APCAContrast, convertToUnit, mergeDeep } from '@vinicunca/js-utilities';
+import { toKebabCase, partition, trimAll, isString, hasValue, parseColor as parseColor$1, APCAContrast, convertToUnit, mergeDeep } from '@vinicunca/js-utilities';
 import { entriesToCss } from '@unocss/core';
 import { parseColor, colorOpacityToString, colorToString, handler } from '@unocss/preset-mini/utils';
 
@@ -259,49 +259,29 @@ class Animation {
 class Color extends VinicuncaCore {
   constructor(options) {
     super(options);
+    this.onColors = {};
+    this.brands = this.resolveBrands(options.brands ?? {});
   }
-  static getThemes() {
-    return {
-      colors: {
-        surface: {
-          DEFAULT: "#FFFFFF",
-          variant: "#424242",
-          onVariant: "#EEEEEE",
-          dark: {
-            DEFAULT: "#212121",
-            variant: "#BDBDBD",
-            onVariant: "#424242"
+  resolveBrands(brands) {
+    for (const brand of Object.keys(brands)) {
+      const brandColors = brands[brand];
+      if (isString(brandColors)) {
+        continue;
+      } else {
+        for (const color of Object.keys(brandColors)) {
+          if (/^on-[a-z]/.test(color)) {
+            const onKey = color.replace(/^on-/, "");
+            this.onColors[`${brand}-${onKey}`] = brandColors[color];
+            delete brandColors[color];
           }
-        },
-        primary: {
-          DEFAULT: "#1976D2",
-          dark: "#1565C0"
-        },
-        error: {
-          DEFAULT: "#d32f2f",
-          dark: "#c62828"
-        },
-        success: {
-          DEFAULT: "#2e7d32",
-          dark: "#1b5e20"
-        },
-        secondary: {
-          DEFAULT: "#9c27b0",
-          dark: "#7b1fa2"
-        },
-        info: {
-          DEFAULT: "#0288d1",
-          dark: "#01579b"
-        },
-        warning: {
-          DEFAULT: "#ed6c02",
-          dark: "#e65100"
-        },
-        border: {
-          DEFAULT: "#000000",
-          dark: "#FFFFFF"
         }
       }
+    }
+    return brands;
+  }
+  getThemes() {
+    return {
+      colors: this.brands
     };
   }
   getRules() {
@@ -310,36 +290,44 @@ class Color extends VinicuncaCore {
     ];
   }
   getBgRule() {
+    return [
+      /^bg-(.+)$/,
+      ([, body], { theme }) => this.resolveBgRule(body, theme)
+    ];
+  }
+  resolveBgRule(body, theme) {
     function getTextColorName(color) {
       const colorValue = parseColor$1(color);
       const blackContrast = Math.abs(APCAContrast(parseColor$1(0), colorValue));
       const whiteContrast = Math.abs(APCAContrast(parseColor$1(16777215), colorValue));
       return whiteContrast > Math.min(blackContrast, 50) ? "white" : "black";
     }
-    return [
-      /^bg-(.+)$/,
-      ([, body], { theme }) => {
-        const css = {};
-        const bgCss = colorResolver({
-          property: "background-color",
-          varName: "bg",
-          body,
+    const css = {};
+    const bgCss = colorResolver({
+      property: "background-color",
+      varName: "bg",
+      body,
+      theme
+    });
+    Object.assign(css, bgCss?.css);
+    if (bgCss?.data.color) {
+      let bodyText = body;
+      if (!["inherit", "current", "transparent"].includes(body)) {
+        if (bodyText in this.onColors) {
+          bodyText = this.onColors[bodyText];
+        } else {
+          bodyText = getTextColorName(bgCss?.data.color);
+        }
+        const textCss = colorResolver({
+          property: "color",
+          varName: "text",
+          body: bodyText,
           theme
         });
-        Object.assign(css, bgCss?.css);
-        if (bgCss?.data.color) {
-          const textCss = colorResolver({
-            property: "color",
-            varName: "text",
-            body: getTextColorName(bgCss?.data.color),
-            theme
-          });
-          Object.assign(css, textCss?.css);
-        }
-        return css;
-      },
-      { layer: "vinicunca" }
-    ];
+        Object.assign(css, textCss?.css);
+      }
+    }
+    return css;
   }
 }
 function colorResolver({ property, varName, body, theme }) {
@@ -427,23 +415,6 @@ class Elevation {
 }
 
 class Opacity {
-  static getThemes() {
-    return {
-      opacity: {
-        "border": 0.12,
-        "emphasis-high": 0.87,
-        "emphasis-medium": 0.6,
-        "disabled": 0.38,
-        "idle": 0.04,
-        "hover": 0.04,
-        "focus": 0.12,
-        "selected": 0.08,
-        "activated": 0.12,
-        "pressed": 0.12,
-        "dragged": 0.08
-      }
-    };
-  }
   static getRules() {
     return [
       [
@@ -547,10 +518,11 @@ class Typography {
 
 class VinicuncaConfig {
   constructor(options) {
-    const { prefix, components } = options;
-    this.enablePreflight = options.enablePreflight ?? true;
+    const { prefix, components, opacities, brands } = options;
+    this.opacities = opacities ?? {};
     this.color = new Color({
-      prefix
+      prefix,
+      brands
     });
     this.divider = new Divider({
       prefix,
@@ -566,31 +538,34 @@ class VinicuncaConfig {
     });
   }
   getPreset() {
-    const preflights = this.enablePreflight ? this.definePreflights() : [];
     return {
       name: "unocss-preset-vinicunca",
       layers: {
-        preflight: -3,
-        vinicunca: -2,
+        preflight: -1,
         default: 0,
-        variants: 1
+        vinicunca: 1
       },
-      preflights,
       theme: this.defineTheme(),
-      rules: this.defineRules()
+      rules: this.defineRules(),
+      variants: [
+        (matcher) => {
+          if (matcher.startsWith("vin:")) {
+            return {
+              matcher: matcher.replace("vin:", "uno-layer-vinicunca:")
+            };
+          }
+        }
+      ]
     };
   }
-  definePreflights() {
-    return [];
-  }
   defineTheme() {
     const themes = [
+      this.color.getThemes(),
       Typography.getThemes(),
-      Color.getThemes(),
-      Opacity.getThemes(),
       Animation.getThemes(),
       Button.getThemes(),
       {
+        opacity: this.opacities,
         lineWidth: {
           thin: "thin",
           medium: "medium",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinicunca/unocss-preset",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "packageManager": "pnpm@8.2.0",
   "description": "UnoCSS custom preset",
   "author": "praburangki<https://github.com/praburangki>",