@rovula/ui 0.0.19 → 0.0.21

package/src/stories/ColorGroupPreview.tsx

@@ -0,0 +1,494 @@
+import React from "react";
+import ColorPreview from "./ColorPreview";
+
+export default function ColorGroupPreview() {
+  const style = getComputedStyle(document.body);
+
+  const 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 (
+    <div className="flex flex-col gap-20">
+      {Object.entries(colorGroups).map(([groupName, colorVariables]) => (
+        <div key={groupName} className="flex flex-col">
+          <h3 className="text-black m-0">{groupName}</h3>
+          <div className="flex flex-row flex-wrap gap-3">
+            {colorVariables.variable.map((colorVariable) => (
+              <ColorPreview
+                key={colorVariable}
+                colorName={colorVariable.split("-").reverse()?.[0]}
+                colorCode={style.getPropertyValue(colorVariable).trim()}
+                isSmall={colorVariables.variable.length > 7}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/stories/ColorPreview.tsx

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

package/src/stories/Colors.mdx

@@ -0,0 +1,14 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import ColorGroupPreview from './ColorGroupPreview'
+
+<Meta title="Guidelines/Colors" />
+
+# Colors
+
+<br />
+
+
+<div className="flex flex-row gap-2 w-container">
+  <ColorGroupPreview />
+</div>
+