@vinicunca/unocss-preset 0.2.3 → 0.3.0

package/dist/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const pluginutils = require('@rollup/pluginutils');
 const jsUtilities = require('@vinicunca/js-utilities');
 const core = require('@unocss/core');
+const utils = require('@unocss/preset-mini/utils');
 
 const DEFAULT_PREFIX = "vin-";
 class VinicuncaCore {
@@ -29,10 +30,6 @@ class VinicuncaCore {
   }
 }
 
-function trimAll(str) {
-  return str.replace(/[\s\n\r]+/g, " ").trim();
-}
-
 class Button extends VinicuncaCore {
   constructor(options) {
     super(options);
@@ -92,7 +89,7 @@ class Button extends VinicuncaCore {
             )
           );
         }
-        return trimAll(results.join(" "));
+        return jsUtilities.trimAll(results.join(" "));
       }
     );
   }
@@ -164,7 +161,7 @@ class Divider extends VinicuncaCore {
             results.push("border-r-1");
           }
         }
-        return trimAll(results.join(" "));
+        return jsUtilities.trimAll(results.join(" "));
       }
     );
   }
@@ -206,147 +203,6 @@ class Overlay extends VinicuncaCore {
   }
 }
 
-const DEFAULT_THEME = {
-  light: {
-    dark: false,
-    colors: {
-      "background": "#FFFFFF",
-      "surface": "#FFFFFF",
-      "surface-variant": "#424242",
-      "on-surface-variant": "#EEEEEE",
-      "primary": "#1976D2",
-      "secondary": "#9c27b0",
-      "error": "#d32f2f",
-      "info": "#0288d1",
-      "success": "#2e7d32",
-      "warning": "#ed6c02",
-      "border": "#000000"
-    },
-    variables: {
-      "opacity-border": 0.12,
-      "opacity-high-emphasis": 0.87,
-      "opacity-medium-emphasis": 0.6,
-      "opacity-disabled": 0.38,
-      "opacity-idle": 0.04,
-      "opacity-hover": 0.04,
-      "opacity-focus": 0.12,
-      "opacity-selected": 0.08,
-      "opacity-activated": 0.12,
-      "opacity-pressed": 0.12,
-      "opacity-dragged": 0.08
-    }
-  },
-  dark: {
-    dark: true,
-    colors: {
-      "background": "#121212",
-      "surface": "#212121",
-      "surface-variant": "#BDBDBD",
-      "on-surface-variant": "#424242",
-      "primary": "#1565C0",
-      "secondary": "#7b1fa2",
-      "error": "#c62828",
-      "info": "#01579b",
-      "success": "#1b5e20",
-      "warning": "#e65100",
-      "border": "#FFFFFF"
-    },
-    variables: {
-      "opacity-border": 0.12,
-      "opacity-high-emphasis": 0.87,
-      "opacity-medium-emphasis": 0.6,
-      "opacity-disabled": 0.38,
-      "opacity-idle": 0.1,
-      "opacity-hover": 0.04,
-      "opacity-focus": 0.12,
-      "opacity-selected": 0.08,
-      "opacity-activated": 0.12,
-      "opacity-pressed": 0.16,
-      "opacity-dragged": 0.08
-    }
-  }
-};
-
-class Brand extends VinicuncaCore {
-  constructor(options) {
-    super(options);
-    const parsedOptions = this.parseBrandOptions(options?.themes);
-    this.themes = this.parseBrand(parsedOptions);
-    this.preflights = options?.preflights ?? {};
-  }
-  getPreflight() {
-    return {
-      getCSS: () => {
-        const lines = [];
-        lines.push(createCssSelector({
-          selector: ":root",
-          content: [
-            core.entriesToCss(Object.entries(this.remapVariables({ tokens: this.preflights })))
-          ]
-        }));
-        lines.push(createCssSelector({
-          selector: ":root",
-          content: this.genCssVariables(this.themes.light)
-        }));
-        return lines.join("\n");
-      }
-    };
-  }
-  genCssVariables(theme) {
-    const lightOverlay = theme.dark ? 2 : 1;
-    const darkOverlay = theme.dark ? 1 : 2;
-    const themeVariables = {};
-    for (const [key, value] of Object.entries(theme.colors)) {
-      const rgb = jsUtilities.parseColor(value);
-      themeVariables[key] = `${rgb.r},${rgb.g},${rgb.b}`;
-      if (!key.startsWith("on-")) {
-        themeVariables[`${key}-overlay-multiplier`] = (jsUtilities.getLuma(value) > 0.18 ? lightOverlay : darkOverlay).toString();
-      }
-    }
-    const variables = {};
-    for (const [key, value] of Object.entries(theme.variables)) {
-      const color = typeof value === "string" && value.startsWith("#") ? jsUtilities.parseColor(value) : void 0;
-      const rgb = color ? `${color.r},${color.g},${color.b}` : void 0;
-      variables[key] = `${rgb ?? value}`;
-    }
-    return [
-      core.entriesToCss(Object.entries(this.remapVariables({ tokens: themeVariables, key: "theme-" }))),
-      core.entriesToCss(Object.entries(this.remapVariables({ tokens: variables })))
-    ];
-  }
-  parseBrandOptions(options) {
-    if (!options) {
-      return DEFAULT_THEME;
-    }
-    return jsUtilities.mergeDeep(
-      DEFAULT_THEME,
-      { ...options }
-    );
-  }
-  parseBrand(_themes) {
-    const acc = {};
-    for (const [name, original] of Object.entries(_themes)) {
-      const theme = acc[name] = {
-        ...original,
-        colors: {
-          ...original.colors
-        }
-      };
-      for (const color of Object.keys(theme.colors)) {
-        if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) {
-          continue;
-        }
-        const onColor = `on-${color}`;
-        const colorValue = jsUtilities.parseColor(theme.colors[color]);
-        const blackContrast = Math.abs(jsUtilities.APCAContrast(jsUtilities.parseColor(0), colorValue));
-        const whiteContrast = Math.abs(jsUtilities.APCAContrast(jsUtilities.parseColor(16777215), colorValue));
-        theme.colors[onColor] = whiteContrast > Math.min(blackContrast, 50) ? "#fff" : "#000";
-      }
-    }
-    return acc;
-  }
-}
-
 const KEY_CIRCULAR_DASH = "progress-circular-dash";
 const KEY_CIRCULAR_ROTATE = "progress-circular-rotate";
 const KEY_LINE = "progress-line";
