- initial commit

src/Easings/index.ts

@@ -0,0 +1,92 @@
+const Easings = {
+  quart: (duration: number, delay: number) =>
+    easing(
+      [0.895, 0.03, 0.685, 0.22],
+      [0.165, 0.84, 0.44, 1],
+      [0.77, 0, 0.175, 1],
+      duration,
+      delay
+    ),
+  circ: (duration: number, delay: number) =>
+    easing(
+      [0.6, 0.04, 0.98, 0.335],
+      [0.075, 0.82, 0.165, 1],
+      [0.785, 0.135, 0.15, 0.86],
+      duration,
+      delay
+    ),
+  quint: (duration: number, delay: number) =>
+    easing(
+      [0.755, 0.05, 0.855, 0.06],
+      [0.23, 1, 0.32, 1],
+      [0.86, 0, 0.07, 1],
+      duration,
+      delay
+    ),
+  sine: (duration: number, delay: number) =>
+    easing(
+      [0.47, 0, 0.745, 0.715],
+      [0.39, 0.575, 0.565, 1],
+      [0.445, 0.05, 0.55, 0.95],
+      duration,
+      delay
+    ),
+  expo: (duration: number, delay: number) =>
+    easing(
+      [0.95, 0.05, 0.795, 0.035],
+      [0.19, 1, 0.22, 1],
+      [1, 0, 0, 1],
+      duration,
+      delay
+    ),
+  cubic: (duration: number, delay: number) =>
+    easing(
+      [0.55, 0.055, 0.675, 0.19],
+      [0.215, 0.61, 0.355, 1],
+      [0.645, 0.045, 0.355, 1],
+      duration,
+      delay
+    ),
+};
+
+const defaultCubicTransition = {
+  type: "tween",
+  duration: 0.7,
+};
+
+type CubicBezierEase = [number, number, number, number];
+
+const easing = (
+  easeIn: CubicBezierEase,
+  easeOut: CubicBezierEase,
+  easeInOut: CubicBezierEase,
+  duration: number,
+  delay: number
+) => {
+  const durationObj = duration ? { duration: duration } : {};
+
+  const delayObj = delay ? { delay: delay } : {};
+
+  return {
+    in: {
+      ...defaultCubicTransition,
+      ease: easeIn,
+      ...durationObj,
+      ...delayObj,
+    },
+    out: {
+      ...defaultCubicTransition,
+      ease: easeOut,
+      ...durationObj,
+      ...delayObj,
+    },
+    inOut: {
+      ...defaultCubicTransition,
+      ease: easeInOut,
+      ...durationObj,
+      ...delayObj,
+    },
+  };
+};
+
+export default Easings;

src/Utils/index.ts

@@ -0,0 +1,47 @@
+import { fromString } from "css-color-converter";
+
+const countDecimals = (value) => {
+  if (Math.floor(value) === value) return 0;
+  return value.toString().split(".")[1].length || 0;
+};
+
+const generateColorShades = (
+  colors: { [key: string]: string },
+  options: {
+    keyList?: string[];
+    opacities?: number[];
+    outputType: "obj" | "cssVars";
+  }
+) => {
+  const colorKeys = options.keyList
+    ? Object.keys(colors)
+    : Object.keys(colors).filter((key) => options.keyList?.includes(key));
+
+  const generatedColorShadesArr: object[] = [];
+
+  colorKeys.forEach((key) => {
+    const colorString = colors[key];
+
+    const opacities = options.opacities
+      ? options.opacities
+      : [0.1, 0.25, 0.5, 0.75];
+
+    opacities.forEach((opacity) => {
+      const rgba = fromString(colorString).toRgbaArray();
+      generatedColorShadesArr.push({
+        [countDecimals(opacity) === 1
+          ? `${key}-${(opacity + "").split(".")[1]}0`
+          : `${key}-${
+              (opacity + "").split(".")[1]
+            }`]: `rgba(${rgba[0]},${rgba[1]},${rgba[2]},${opacity})`,
+      });
+    });
+  });
+
+  const generatedColorShades = Object.assign({}, generatedColorShadesArr);
+
+  return generatedColorShades;
+};
+
+export { generateColorShades };
+export default { generateColorShades };

src/unom-style.ts

@@ -0,0 +1,13 @@
+import Utils from "./Utils";
+import ease from "./Easings";
+
+declare module "unom-style";
+
+export {
+  ease,
+  /**
+   * @public
+   * Collection of Utils
+   */
+  Utils,
+};