@uxf/styles 2.0.0 → 2.1.0

package/README.md

@@ -4,6 +4,7 @@
 
 ### `shade` and `tint`
 
+- extend features of `color2k` library
 - returns HEX string with mix of provided color and specified amount of black (`shade`) or white (`tint`)
 
 ```ts
@@ -122,6 +123,25 @@ const example1 = rem(320) /* returns "20rem" */
 const example2 = rem(320, 10) /* returns "32rem" */
 ```
 
+### `emToPx` and `remToPx`
+
+- parse em or rem units to pixels (as number) by specified base (defaults `16`)
+
+```tsx
+import { emToPx } from "@uxf/styles/units/em-to-px";
+
+const example1 = emToPx("20em") /* 320 */
+const example2 = emToPx("20em", 10) /* 200 */
+const example3 = emToPx("20rem", 10) /* "20rem" */
+```
+```tsx
+import { remToPx } from "@uxf/styles/units/rem-to-px";
+
+const example1 = remToPx("20rem") /* 320 */
+const example2 = remToPx("20rem", 10) /* 200 */
+const example3 = remToPx("20%", 10) /* "20%" */
+```
+
 ### `formatCssValue`
 
 - returns normalized css value: pass string as string or input to rem or zero as string or optionally forced input as string

package/color/shade.d.ts

@@ -1,2 +1 @@
-import { ColorInput } from "tinycolor2";
-export declare const shade: (color: ColorInput, amount: number) => import("tinycolor2").Instance;
+export declare const shade: (color: string, amount: number) => string;

package/color/shade.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.shade = void 0;
-var tinycolor2_1 = require("tinycolor2");
-var shade = function (color, amount) { return (0, tinycolor2_1.mix)(color, "#000", amount); };
+var color2k_1 = require("color2k");
+var shade = function (color, amount) { return (0, color2k_1.mix)(color, "#000", amount); };
 exports.shade = shade;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvY29sb3Ivc2hhZGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEseUNBQTZDO0FBRXRDLElBQU0sS0FBSyxHQUFHLFVBQUMsS0FBaUIsRUFBRSxNQUFjLElBQUssT0FBQSxJQUFBLGdCQUFHLEVBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLENBQUMsRUFBMUIsQ0FBMEIsQ0FBQztBQUExRSxRQUFBLEtBQUssU0FBcUUifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvY29sb3Ivc2hhZGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsbUNBQThCO0FBRXZCLElBQU0sS0FBSyxHQUFHLFVBQUMsS0FBYSxFQUFFLE1BQWMsSUFBSyxPQUFBLElBQUEsYUFBRyxFQUFDLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxDQUFDLEVBQTFCLENBQTBCLENBQUM7QUFBdEUsUUFBQSxLQUFLLFNBQWlFIn0=

package/color/tint.d.ts

@@ -1,2 +1 @@
-import { ColorInput } from "tinycolor2";
-export declare const tint: (color: ColorInput, amount: number) => import("tinycolor2").Instance;
+export declare const tint: (color: string, amount: number) => string;

package/color/tint.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tint = void 0;
-var tinycolor2_1 = require("tinycolor2");
-var tint = function (color, amount) { return (0, tinycolor2_1.mix)(color, "#fff", amount); };
+var color2k_1 = require("color2k");
+var tint = function (color, amount) { return (0, color2k_1.mix)(color, "#fff", amount); };
 exports.tint = tint;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGludC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb2xvci90aW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLHlDQUE2QztBQUV0QyxJQUFNLElBQUksR0FBRyxVQUFDLEtBQWlCLEVBQUUsTUFBYyxJQUFLLE9BQUEsSUFBQSxnQkFBRyxFQUFDLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxDQUFDLEVBQTFCLENBQTBCLENBQUM7QUFBekUsUUFBQSxJQUFJLFFBQXFFIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGludC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb2xvci90aW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLG1DQUE4QjtBQUV2QixJQUFNLElBQUksR0FBRyxVQUFDLEtBQWEsRUFBRSxNQUFjLElBQUssT0FBQSxJQUFBLGFBQUcsRUFBQyxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sQ0FBQyxFQUExQixDQUEwQixDQUFDO0FBQXJFLFFBQUEsSUFBSSxRQUFpRSJ9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/styles",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -20,26 +20,25 @@
     "url": "git+https://gitlab.com/uxf-npm/styles.git"
   },
   "devDependencies": {
-    "@types/node": "^18.8.2",
+    "@types/node": "^18.11.18",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
-    "@types/tinycolor2": "^1.4.3",
-    "@uxf/core": "^3.1.0",
+    "@uxf/core": "^4.1.0",
     "@uxf/eslint-config": "^1.2.3",
     "csstype": "^3.1.1",
-    "eslint": "^8.8.0",
-    "parcel": "^2.7.0",
-    "prettier": "^2.7.1",
+    "color2k": "^2.0.0",
+    "eslint": "^8.31.0",
+    "parcel": "^2.8.2",
+    "prettier": "^2.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "tinycolor2": "^1.4.2",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
-    "@uxf/core": "^3.1.0",
+    "@uxf/core": "^4.1.0",
+    "color2k": "^2.0.0",
     "react": "^16 || ^17 || ^18",
-    "react-dom": "^16 || ^17 || ^18",
-    "tinycolor2": "^1.4.2"
+    "react-dom": "^16 || ^17 || ^18"
   },
   "author": "",
   "license": "ISC",

