origam 2.16.0 → 2.17.1

package/dist/src/composables/Commons/border.composable.cjs

@@ -5,19 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useBorder = useBorder;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _anchor = require("../../consts/Commons/anchor.const.cjs");
+var _border = require("../../consts/Commons/border.const.cjs");
+var _border2 = require("../../utils/Commons/border.util.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 const UTILITY_BORDER = /* @__PURE__ */new Set(["none", "thin", "thick"]);
 function isUtilityBorder(value) {
   return typeof value === "string" && UTILITY_BORDER.has(value);
 }
-function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
+function isDirectionBorder(value) {
+  return typeof value === "string" && _anchor.DIRECTION_ARRAY.includes(value);
+}
+function useBorder(props, name = (0, _getCurrentInstance.getCurrentInstanceName)()) {
   const borderClasses = (0, _vue.computed)(() => {
     const border = (0, _vue.isRef)(props) ? props.value : props.border;
     const classes = [];
     if (border && typeof border !== "undefined") {
       classes.push(`${name}--border`);
-      if (_consts.DIRECTION_ARRAY.includes(border) || Array.isArray(border) && border.some(bord => _consts.DIRECTION_ARRAY.includes(bord))) {
+      if (isDirectionBorder(border) || Array.isArray(border) && border.some(bord => _anchor.DIRECTION_ARRAY.includes(bord))) {
         classes.push(`${name}--border-${border}`);
       }
       if (isUtilityBorder(border)) {
@@ -31,18 +37,29 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
   const borderStyles = (0, _vue.computed)(() => {
     const border = (0, _vue.isRef)(props) ? props.value : props.border;
     const styles = [];
-    if (typeof border === "string" && border !== "") {
-      const match = _consts.BORDER_REGEX.exec(border)?.groups;
+    if (isUtilityBorder(border)) {
+      styles.push(`border-width: ${_border.BORDER_KEYWORD_WIDTH[border]}`);
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    } else if (isDirectionBorder(border)) {
+      _anchor.DIRECTION_ARRAY.forEach(side => {
+        styles.push(`border-${side}-width: ${side === border ? _border.BORDER_KEYWORD_WIDTH.thin : _border.BORDER_KEYWORD_WIDTH.none}`);
+      });
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    } else if (typeof border === "string" && border !== "") {
+      const match = _border.BORDER_REGEX.exec(border)?.groups;
       if (match) {
         Object.keys(match).forEach(key => {
           let values = String(match[key]).split(" ");
-          if (key === "style" && (0, _utils.isEmpty)(match[key])) values = ["solid"];
-          if (key === "color" && (0, _utils.isEmpty)(match[key])) values = ["currentColor"];
-          styles.push(...(0, _utils.formatBorderStylesVar)(values, key));
+          if (key === "width" && (0, _commons.isEmpty)(match[key])) return;
+          if (key === "style" && (0, _commons.isEmpty)(match[key])) values = ["solid"];
+          if (key === "color" && (0, _commons.isEmpty)(match[key])) values = ["currentColor"];
+          styles.push(...(0, _border2.formatBorderStylesVar)(values, key));
         });
       }
     } else if (typeof border === "number") {
-      styles.push(`border-width: ${(0, _utils.convertToUnit)(border)}`);
+      styles.push(`border-width: ${(0, _commons.convertToUnit)(border)}`);
       styles.push("border-style: solid");
       styles.push("border-color: currentColor");
     }
@@ -51,15 +68,15 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
         borderColor,
         borderStyle
       } = props;
-      if (!(0, _utils.isEmpty)(borderColor)) styles.push(`border-color: ${borderColor}`);
-      if (!(0, _utils.isEmpty)(borderStyle)) styles.push(`border-style: ${borderStyle}`);
-      _consts.BORDER_LOGICAL_AXIS_MAP.forEach(({
+      if (!(0, _commons.isEmpty)(borderColor)) styles.push(`border-color: ${borderColor}`);
+      if (!(0, _commons.isEmpty)(borderStyle)) styles.push(`border-style: ${borderStyle}`);
+      _border.BORDER_LOGICAL_AXIS_MAP.forEach(({
         axis,
         widthProp
       }) => {
         const axisValue = props[widthProp];
         if (typeof axisValue === "number") {
-          styles.push(`border-${axis}-width: ${(0, _utils.convertToUnit)(axisValue)}`);
+          styles.push(`border-${axis}-width: ${(0, _commons.convertToUnit)(axisValue)}`);
           styles.push(`border-${axis}-style: solid`);
           styles.push(`border-${axis}-color: currentColor`);
         } else if (axisValue === true) {
@@ -67,11 +84,11 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
           styles.push(`border-${axis}-style: solid`);
           styles.push(`border-${axis}-color: currentColor`);
         } else if (typeof axisValue === "string" && axisValue !== "") {
-          const parsed = (0, _utils.parseBorderPositionValue)(axisValue);
-          if (parsed) styles.push(...(0, _utils.formatBorderPositionStylesVar)(axis, parsed));
+          const parsed = (0, _border2.parseBorderPositionValue)(axisValue);
+          if (parsed) styles.push(...(0, _border2.formatBorderPositionStylesVar)(axis, parsed));
         }
       });
-      _consts.BORDER_POSITION_MAP.forEach(({
+      _border.BORDER_POSITION_MAP.forEach(({
         side,
         widthProp,
         colorProp
@@ -79,7 +96,7 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
         const sideValue = props[widthProp];
         const sideColor = props[colorProp];
         if (typeof sideValue === "number") {
-          styles.push(`border-${side}-width: ${(0, _utils.convertToUnit)(sideValue)}`);
+          styles.push(`border-${side}-width: ${(0, _commons.convertToUnit)(sideValue)}`);
           styles.push(`border-${side}-style: solid`);
           styles.push(`border-${side}-color: currentColor`);
         } else if (sideValue === true) {
@@ -87,10 +104,10 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
           styles.push(`border-${side}-style: solid`);
           styles.push(`border-${side}-color: currentColor`);
         } else if (typeof sideValue === "string" && sideValue !== "") {
-          const parsed = (0, _utils.parseBorderPositionValue)(sideValue);
-          if (parsed) styles.push(...(0, _utils.formatBorderPositionStylesVar)(side, parsed));
+          const parsed = (0, _border2.parseBorderPositionValue)(sideValue);
+          if (parsed) styles.push(...(0, _border2.formatBorderPositionStylesVar)(side, parsed));
         }
-        const resolvedSideColor = (0, _utils.resolveBorderSideColor)(sideColor);
+        const resolvedSideColor = (0, _border2.resolveBorderSideColor)(sideColor);
         if (resolvedSideColor) styles.push(`border-${side}-color: ${resolvedSideColor}`);
       });
     }

package/dist/src/composables/Commons/border.composable.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
-import type { IBorderProps } from '../../interfaces';
-import { TDirectionBoth } from "../../types";
+import type { IBorderProps } from '../../interfaces/Commons/border.interface';
+import { TDirectionBoth } from '../../types/Commons/anchor.type';
 /*********************************************************
  * useBorder
  *
@@ -26,6 +26,37 @@ import { TDirectionBoth } from "../../types";
  * axis-level color, and the global `borderColor` — each rung only
  * overrides the side(s)/axis it actually targets, everything else keeps
  * cascading from the rung below.
+ *
+ * @description
+ * WIDTH KEYWORDS AND DIRECTIONS ARE EMITTED INLINE (#391). 'none' | 'thin'
+ * | 'thick' and 'top' | 'right' | 'bottom' | 'left' resolve to a WIDTH, so
+ * they take the same inline path the numeric `:border="4"` form already
+ * took — which is precisely why the numeric case always worked while the
+ * keywords did not. The global `.origam--border-{kw}` utility is still
+ * emitted and still paints wherever nothing competes, but it CANNOT be the
+ * mechanism on its own: a utility is specificity (0,1,0) while a Vue scoped
+ * rule is `.class[data-v-hash]` = (0,2,0), so a component painting from
+ * `border-width: var(--origam-{cmp}---border-width, …)` outranks it
+ * whatever the sheet order. Measured: 10 of the 43 `useBorder` consumers
+ * carry such a rule (Btn, List, Kbd, Code, Card*, Audio, Calendar, …) and
+ * on every one of them `thick` painted `thin` and `none` painted `thin`.
+ * Widths come from `BORDER_KEYWORD_WIDTH`, the same tokens the utility
+ * declares, so the two channels cannot drift.
+ *
+ * @description
+ * A DIRECTION ISOLATES ITS EDGE. `border="top"` emits all four physical
+ * widths — `thin` on the named side, `0` on the other three — because the
+ * components that paint from a single `border-width` shorthand have no
+ * per-side custom property a class could target. Emitting the four
+ * declarations is what makes a direction mean the same thing everywhere
+ * instead of only on the two components that happen to declare per-side
+ * variables.
+ *
+ * @description
+ * WHEN #514 IS SETTLED, THIS INLINE PATH IS THE THING TO REMOVE. If the DS
+ * adopts `@layer` (measured in `packages/tests/e2e/btn-cascade-layer-probe.spec.ts`),
+ * the utility wins on its own and these `styles.push` calls become dead.
+ * Until then the inline copy is the only channel that can actually paint.
  ********************************************************/
 export declare function useBorder(props: IBorderProps | Ref<boolean | number | string | TDirectionBoth | Array<TDirectionBoth> | null | undefined>, name?: string): {
     borderClasses: import("vue").ComputedRef<string[]>;

package/dist/src/composables/Commons/border.composable.js

@@ -1,14 +1,9 @@
 import { computed, isRef } from "vue";
-import { BORDER_LOGICAL_AXIS_MAP, BORDER_POSITION_MAP, BORDER_REGEX, DIRECTION_ARRAY } from "../../consts/index.js";
-import {
-  convertToUnit,
-  formatBorderPositionStylesVar,
-  formatBorderStylesVar,
-  getCurrentInstanceName,
-  isEmpty,
-  parseBorderPositionValue,
-  resolveBorderSideColor
-} from "../../utils/index.js";
+import { DIRECTION_ARRAY } from "../../consts/Commons/anchor.const.js";
+import { BORDER_KEYWORD_WIDTH, BORDER_LOGICAL_AXIS_MAP, BORDER_POSITION_MAP, BORDER_REGEX } from "../../consts/Commons/border.const.js";
+import { formatBorderPositionStylesVar, formatBorderStylesVar, parseBorderPositionValue, resolveBorderSideColor } from "../../utils/Commons/border.util.js";
+import { convertToUnit, isEmpty } from "../../utils/Commons/commons.util.js";
+import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
 const UTILITY_BORDER = /* @__PURE__ */ new Set([
   "none",
   "thin",
@@ -17,13 +12,16 @@ const UTILITY_BORDER = /* @__PURE__ */ new Set([
 function isUtilityBorder(value) {
   return typeof value === "string" && UTILITY_BORDER.has(value);
 }
+function isDirectionBorder(value) {
+  return typeof value === "string" && DIRECTION_ARRAY.includes(value);
+}
 export function useBorder(props, name = getCurrentInstanceName()) {
   const borderClasses = computed(() => {
     const border = isRef(props) ? props.value : props.border;
     const classes = [];
     if (border && typeof border !== "undefined") {
       classes.push(`${name}--border`);
-      if (DIRECTION_ARRAY.includes(border) || Array.isArray(border) && border.some((bord) => DIRECTION_ARRAY.includes(bord))) {
+      if (isDirectionBorder(border) || Array.isArray(border) && border.some((bord) => DIRECTION_ARRAY.includes(bord))) {
         classes.push(`${name}--border-${border}`);
       }
       if (isUtilityBorder(border)) {
@@ -37,11 +35,22 @@ export function useBorder(props, name = getCurrentInstanceName()) {
   const borderStyles = computed(() => {
     const border = isRef(props) ? props.value : props.border;
     const styles = [];
-    if (typeof border === "string" && border !== "") {
+    if (isUtilityBorder(border)) {
+      styles.push(`border-width: ${BORDER_KEYWORD_WIDTH[border]}`);
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    } else if (isDirectionBorder(border)) {
+      DIRECTION_ARRAY.forEach((side) => {
+        styles.push(`border-${side}-width: ${side === border ? BORDER_KEYWORD_WIDTH.thin : BORDER_KEYWORD_WIDTH.none}`);
+      });
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    } else if (typeof border === "string" && border !== "") {
       const match = BORDER_REGEX.exec(border)?.groups;
       if (match) {
         Object.keys(match).forEach((key) => {
           let values = String(match[key]).split(" ");
+          if (key === "width" && isEmpty(match[key])) return;
           if (key === "style" && isEmpty(match[key])) values = ["solid"];
           if (key === "color" && isEmpty(match[key])) values = ["currentColor"];
           styles.push(...formatBorderStylesVar(values, key));

package/dist/src/composables/Commons/bothColor.composable.cjs

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBothColor = useBothColor;
+var _vue = require("vue");
+var _color = require("./color.composable.cjs");
+function useBothColor(bgColorProps, colorProps, name) {
+  const bothColors = (0, _vue.computed)(() => {
+    return {
+      text: (0, _vue.isRef)(colorProps) ? colorProps.value : name ? colorProps[name] : null,
+      background: (0, _vue.isRef)(bgColorProps) ? bgColorProps.value : name ? bgColorProps[name] : null
+    };
+  });
+  return (0, _color.useColor)(bothColors);
+}

package/dist/src/composables/Commons/bothColor.composable.d.ts

@@ -0,0 +1,15 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { TColor } from '../../types/Commons/color.type';
+/*********************************************************
+ * useBothColor
+ *
+ * @description
+ * Resolves a bg/text colour pair from two independent prop sources
+ * (bgColorProps + colorProps) and delegates the actual CSS resolution
+ * to `useColor` — kept in its own file so the split by hook stays
+ * one-file-one-hook, without duplicating `useColor`'s resolution logic.
+ ********************************************************/
+export declare function useBothColor<T extends Record<K, TColor>, K extends string>(bgColorProps: T | Ref<TColor> | ComputedRef<TColor>, colorProps: T | Ref<TColor> | ComputedRef<TColor>, name?: K): {
+    colorClasses: ComputedRef<string[]>;
+    colorStyles: ComputedRef<string[]>;
+};

package/dist/src/composables/Commons/bothColor.composable.js

@@ -0,0 +1,11 @@
+import { computed, isRef } from "vue";
+import { useColor } from "./color.composable.js";
+export function useBothColor(bgColorProps, colorProps, name) {
+  const bothColors = computed(() => {
+    return {
+      text: isRef(colorProps) ? colorProps.value : name ? colorProps[name] : null,
+      background: isRef(bgColorProps) ? bgColorProps.value : name ? bgColorProps[name] : null
+    };
+  });
+  return useColor(bothColors);
+}

package/dist/src/composables/Commons/color.composable.cjs

@@ -3,11 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useBackgroundColor = useBackgroundColor;
-exports.useBothColor = useBothColor;
 exports.useColor = useColor;
-exports.useColorEffect = useColorEffect;
-exports.useTextColor = useTextColor;
 var _vue = require("vue");
 var _color = require("../../utils/Commons/color.util.cjs");
 var _gradient = require("../../utils/Commons/gradient.util.cjs");
@@ -79,135 +75,4 @@ function useColor(colors) {
     colorClasses,
     colorStyles
   };
-}
-function useBothColor(bgColorProps, colorProps, name) {
-  const bothColors = (0, _vue.computed)(() => {
-    return {
-      text: (0, _vue.isRef)(colorProps) ? colorProps.value : name ? colorProps[name] : null,
-      background: (0, _vue.isRef)(bgColorProps) ? bgColorProps.value : name ? bgColorProps[name] : null
-    };
-  });
-  return useColor(bothColors);
-}
-function useTextColor(props, name) {
-  const colors = (0, _vue.computed)(() => ({
-    text: (0, _vue.isRef)(props) ? props.value : name ? props[name] : null
-  }));
-  const {
-    colorClasses: textColorClasses,
-    colorStyles: textColorStyles
-  } = useColor(colors);
-  return {
-    textColorClasses,
-    textColorStyles
-  };
-}
-function useBackgroundColor(props, name) {
-  const colors = (0, _vue.computed)(() => ({
-    background: (0, _vue.isRef)(props) ? props.value : name ? props[name] : null
-  }));
-  const {
-    colorClasses: backgroundColorClasses,
-    colorStyles: backgroundColorStyles
-  } = useColor(colors);
-  return {
-    backgroundColorClasses,
-    backgroundColorStyles
-  };
-}
-function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _vue.ref)(false), isDisabled = (0, _vue.ref)(false)) {
-  const activeColor = (0, _vue.computed)(() => props.activeColor ? props.activeColor : props.color);
-  const hoverColor = (0, _vue.computed)(() => props.hoverColor ? props.hoverColor : props.color);
-  const color = (0, _vue.computed)(() => {
-    return isHover.value ? hoverColor.value : isActive.value ? activeColor.value : props.color;
-  });
-  const activeBgColor = (0, _vue.computed)(() => props.activeBgColor ? props.activeBgColor : props.bgColor);
-  const hoverBgColor = (0, _vue.computed)(() => props.hoverBgColor ? props.hoverBgColor : props.bgColor);
-  const bgColor = (0, _vue.computed)(() => {
-    return isHover.value ? hoverBgColor.value : isActive.value ? activeBgColor.value : props.bgColor;
-  });
-  const colorClasses = (0, _vue.computed)(() => {
-    if (isHover.value || isActive.value || isDisabled.value) return [];
-    const classes = [];
-    const bgVal = bgColor.value;
-    const fgVal = color.value;
-    if (bgVal && (0, _color.isUtilityIntent)(bgVal)) {
-      classes.push(`origam--bg-${bgVal}`);
-    }
-    if (fgVal && (0, _color.isUtilityIntent)(fgVal)) {
-      classes.push(`origam--color-${fgVal}`);
-    } else if (!fgVal && bgVal && (0, _color.isUtilityIntent)(bgVal)) {}
-    return classes;
-  });
-  const colorStyles = (0, _vue.computed)(() => {
-    void isDisabled.value;
-    const sameIntentBg = (a, b) => {
-      return !!a && !!b && a === b && (0, _color.isIntent)(a);
-    };
-    const sameIntentFg = (a, b) => {
-      return !!a && !!b && a === b && (0, _color.isIntent)(a);
-    };
-    const bgRole = isHover.value && (!props.hoverBgColor || sameIntentBg(props.hoverBgColor, props.bgColor)) ? "hover" : isActive.value && (!props.activeBgColor || sameIntentBg(props.activeBgColor, props.bgColor)) ? "active" : "default";
-    const _fgRole = isHover.value && (!props.hoverColor || sameIntentFg(props.hoverColor, props.color)) ? "hover" : isActive.value && (!props.activeColor || sameIntentFg(props.activeColor, props.color)) ? "active" : "default";
-    void _fgRole;
-    let bgDecl = null;
-    let fgDecl = null;
-    let bgIntentFg = null;
-    let bgIsGradient = false;
-    let clipText = false;
-    if (bgColor.value && (0, _gradient.isGradient)(bgColor.value)) {
-      const grad = (0, _gradient.resolveGradient)(bgColor.value);
-      if (grad) {
-        bgDecl = `background-image: ${grad}`;
-        bgIsGradient = true;
-      }
-    } else if (bgColor.value && (0, _color.isIntent)(bgColor.value)) {
-      const m = (0, _color.tokenStylesForIntent)(bgColor.value, bgRole);
-      bgDecl = `background-color: ${m["background-color"]}`;
-      bgIntentFg = (0, _color.tokenStylesForIntent)(bgColor.value, "default").color;
-    } else if (bgColor.value === "transparent") {
-      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)("transparent", bgRole)}`;
-    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _color.isCssColor)(bgColor.value)) {
-      (0, _color.warnLegacyColor)("bgColor", bgColor.value);
-      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)(bgColor.value, bgRole)}`;
-    }
-    if (color.value && (0, _gradient.isGradient)(color.value)) {
-      const grad = (0, _gradient.resolveGradient)(color.value);
-      if (grad) {
-        fgDecl = "color: transparent";
-        bgDecl = `background-image: ${grad}`;
-        clipText = true;
-      }
-    } else if (color.value && (0, _color.isIntent)(color.value)) {
-      if (bgIntentFg && bgColor.value && (0, _color.isIntent)(bgColor.value) && color.value === bgColor.value) {
-        fgDecl = `color: ${bgIntentFg}`;
-      } else {
-        fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(color.value)}`;
-      }
-    } else if (color.value && typeof color.value === "string" && (0, _color.isCssColor)(color.value)) {
-      if (color.value !== "transparent") (0, _color.warnLegacyColor)("color", color.value);
-      fgDecl = `color: ${color.value}`;
-    } else if (!color.value && bgIntentFg && !bgIsGradient) {
-      fgDecl = `color: ${bgIntentFg}`;
-    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _color.isParsableColor)(bgColor.value)) {
-      const parsed = (0, _color.parseColor)(bgColor.value);
-      if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
-      }
-    }
-    const styles = [];
-    if (bgDecl) styles.push(bgDecl);
-    if (fgDecl) styles.push(fgDecl);
-    if (clipText) {
-      styles.push("background-clip: text");
-      styles.push("-webkit-background-clip: text");
-    }
-    return styles;
-  });
-  return {
-    colorClasses,
-    colorStyles,
-    color,
-    bgColor
-  };
 }

package/dist/src/composables/Commons/color.composable.d.ts

@@ -1,8 +1,17 @@
-import type { ComputedRef, Ref } from 'vue';
-import type { IBgColorProps, IColorProps } from "../../interfaces";
-import type { TColor } from '../../types';
+import type { ComputedRef } from 'vue';
+import type { TColor } from '../../types/Commons/color.type';
 /*********************************************************
  * useColor
+ *
+ * @description
+ * Legacy bg/text colour resolver (kept for backward compat — used by
+ * ~49 components).
+ * Base hook of the color family: useBothColor / useTextColor /
+ * useBackgroundColor all delegate to this one to avoid duplicating the
+ * intent / gradient / legacy-CSS-color resolution logic.
+ * `useColorEffect` (hover/active-aware) lives in its own file and does
+ * NOT depend on this hook — its role/state derivation is a different
+ * algorithm, not a variant of this one.
  ********************************************************/
 export declare function useColor(colors: ComputedRef<{
     background?: TColor;
@@ -11,38 +20,3 @@ export declare function useColor(colors: ComputedRef<{
     colorClasses: ComputedRef<string[]>;
     colorStyles: ComputedRef<string[]>;
 };
-/*********************************************************
- * useBothColor
- ********************************************************/
-export declare function useBothColor<T extends Record<K, TColor>, K extends string>(bgColorProps: T | Ref<TColor> | ComputedRef<TColor>, colorProps: T | Ref<TColor> | ComputedRef<TColor>, name?: K): {
-    colorClasses: ComputedRef<string[]>;
-    colorStyles: ComputedRef<string[]>;
-};
-/*********************************************************
- * useTextColor
- ********************************************************/
-export declare function useTextColor<T extends Record<K, TColor>, K extends string>(props: T | Ref<TColor>, name?: K): {
-    textColorClasses: ComputedRef<string[]>;
-    textColorStyles: ComputedRef<string[]>;
-};
-/*********************************************************
- * useBackgroundColor
- ********************************************************/
-export declare function useBackgroundColor<T extends Record<K, TColor>, K extends string>(props: T | Ref<TColor>, name?: K): {
-    backgroundColorClasses: ComputedRef<string[]>;
-    backgroundColorStyles: ComputedRef<string[]>;
-};
-/*********************************************************
- * useColorEffect
- ********************************************************/
-export declare function useColorEffect(props: IColorProps & IBgColorProps & {
-    hoverColor?: TColor;
-    activeColor?: TColor;
-    hoverBgColor?: TColor;
-    activeBgColor?: TColor;
-}, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, isDisabled?: Ref<boolean> | ComputedRef<boolean>): {
-    colorClasses: ComputedRef<string[]>;
-    colorStyles: ComputedRef<string[]>;
-    color: ComputedRef<TColor>;
-    bgColor: ComputedRef<TColor>;
-};

package/dist/src/composables/Commons/color.composable.js

@@ -1,4 +1,4 @@
-import { computed, isRef, ref } from "vue";
+import { computed } from "vue";
 import {
   getForeground,
   isCssColor,
@@ -6,10 +6,8 @@ import {
   isParsableColor,
   isUtilityIntent,
   parseColor,
-  rawBgExprWithState,
   tokenForegroundForIntent,
-  tokenStylesForIntent,
-  warnLegacyColor
+  tokenStylesForIntent
 } from "../../utils/Commons/color.util.js";
 import { isGradient, resolveGradient } from "../../utils/Commons/gradient.util.js";
 export function useColor(colors) {
@@ -78,118 +76,3 @@ export function useColor(colors) {
   });
   return { colorClasses, colorStyles };
 }
-export function useBothColor(bgColorProps, colorProps, name) {
-  const bothColors = computed(() => {
-    return {
-      text: isRef(colorProps) ? colorProps.value : name ? colorProps[name] : null,
-      background: isRef(bgColorProps) ? bgColorProps.value : name ? bgColorProps[name] : null
-    };
-  });
-  return useColor(bothColors);
-}
-export function useTextColor(props, name) {
-  const colors = computed(() => ({
-    text: isRef(props) ? props.value : name ? props[name] : null
-  }));
-  const { colorClasses: textColorClasses, colorStyles: textColorStyles } = useColor(colors);
-  return { textColorClasses, textColorStyles };
-}
-export function useBackgroundColor(props, name) {
-  const colors = computed(() => ({
-    background: isRef(props) ? props.value : name ? props[name] : null
-  }));
-  const { colorClasses: backgroundColorClasses, colorStyles: backgroundColorStyles } = useColor(colors);
-  return { backgroundColorClasses, backgroundColorStyles };
-}
-export function useColorEffect(props, isHover = ref(false), isActive = ref(false), isDisabled = ref(false)) {
-  const activeColor = computed(() => props.activeColor ? props.activeColor : props.color);
-  const hoverColor = computed(() => props.hoverColor ? props.hoverColor : props.color);
-  const color = computed(() => {
-    return isHover.value ? hoverColor.value : isActive.value ? activeColor.value : props.color;
-  });
-  const activeBgColor = computed(() => props.activeBgColor ? props.activeBgColor : props.bgColor);
-  const hoverBgColor = computed(() => props.hoverBgColor ? props.hoverBgColor : props.bgColor);
-  const bgColor = computed(() => {
-    return isHover.value ? hoverBgColor.value : isActive.value ? activeBgColor.value : props.bgColor;
-  });
-  const colorClasses = computed(() => {
-    if (isHover.value || isActive.value || isDisabled.value) return [];
-    const classes = [];
-    const bgVal = bgColor.value;
-    const fgVal = color.value;
-    if (bgVal && isUtilityIntent(bgVal)) {
-      classes.push(`origam--bg-${bgVal}`);
-    }
-    if (fgVal && isUtilityIntent(fgVal)) {
-      classes.push(`origam--color-${fgVal}`);
-    } else if (!fgVal && bgVal && isUtilityIntent(bgVal)) {
-    }
-    return classes;
-  });
-  const colorStyles = computed(() => {
-    void isDisabled.value;
-    const sameIntentBg = (a, b) => {
-      return !!a && !!b && a === b && isIntent(a);
-    };
-    const sameIntentFg = (a, b) => {
-      return !!a && !!b && a === b && isIntent(a);
-    };
-    const bgRole = isHover.value && (!props.hoverBgColor || sameIntentBg(props.hoverBgColor, props.bgColor)) ? "hover" : isActive.value && (!props.activeBgColor || sameIntentBg(props.activeBgColor, props.bgColor)) ? "active" : "default";
-    const _fgRole = isHover.value && (!props.hoverColor || sameIntentFg(props.hoverColor, props.color)) ? "hover" : isActive.value && (!props.activeColor || sameIntentFg(props.activeColor, props.color)) ? "active" : "default";
-    void _fgRole;
-    let bgDecl = null;
-    let fgDecl = null;
-    let bgIntentFg = null;
-    let bgIsGradient = false;
-    let clipText = false;
-    if (bgColor.value && isGradient(bgColor.value)) {
-      const grad = resolveGradient(bgColor.value);
-      if (grad) {
-        bgDecl = `background-image: ${grad}`;
-        bgIsGradient = true;
-      }
-    } else if (bgColor.value && isIntent(bgColor.value)) {
-      const m = tokenStylesForIntent(bgColor.value, bgRole);
-      bgDecl = `background-color: ${m["background-color"]}`;
-      bgIntentFg = tokenStylesForIntent(bgColor.value, "default").color;
-    } else if (bgColor.value === "transparent") {
-      bgDecl = `background-color: ${rawBgExprWithState("transparent", bgRole)}`;
-    } else if (bgColor.value && typeof bgColor.value === "string" && isCssColor(bgColor.value)) {
-      warnLegacyColor("bgColor", bgColor.value);
-      bgDecl = `background-color: ${rawBgExprWithState(bgColor.value, bgRole)}`;
-    }
-    if (color.value && isGradient(color.value)) {
-      const grad = resolveGradient(color.value);
-      if (grad) {
-        fgDecl = "color: transparent";
-        bgDecl = `background-image: ${grad}`;
-        clipText = true;
-      }
-    } else if (color.value && isIntent(color.value)) {
-      if (bgIntentFg && bgColor.value && isIntent(bgColor.value) && color.value === bgColor.value) {
-        fgDecl = `color: ${bgIntentFg}`;
-      } else {
-        fgDecl = `color: ${tokenForegroundForIntent(color.value)}`;
-      }
-    } else if (color.value && typeof color.value === "string" && isCssColor(color.value)) {
-      if (color.value !== "transparent") warnLegacyColor("color", color.value);
-      fgDecl = `color: ${color.value}`;
-    } else if (!color.value && bgIntentFg && !bgIsGradient) {
-      fgDecl = `color: ${bgIntentFg}`;
-    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && isParsableColor(bgColor.value)) {
-      const parsed = parseColor(bgColor.value);
-      if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${getForeground(parsed)}`;
-      }
-    }
-    const styles = [];
-    if (bgDecl) styles.push(bgDecl);
-    if (fgDecl) styles.push(fgDecl);
-    if (clipText) {
-      styles.push("background-clip: text");
-      styles.push("-webkit-background-clip: text");
-    }
-    return styles;
-  });
-  return { colorClasses, colorStyles, color, bgColor };
-}