@rovula/ui 0.0.19 → 0.0.21

package/dist/stories/ColorGroupPreview.js

@@ -0,0 +1,478 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ColorPreview from "./ColorPreview";
+export default function ColorGroupPreview() {
+    var style = getComputedStyle(document.body);
+    var colorGroups = {
+        "Main Colors": {
+            prefix: "--main-color",
+            variable: [
+                "--main-color-primary",
+                "--main-color-secondary",
+                "--main-color-tertiary",
+            ],
+        },
+        "Text Colors": {
+            prefix: "--text",
+            variable: [
+                "--text-dark",
+                "--text-medium",
+                "--text-light",
+                "--text-grey-dark",
+                "--text-grey-medium",
+                "--text-grey-light",
+                "--text-white",
+            ],
+        },
+        // "State Colors": {
+        //   prefix: "--state-color",
+        //   variable: [
+        //     "--state-color-primary-primary-default",
+        //     "--state-color-primary-primary-hover",
+        //     "--state-color-primary-primary-stroke",
+        //     "--state-color-primary-primary-hover-bg",
+        //     "--state-color-primary-primary-pressed",
+        //     "--state-color-primary-primary-active",
+        //     "--state-color-secondary-secondary-default",
+        //     "--state-color-secondary-secondary-hover",
+        //     "--state-color-secondary-secondary-stroke",
+        //     "--state-color-secondary-secondary-hover-bg",
+        //     "--state-color-secondary-secondary-pressed",
+        //     "--state-color-secondary-secondary-active",
+        //     "--state-color-tertiery-tertiary-default",
+        //     "--state-color-tertiery-tertiary-hover",
+        //     "--state-color-tertiery-tertiary-stroke",
+        //     "--state-color-tertiery-tertiary-hover-bg",
+        //     "--state-color-tertiery-tertiary-pressed",
+        //     "--state-color-tertiery-tertiery-active",
+        //     "--state-color-info-info-default",
+        //     "--state-color-info-info-hover",
+        //     "--state-color-info-info-stroke",
+        //     "--state-color-info-info-hover-bg",
+        //     "--state-color-info-info-pressed",
+        //     "--state-color-info-info-active",
+        //     "--state-color-success-success-default",
+        //     "--state-color-success-success-hover",
+        //     "--state-color-success-success-stroke",
+        //     "--state-color-success-success-hover-bg",
+        //     "--state-color-success-success-pressed",
+        //     "--state-color-success-success-active",
+        //     "--state-color-warning-warning-default",
+        //     "--state-color-warning-warning-hover",
+        //     "--state-color-warning-warning-stroke",
+        //     "--state-color-warning-warning-hover-bg",
+        //     "--state-color-warning-warning-pressed",
+        //     "--state-color-warning-warning-active",
+        //     "--state-color-error-error-default",
+        //     "--state-color-error-error-hover",
+        //     "--state-color-error-error-stroke",
+        //     "--state-color-error-error-hover-bg",
+        //     "--state-color-error-error-pressed",
+        //     "--state-color-error-error-active",
+        //   ],
+        // },
+        "Primary Colors": {
+            prefix: "--primary-ramps-primary",
+            variable: [
+                "--primary-ramps-primary-5",
+                "--primary-ramps-primary-10",
+                "--primary-ramps-primary-20",
+                "--primary-ramps-primary-30",
+                "--primary-ramps-primary-40",
+                "--primary-ramps-primary-50",
+                "--primary-ramps-primary-60",
+                "--primary-ramps-primary-70",
+                "--primary-ramps-primary-80",
+                "--primary-ramps-primary-90",
+                "--primary-ramps-primary-100",
+                "--primary-ramps-primary-110",
+                "--primary-ramps-primary-120",
+                "--primary-ramps-primary-130",
+                "--primary-ramps-primary-140",
+                "--primary-ramps-primary-150",
+            ],
+        },
+        "Primary Action State": {
+            prefix: "--state-color",
+            variable: [
+                "--state-color-primary-primary-default",
+                "--state-color-primary-primary-hover",
+                "--state-color-primary-primary-stroke",
+                "--state-color-primary-primary-hover-bg",
+                "--state-color-primary-primary-pressed",
+                "--state-color-primary-primary-active",
+            ],
+        },
+        "Secondary Colors": {
+            prefix: "--secondary-ramps-secondary",
+            variable: [
+                "--secondary-ramps-secondary-5",
+                "--secondary-ramps-secondary-10",
+                "--secondary-ramps-secondary-20",
+                "--secondary-ramps-secondary-30",
+                "--secondary-ramps-secondary-40",
+                "--secondary-ramps-secondary-50",
+                "--secondary-ramps-secondary-60",
+                "--secondary-ramps-secondary-70",
+                "--secondary-ramps-secondary-80",
+                "--secondary-ramps-secondary-90",
+                "--secondary-ramps-secondary-100",
+                "--secondary-ramps-secondary-110",
+                "--secondary-ramps-secondary-120",
+                "--secondary-ramps-secondary-130",
+                "--secondary-ramps-secondary-140",
+                "--secondary-ramps-secondary-150",
+            ],
+        },
+        "Secondary Action State": {
+            prefix: "--state-color",
+            variable: [
+                "--state-color-secondary-secondary-default",
+                "--state-color-secondary-secondary-hover",
+                "--state-color-secondary-secondary-stroke",
+                "--state-color-secondary-secondary-hover-bg",
+                "--state-color-secondary-secondary-pressed",
+                "--state-color-secondary-secondary-active",
+            ],
+        },
+        "Tertiary Colors": {
+            prefix: "--tertiary-ramps-tertiary",
+            variable: [
+                "--tertiary-ramps-tertiary-5",
+                "--tertiary-ramps-tertiary-10",
+                "--tertiary-ramps-tertiary-20",
+                "--tertiary-ramps-tertiary-30",
+                "--tertiary-ramps-tertiary-40",
+                "--tertiary-ramps-tertiary-50",
+                "--tertiary-ramps-tertiary-60",
+                "--tertiary-ramps-tertiary-70",
+                "--tertiary-ramps-tertiary-80",
+                "--tertiary-ramps-tertiary-90",
+                "--tertiary-ramps-tertiary-100",
+                "--tertiary-ramps-tertiary-110",
+                "--tertiary-ramps-tertiary-120",
+                "--tertiary-ramps-tertiary-130",
+                "--tertiary-ramps-tertiary-140",
+                "--tertiary-ramps-tertiary-150",
+            ],
+        },
+        "Tertiary Action State": {
+            prefix: "--state-color",
+            variable: [
+                "--state-color-tertiery-tertiary-default",
+                "--state-color-tertiery-tertiary-hover",
+                "--state-color-tertiery-tertiary-stroke",
+                "--state-color-tertiery-tertiary-hover-bg",
+                "--state-color-tertiery-tertiary-pressed",
+                "--state-color-tertiery-tertiery-active",
+            ],
+        },
+        "Grey Colors": {
+            prefix: "--grey-grey",
+            variable: [
+                "--grey-grey-5",
+                "--grey-grey-10",
+                "--grey-grey-20",
+                "--grey-grey-30",
+                "--grey-grey-40",
+                "--grey-grey-50",
+                "--grey-grey-60",
+                "--grey-grey-70",
+                "--grey-grey-80",
+                "--grey-grey-90",
+                "--grey-grey-100",
+                "--grey-grey-110",
+                "--grey-grey-120",
+                "--grey-grey-130",
+                "--grey-grey-140",
+                "--grey-grey-150",
+            ],
+        },
+        "Grey 2 Colors": {
+            prefix: "--grey2-grey2",
+            variable: [
+                "--grey2-grey2-50",
+                "--grey2-grey2-100",
+                "--grey2-grey2-200",
+                "--grey2-grey2-300",
+                "--grey2-grey2-400",
+                "--grey2-grey2-500",
+                "--grey2-grey2-600",
+                "--grey2-grey2-700",
+                "--grey2-grey2-800",
+                "--grey2-grey2-900",
+                "--grey2-grey2-950",
+            ],
+        },
+        "Info Colors": {
+            prefix: "--info-info",
+            variable: [
+                "--info-info-50",
+                "--info-info-100",
+                "--info-info-200",
+                "--info-info-300",
+                "--info-info-400",
+                "--info-info-500",
+                "--info-info-600",
+                "--info-info-700",
+                "--info-info-800",
+                "--info-info-900",
+                "--info-info-950",
+            ],
+        },
+        "Info Action State": {
+            prefix: "--state-color",
+            variable: [
+                "--state-color-info-info-default",
+                "--state-color-info-info-hover",
+                "--state-color-info-info-stroke",
+                "--state-color-info-info-hover-bg",
+                "--state-color-info-info-pressed",
+                "--state-color-info-info-active",
+            ],
+        },
+        "Success Colors": {
+            prefix: "--success-success",
+            variable: [
+                "--success-success-50",
+                "--success-success-100",
+                "--success-success-200",
+                "--success-success-300",
+                "--success-success-400",
+                "--success-success-500",
+                "--success-success-600",
+                "--success-success-700",
+                "--success-success-800",
+                "--success-success-900",
+                "--success-success-950",
+            ],
+        },
+        "Success Action State": {
+            prefix: "--state-color",
+            variable: [
+                "--state-color-success-success-default",
+                "--state-color-success-success-hover",
+                "--state-color-success-success-stroke",
+                "--state-color-success-success-hover-bg",
+                "--state-color-success-success-pressed",
+                "--state-color-success-success-active",
+            ],
+        },
+        "Warning Colors": {
+            prefix: "--warning-warning",
+            variable: [
+                "--warning-warning-50",
+                "--warning-warning-100",
+                "--warning-warning-200",
+                "--warning-warning-300",
+                "--warning-warning-400",
+                "--warning-warning-500",
+                "--warning-warning-600",
+                "--warning-warning-700",
+                "--warning-warning-800",
+                "--warning-warning-900",
+                "--warning-warning-950",
+            ],
+        },
+        "Warning Action State": {
+            prefix: "--state-color",
+            variable: [
+                "--state-color-warning-warning-default",
+                "--state-color-warning-warning-hover",
+                "--state-color-warning-warning-stroke",
+                "--state-color-warning-warning-hover-bg",
+                "--state-color-warning-warning-pressed",
+                "--state-color-warning-warning-active",
+            ],
+        },
+        "Error Colors": {
+            prefix: "--error-error",
+            variable: [
+                "--error-error-50",
+                "--error-error-100",
+                "--error-error-200",
+                "--error-error-300",
+                "--error-error-400",
+                "--error-error-500",
+                "--error-error-600",
+                "--error-error-700",
+                "--error-error-800",
+                "--error-error-900",
+                "--error-error-950",
+            ],
+        },
+        "Error Action State": {
+            prefix: "--state-color",
+            variable: [
+                "--state-color-error-error-default",
+                "--state-color-error-error-hover",
+                "--state-color-error-error-stroke",
+                "--state-color-error-error-hover-bg",
+                "--state-color-error-error-pressed",
+                "--state-color-error-error-active",
+            ],
+        },
+        "Main Transparency Primary": {
+            prefix: "--main-transparency",
+            variable: [
+                "--main-transparency-primary-8",
+                "--main-transparency-primary-12",
+                "--main-transparency-primary-16",
+                "--main-transparency-primary-24",
+                "--main-transparency-primary-32",
+                "--main-transparency-primary-48",
+            ],
+        },
+        "Main Transparency Secondary": {
+            prefix: "--main-transparency",
+            variable: [
+                "--main-transparency-secondary-8",
+                "--main-transparency-secondary-12",
+                "--main-transparency-secondary-16",
+                "--main-transparency-secondary-24",
+                "--main-transparency-secondary-32",
+                "--main-transparency-secondary-48",
+            ],
+        },
+        "Main Transparency Tertiary": {
+            prefix: "--main-transparency",
+            variable: [
+                "--main-transparency-tertiary-8",
+                "--main-transparency-tertiary-12",
+                "--main-transparency-tertiary-16",
+                "--main-transparency-tertiary-24",
+                "--main-transparency-tertiary-32",
+                "--main-transparency-tertiary-48",
+            ],
+        },
+        "Other Transparency Info": {
+            prefix: "--other-transparency",
+            variable: [
+                "--other-transparency-info-8",
+                "--other-transparency-info-12",
+                "--other-transparency-info-16",
+                "--other-transparency-info-24",
+                "--other-transparency-info-32",
+                "--other-transparency-info-48",
+            ],
+        },
+        "Other Transparency Success": {
+            prefix: "--other-transparency",
+            variable: [
+                "--other-transparency-success-8",
+                "--other-transparency-success-12",
+                "--other-transparency-success-16",
+                "--other-transparency-success-24",
+                "--other-transparency-success-32",
+                "--other-transparency-success-48",
+            ],
+        },
+        "Other Transparency Warning": {
+            prefix: "--other-transparency",
+            variable: [
+                "--other-transparency-warning-8",
+                "--other-transparency-warning-12",
+                "--other-transparency-warning-16",
+                "--other-transparency-warning-24",
+                "--other-transparency-warning-32",
+                "--other-transparency-warning-48",
+            ],
+        },
+        "Other Transparency Error": {
+            prefix: "--other-transparency",
+            variable: [
+                "--other-transparency-error-8",
+                "--other-transparency-error-12",
+                "--other-transparency-error-16",
+                "--other-transparency-error-24",
+                "--other-transparency-error-32",
+                "--other-transparency-error-48",
+            ],
+        },
+        "Other Transparency White": {
+            prefix: "--other-transparency",
+            variable: [
+                "--other-transparency-white-8",
+                "--other-transparency-white-12",
+                "--other-transparency-white-16",
+                "--other-transparency-white-24",
+                "--other-transparency-white-32",
+                "--other-transparency-white-48",
+            ],
+        },
+        "Other Transparency Grey": {
+            prefix: "--other-transparency",
+            variable: [
+                "--other-transparency-grey-8",
+                "--other-transparency-grey-12",
+                "--other-transparency-grey-16",
+                "--other-transparency-grey-24",
+                "--other-transparency-grey-32",
+                "--other-transparency-grey-48",
+            ],
+        },
+        "Other Transparency Grey 2": {
+            prefix: "--other-transparency",
+            variable: [
+                "--other-transparency-grey2-8",
+                "--other-transparency-grey2-12",
+                "--other-transparency-grey2-16",
+                "--other-transparency-grey2-24",
+                "--other-transparency-grey2-32",
+                "--other-transparency-grey2-48",
+            ],
+        },
+        "Other Transparency Black": {
+            prefix: "--other-transparency",
+            variable: [
+                "--other-transparency-black-8",
+                "--other-transparency-black-12",
+                "--other-transparency-black-16",
+                "--other-transparency-black-24",
+                "--other-transparency-black-32",
+                "--other-transparency-black-48",
+            ],
+        },
+        Other: {
+            prefix: "--other",
+            variable: [
+                "--other-bg",
+                "--other-bg2",
+                "--other-popup",
+                "--other-popup-hightlight",
+                "--other-popup-curtain",
+            ],
+        },
+        Disabled: {
+            prefix: "--state-color-disable",
+            variable: [
+                "--state-color-disable-disable-solid",
+                "--state-color-disable-disable-outline",
+            ],
+        },
+        "Input Colors": {
+            prefix: "--input-color",
+            variable: [
+                "--input-color-default-text",
+                "--input-color-default-stroke",
+                "--input-color-filled-text",
+                "--input-color-active-stroke",
+                "--input-color-disable-text",
+                "--input-color-disable-stroke",
+                "--input-color-disable-bg",
+                "--input-color-label-bg",
+                "--input-color-error",
+            ],
+        },
+        Common: {
+            prefix: "--common",
+            variable: ["--common-white", "--common-black"],
+        },
+    };
+    return (_jsx("div", { className: "flex flex-col gap-20", children: Object.entries(colorGroups).map(function (_a) {
+            var groupName = _a[0], colorVariables = _a[1];
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h3", { className: "text-black m-0", children: groupName }), _jsx("div", { className: "flex flex-row flex-wrap gap-3", children: colorVariables.variable.map(function (colorVariable) {
+                            var _a;
+                            return (_jsx(ColorPreview, { colorName: (_a = colorVariable.split("-").reverse()) === null || _a === void 0 ? void 0 : _a[0], colorCode: style.getPropertyValue(colorVariable).trim(), isSmall: colorVariables.variable.length > 7 }, colorVariable));
+                        }) })] }, groupName));
+        }) }));
+}

package/dist/stories/ColorPreview.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ColorPreview(_a) {
+    var colorName = _a.colorName, colorCode = _a.colorCode, isSmall = _a.isSmall;
+    if (isSmall) {
+        return (_jsxs("div", { className: " flex-1 h-[120px] flex flex-col rounded-xl shadow-lg overflow-hidden", children: [_jsx("div", { className: "flex flex-1", style: { backgroundColor: colorCode } }), _jsx("div", { className: "bg-white p-3 px-3  flex flex-col justify-center items-start", children: _jsx("h3", { className: "text-black leading-3 p-0", children: colorName }) })] }));
+    }
+    return (_jsxs("div", { className: " flex-1 h-[160px] flex flex-col rounded-xl shadow-lg overflow-hidden", children: [_jsx("div", { className: "flex flex-1", style: { backgroundColor: colorCode } }), _jsxs("div", { className: "bg-white p-3 px-6  flex flex-col justify-center items-start", children: [_jsx("h3", { className: "text-black leading-3 p-0 text-error", children: colorName }), _jsx("div", { className: "text-gray-600 leading-1 p-0 m-0", style: { fontSize: "8px" }, children: colorCode })] })] }));
+}