package/types/index.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
-export declare type CssTimeUnits = "ms" | "s";
-export declare type CssAbsoluteLengthsUnits = "cm" | "mm" | "in" | "px" | "pt" | "pc" | "deg" | "rad";
-export declare type CssRelativeLengthsUnits = "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax" | "%";
-export declare type CssUnits = CssTimeUnits | CssAbsoluteLengthsUnits | CssRelativeLengthsUnits;
-export declare type TransitionProperty = keyof CSSProperties;
-export declare type TransitionProperties = TransitionProperty | TransitionProperty[];
+export type CssTimeUnits = "ms" | "s";
+export type CssAbsoluteLengthsUnits = "cm" | "mm" | "in" | "px" | "pt" | "pc" | "deg" | "rad";
+export type CssRelativeLengthsUnits = "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax" | "%";
+export type CssUnits = CssTimeUnits | CssAbsoluteLengthsUnits | CssRelativeLengthsUnits;
+export type TransitionProperty = keyof CSSProperties;
+export type TransitionProperties = TransitionProperty | TransitionProperty[];

package/units/em-to-px.d.ts

@@ -0,0 +1 @@
+export declare function emToPx(value: string, size?: number): string | number;

package/units/em-to-px.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emToPx = void 0;
+function emToPx(value, size) {
+    if (size === void 0) { size = 16; }
+    if (/\d*\.?\d+em/.test(value)) {
+        return parseFloat(value) * size;
+    }
+    return value;
+}
+exports.emToPx = emToPx;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW0tdG8tcHguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdW5pdHMvZW0tdG8tcHgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsU0FBZ0IsTUFBTSxDQUFDLEtBQWEsRUFBRSxJQUFTO0lBQVQscUJBQUEsRUFBQSxTQUFTO0lBQzNDLElBQUksYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRTtRQUMzQixPQUFPLFVBQVUsQ0FBQyxLQUFLLENBQUMsR0FBRyxJQUFJLENBQUM7S0FDbkM7SUFDRCxPQUFPLEtBQUssQ0FBQztBQUNqQixDQUFDO0FBTEQsd0JBS0MifQ==

package/units/rem-to-px.d.ts

@@ -0,0 +1 @@
+export declare function remToPx(value: string, size?: number): string | number;

package/units/rem-to-px.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remToPx = void 0;
+function remToPx(value, size) {
+    if (size === void 0) { size = 16; }
+    if (/\d*\.?\d+rem/.test(value)) {
+        return parseFloat(value) * size;
+    }
+    return value;
+}
+exports.remToPx = remToPx;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVtLXRvLXB4LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3VuaXRzL3JlbS10by1weC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSxTQUFnQixPQUFPLENBQUMsS0FBYSxFQUFFLElBQVM7SUFBVCxxQkFBQSxFQUFBLFNBQVM7SUFDNUMsSUFBSSxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFO1FBQzVCLE9BQU8sVUFBVSxDQUFDLEtBQUssQ0FBQyxHQUFHLElBQUksQ0FBQztLQUNuQztJQUNELE9BQU8sS0FBSyxDQUFDO0FBQ2pCLENBQUM7QUFMRCwwQkFLQyJ9