@@ -408,60 +264,111 @@ class Color extends VinicuncaCore {
   constructor(options) {
     super(options);
   }
-  getRules() {
-    return [
-      this.getTextRule(),
-      this.getBgRule(),
-      this.getBorderRule()
-    ];
-  }
-  getBorderRule() {
-    return [
-      /^border-brand-(?<body>(?:on-)?(?<color>.+))/,
-      ({ groups }) => {
-        const { body, color } = groups;
-        const colorBody = /^on-[a-z]/.test(body) ? `on-${color}` : color;
-        const colorVar = this.genVariable(`theme-${colorBody}`);
-        return {
-          "--un-border-opacity": 1,
-          "border-color": `rgba(var(${colorVar}), var(--un-border-opacity))`
-        };
-      },
-      { layer: "vinicunca" }
-    ];
+  static getThemes() {
+    return {
+      colors: {
+        surface: {
+          DEFAULT: "#FFFFFF",
+          variant: "#424242",
+          onVariant: "#EEEEEE",
+          dark: {
+            DEFAULT: "#212121",
+            variant: "#BDBDBD",
+            onVariant: "#424242"
+          }
+        },
+        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"
+        }
+      }
+    };
   }
-  getTextRule() {
+  getRules() {
     return [
-      /^text-brand-(?<body>(?:on-)?(?<color>.+))/,
-      ({ groups }) => {
-        const { body, color } = groups;
-        const colorBody = /^on-[a-z]/.test(body) ? `on-${color}` : color;
-        const colorVar = this.genVariable(`theme-${colorBody}`);
-        return {
-          "--un-text-opacity": 1,
-          "color": `rgba(var(${colorVar}), var(--un-text-opacity))`
-        };
-      },
-      { layer: "vinicunca" }
+      this.getBgRule()
     ];
   }
   getBgRule() {
+    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-brand-(.+)$/,
-      ([, body]) => {
-        const bgColorVar = this.genVariable(`theme-${body}`);
-        const colorVar = this.genVariable(`theme-on-${body}`);
-        return {
-          "--un-text-opacity": 1,
-          "--un-bg-opacity": 1,
-          "background-color": `rgba(var(${bgColorVar}),var(--un-bg-opacity))`,
-          "color": `rgba(var(${colorVar}), var(--un-text-opacity))`
-        };
+      /^bg-(.+)$/,
+      ([, body], { theme }) => {
+        const css = {};
+        const bgCss = colorResolver({
+          property: "background-color",
+          varName: "bg",
+          body,
+          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" }
     ];
   }
 }
+function colorResolver({ property, varName, body, theme }) {
+  const data = utils.parseColor(body, theme);
+  if (!data) {
+    return;
+  }
+  const { alpha, color, cssColor } = data;
+  const varOpacity = `--un-${varName}-opacity`;
+  const css = {};
+  if (cssColor) {
+    if (jsUtilities.hasValue(alpha)) {
+      css[varOpacity] = alpha;
+    } else {
+      css[varOpacity] = utils.colorOpacityToString(cssColor);
+    }
+    css[property] = utils.colorToString(cssColor, `var(${varOpacity})`);
+  } else if (color) {
+    css[property] = utils.colorToString(color, alpha);
+  }
+  return {
+    css,
+    data
+  };
+}
 
 const COLOR_RING_OFFSET = "rgba(0, 0, 0, 0.2)";
 const COLOR_RING_SHADOW = "rgba(0, 0, 0, 0.14)";
@@ -523,6 +430,40 @@ 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 [
+      [
+        /^opacity-(.+)$/,
+        ([, body], { theme }) => {
+          const opacityTheme = theme.opacity;
+          const opacityValue = opacityTheme[body];
+          return {
+            opacity: opacityValue ?? utils.handler.bracket.percent.cssvar(body)
+          };
+        }
+      ]
+    ];
+  }
+}
+
 const FONT_NAMES = {
   "h1": {
     fontSize: "6rem",
@@ -610,12 +551,8 @@ class Typography {
 
 class VinicuncaConfig {
   constructor(options) {
-    const { prefix, components, brands } = options;
+    const { prefix, components } = options;
     this.enablePreflight = options.enablePreflight ?? true;
-    this.brand = new Brand({
-      prefix,
-      ...brands
-    });
     this.color = new Color({
       prefix
     });
@@ -648,13 +585,13 @@ class VinicuncaConfig {
     };
   }
   definePreflights() {
-    return [
-      this.brand.getPreflight()
-    ];
+    return [];
   }
   defineTheme() {
     const themes = [
       Typography.getThemes(),
+      Color.getThemes(),
+      Opacity.getThemes(),
       Animation.getThemes(),
       Button.getThemes(),
       {
@@ -691,12 +628,10 @@ class VinicuncaConfig {
   defineRules() {
     return [
       this.color.getRules(),
-      Elevation.getRules()
+      Elevation.getRules(),
+      Opacity.getRules()
     ].flat(1);
   }
-  defineShortcuts() {
-    return [];
-  }
 }
 
 function defineVinicuncaConfig(options = {}) {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { DeepPartial, Preset, SourceCodeTransformer } from '@unocss/core';
+import { Preset, SourceCodeTransformer } from '@unocss/core';
 
 interface CoreOptions {
     prefix?: string;
@@ -17,53 +17,9 @@ interface OverlayOptions {
     };
 }
 
-interface Colors extends BaseColors, OnColors {
-    [key: string]: string;
-}
-interface BaseColors {
-    background: string;
-    surface: string;
-    primary: string;
-    secondary: string;
-    success: string;
-    warning: string;
-    error: string;
-    info: string;
-}
-interface OnColors {
-    'on-background': string;
-    'on-surface': string;
-    'on-primary': string;
-    'on-secondary': string;
-    'on-success': string;
-    'on-warning': string;
-    'on-error': string;
-    'on-info': string;
-}
-interface InternalBrandDefinition {
-    dark: boolean;
-    colors: Colors;
-    variables: Record<string, string | number>;
-}
-type BrandDefinition = DeepPartial<InternalBrandDefinition>;
-type BrandOptions = Record<string, BrandDefinition>;
-interface BrandPreflight {
-    background: string;
-    'on-background': string;
-    surface: string;
-    'on-surface': string;
-    'overlay-multiplier': number;
-    'scrollbar-offset': string;
-}
-interface BrandConfig {
-    themes?: BrandOptions;
-    preflights?: DeepPartial<BrandPreflight>;
-}
-
 interface IVinicuncaConfig {
     enablePreflight?: boolean;
     prefix?: string;
-    brands?: BrandConfig;
     components?: {
         button?: CoreOptions;
         divider?: CoreOptions;
@@ -72,7 +28,6 @@ interface IVinicuncaConfig {
 }
 declare class VinicuncaConfig {
     private enablePreflight;
-    private brand;
     private color;
     private divider;
     private button;
@@ -83,7 +38,6 @@ declare class VinicuncaConfig {
     private defineTheme;
     getTransformer(): SourceCodeTransformer;
     private defineRules;
-    private defineShortcuts;
 }
 
 /**

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import { createFilter } from '@rollup/pluginutils';
-import { toKebabCase, partition, parseColor, getLuma, mergeDeep, APCAContrast, convertToUnit } from '@vinicunca/js-utilities';
+import { toKebabCase, partition, trimAll, 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';
 
 const DEFAULT_PREFIX = "vin-";
 class VinicuncaCore {
@@ -25,10 +26,6 @@ class VinicuncaCore {
   }
 }
 
-function trimAll(str) {
-  return str.replace(/[\s\n\r]+/g, " ").trim();
-}
-
 class Button extends VinicuncaCore {
   constructor(options) {
     super(options);
@@ -202,147 +199,6 @@ class Overlay extends VinicuncaCore {
   }
 }
 
-const DEFAULT_THEME = {
-  light: {
-    dark: false,
-    colors: {
-      "background": "#FFFFFF",
-      "surface": "#FFFFFF",
-      "surface-variant": "#424242",
-      "on-surface-variant": "#EEEEEE",
-      "primary": "#1976D2",
-      "secondary": "#9c27b0",
-      "error": "#d32f2f",
-      "info": "#0288d1",
-      "success": "#2e7d32",
-      "warning": "#ed6c02",
-      "border": "#000000"
-    },
-    variables: {
-      "opacity-border": 0.12,
-      "opacity-high-emphasis": 0.87,
-      "opacity-medium-emphasis": 0.6,
-      "opacity-disabled": 0.38,
-      "opacity-idle": 0.04,
-      "opacity-hover": 0.04,
-      "opacity-focus": 0.12,
-      "opacity-selected": 0.08,
-      "opacity-activated": 0.12,
-      "opacity-pressed": 0.12,
-      "opacity-dragged": 0.08
-    }
-  },
-  dark: {
-    dark: true,
-    colors: {
-      "background": "#121212",
-      "surface": "#212121",
-      "surface-variant": "#BDBDBD",
-      "on-surface-variant": "#424242",
-      "primary": "#1565C0",
-      "secondary": "#7b1fa2",
-      "error": "#c62828",
-      "info": "#01579b",
-      "success": "#1b5e20",
-      "warning": "#e65100",
-      "border": "#FFFFFF"
-    },
-    variables: {
-      "opacity-border": 0.12,
-      "opacity-high-emphasis": 0.87,
-      "opacity-medium-emphasis": 0.6,
-      "opacity-disabled": 0.38,
-      "opacity-idle": 0.1,
-      "opacity-hover": 0.04,
-      "opacity-focus": 0.12,
-      "opacity-selected": 0.08,
-      "opacity-activated": 0.12,
-      "opacity-pressed": 0.16,
-      "opacity-dragged": 0.08
-    }
-  }
-};
-
-class Brand extends VinicuncaCore {
-  constructor(options) {
-    super(options);
-    const parsedOptions = this.parseBrandOptions(options?.themes);
-    this.themes = this.parseBrand(parsedOptions);
-    this.preflights = options?.preflights ?? {};
-  }
-  getPreflight() {
-    return {
-      getCSS: () => {
-        const lines = [];
-        lines.push(createCssSelector({
-          selector: ":root",
-          content: [
-            entriesToCss(Object.entries(this.remapVariables({ tokens: this.preflights })))
-          ]
-        }));
-        lines.push(createCssSelector({
-          selector: ":root",
-          content: this.genCssVariables(this.themes.light)
-        }));
-        return lines.join("\n");
-      }
-    };
-  }
-  genCssVariables(theme) {
-    const lightOverlay = theme.dark ? 2 : 1;
-    const darkOverlay = theme.dark ? 1 : 2;
-    const themeVariables = {};
-    for (const [key, value] of Object.entries(theme.colors)) {
-      const rgb = parseColor(value);
-      themeVariables[key] = `${rgb.r},${rgb.g},${rgb.b}`;
-      if (!key.startsWith("on-")) {
-        themeVariables[`${key}-overlay-multiplier`] = (getLuma(value) > 0.18 ? lightOverlay : darkOverlay).toString();
-      }
-    }
-    const variables = {};
-    for (const [key, value] of Object.entries(theme.variables)) {
-      const color = typeof value === "string" && value.startsWith("#") ? parseColor(value) : void 0;
-      const rgb = color ? `${color.r},${color.g},${color.b}` : void 0;
-      variables[key] = `${rgb ?? value}`;
-    }
-    return [
-      entriesToCss(Object.entries(this.remapVariables({ tokens: themeVariables, key: "theme-" }))),
-      entriesToCss(Object.entries(this.remapVariables({ tokens: variables })))
-    ];
-  }
-  parseBrandOptions(options) {
-    if (!options) {
-      return DEFAULT_THEME;
-    }
-    return mergeDeep(
-      DEFAULT_THEME,
-      { ...options }
-    );
-  }
-  parseBrand(_themes) {
-    const acc = {};
-    for (const [name, original] of Object.entries(_themes)) {
-      const theme = acc[name] = {
-        ...original,
-        colors: {
-          ...original.colors
-        }
-      };
-      for (const color of Object.keys(theme.colors)) {
-        if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) {
-          continue;
-        }
-        const onColor = `on-${color}`;
-        const colorValue = parseColor(theme.colors[color]);
-        const blackContrast = Math.abs(APCAContrast(parseColor(0), colorValue));
-        const whiteContrast = Math.abs(APCAContrast(parseColor(16777215), colorValue));
-        theme.colors[onColor] = whiteContrast > Math.min(blackContrast, 50) ? "#fff" : "#000";
-      }
-    }
-    return acc;
-  }
-}
-
 const KEY_CIRCULAR_DASH = "progress-circular-dash";
 const KEY_CIRCULAR_ROTATE = "progress-circular-rotate";
 const KEY_LINE = "progress-line";
@@ -404,60 +260,111 @@ class Color extends VinicuncaCore {
   constructor(options) {
     super(options);
   }
-  getRules() {
-    return [
-      this.getTextRule(),
-      this.getBgRule(),
-      this.getBorderRule()
-    ];
-  }
-  getBorderRule() {
-    return [
-      /^border-brand-(?<body>(?:on-)?(?<color>.+))/,
-      ({ groups }) => {
-        const { body, color } = groups;
-        const colorBody = /^on-[a-z]/.test(body) ? `on-${color}` : color;
-        const colorVar = this.genVariable(`theme-${colorBody}`);
-        return {
-          "--un-border-opacity": 1,
-          "border-color": `rgba(var(${colorVar}), var(--un-border-opacity))`
-        };
-      },
-      { layer: "vinicunca" }
-    ];
+  static getThemes() {
+    return {
+      colors: {
+        surface: {
+          DEFAULT: "#FFFFFF",
+          variant: "#424242",
+          onVariant: "#EEEEEE",
+          dark: {
+            DEFAULT: "#212121",
+            variant: "#BDBDBD",
+            onVariant: "#424242"
+          }
+        },
+        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"
+        }
+      }
+    };
   }
-  getTextRule() {
+  getRules() {
     return [
-      /^text-brand-(?<body>(?:on-)?(?<color>.+))/,
-      ({ groups }) => {
-        const { body, color } = groups;
-        const colorBody = /^on-[a-z]/.test(body) ? `on-${color}` : color;
-        const colorVar = this.genVariable(`theme-${colorBody}`);
-        return {
-          "--un-text-opacity": 1,
-          "color": `rgba(var(${colorVar}), var(--un-text-opacity))`
-        };
-      },
-      { layer: "vinicunca" }
+      this.getBgRule()
     ];
   }
   getBgRule() {
+    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-brand-(.+)$/,
-      ([, body]) => {
-        const bgColorVar = this.genVariable(`theme-${body}`);
-        const colorVar = this.genVariable(`theme-on-${body}`);
-        return {
-          "--un-text-opacity": 1,
-          "--un-bg-opacity": 1,
-          "background-color": `rgba(var(${bgColorVar}),var(--un-bg-opacity))`,
-          "color": `rgba(var(${colorVar}), var(--un-text-opacity))`
-        };
+      /^bg-(.+)$/,
+      ([, body], { theme }) => {
+        const css = {};
+        const bgCss = colorResolver({
+          property: "background-color",
+          varName: "bg",
+          body,
+          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" }
     ];
   }
 }
+function colorResolver({ property, varName, body, theme }) {
+  const data = parseColor(body, theme);
+  if (!data) {
+    return;
+  }
+  const { alpha, color, cssColor } = data;
+  const varOpacity = `--un-${varName}-opacity`;
+  const css = {};
+  if (cssColor) {
+    if (hasValue(alpha)) {
+      css[varOpacity] = alpha;
+    } else {
+      css[varOpacity] = colorOpacityToString(cssColor);
+    }
+    css[property] = colorToString(cssColor, `var(${varOpacity})`);
+  } else if (color) {
+    css[property] = colorToString(color, alpha);
+  }
+  return {
+    css,
+    data
+  };
+}
 
 const COLOR_RING_OFFSET = "rgba(0, 0, 0, 0.2)";
 const COLOR_RING_SHADOW = "rgba(0, 0, 0, 0.14)";
@@ -519,6 +426,40 @@ 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 [
+      [
+        /^opacity-(.+)$/,
+        ([, body], { theme }) => {
+          const opacityTheme = theme.opacity;
+          const opacityValue = opacityTheme[body];
+          return {
+            opacity: opacityValue ?? handler.bracket.percent.cssvar(body)
+          };
+        }
+      ]
+    ];
+  }
+}
+
 const FONT_NAMES = {
   "h1": {
     fontSize: "6rem",
@@ -606,12 +547,8 @@ class Typography {
 
 class VinicuncaConfig {
   constructor(options) {
-    const { prefix, components, brands } = options;
+    const { prefix, components } = options;
     this.enablePreflight = options.enablePreflight ?? true;
-    this.brand = new Brand({
-      prefix,
-      ...brands
-    });
     this.color = new Color({
       prefix
     });
@@ -644,13 +581,13 @@ class VinicuncaConfig {
     };
   }
   definePreflights() {
-    return [
-      this.brand.getPreflight()
-    ];
+    return [];
   }
   defineTheme() {
     const themes = [
       Typography.getThemes(),
+      Color.getThemes(),
+      Opacity.getThemes(),
       Animation.getThemes(),
       Button.getThemes(),
       {
@@ -687,12 +624,10 @@ class VinicuncaConfig {
   defineRules() {
     return [
       this.color.getRules(),
-      Elevation.getRules()
+      Elevation.getRules(),
+      Opacity.getRules()
     ].flat(1);
   }
-  defineShortcuts() {
-    return [];
-  }
 }
 
 function defineVinicuncaConfig(options = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinicunca/unocss-preset",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "packageManager": "pnpm@8.2.0",
   "description": "UnoCSS custom preset",
   "author": "praburangki<https://github.com/praburangki>",
@@ -50,23 +50,23 @@
     "unocss": "*"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
+    "@commitlint/cli": "^17.6.1",
+    "@commitlint/config-conventional": "^17.6.1",
     "@vinicunca/eslint-config": "^1.7.1",
-    "@vinicunca/js-utilities": "^3.1.0",
+    "@vinicunca/js-utilities": "^3.2.0",
     "bumpp": "^9.1.0",
-    "commitizen": "^4.2.6",
+    "commitizen": "^4.3.0",
     "conventional-changelog-cli": "^2.2.2",
     "cz-customizable": "^7.0.0",
     "eslint": "^8.38.0",
-    "eslint-define-config": "^1.17.0",
+    "eslint-define-config": "^1.18.0",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
-    "lint-staged": "^13.2.0",
-    "typescript": "^5.0.3",
+    "lint-staged": "^13.2.1",
+    "typescript": "^5.0.4",
     "unbuild": "^0.8.11",
-    "unocss": "^0.51.2",
-    "vitest": "^0.30.0"
+    "unocss": "^0.51.4",
+    "vitest": "^0.30.1"
   },
   "publishConfig": {
     "access": "public"