@rovula/ui 0.0.19 → 0.0.21

package/src/_theme/presets/colors copy.js

@@ -0,0 +1,229 @@
+const { DEFAULTS } = require("@rollup/plugin-node-resolve");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        ring: "hsl(var(--ring))",
+        background: "rgb(var(--background) / <alpha-value>)",
+        foreground: "rgb(var(--foreground) / <alpha-value>)",
+        // Palette colors
+        themes: {
+          50: "rgb(var(--themes-50) / <alpha-value>)",
+          100: "rgb(var(--themes-100) / <alpha-value>)",
+          200: "rgb(var(--themes-200) / <alpha-value>)",
+          300: "rgb(var(--themes-300) / <alpha-value>)",
+          400: "rgb(var(--themes-400) / <alpha-value>)",
+          500: "rgb(var(--themes-500) / <alpha-value>)",
+          600: "rgb(var(--themes-600) / <alpha-value>)",
+          700: "rgb(var(--themes-700) / <alpha-value>)",
+          800: "rgb(var(--themes-800) / <alpha-value>)",
+          900: "rgb(var(--themes-900) / <alpha-value>)",
+          DEFAULT: "rgb(var(--themes-default) / <alpha-value>)",
+          foreground: "rgb(var(--themes-foreground) / <alpha-value>)",
+        },
+        primary: {
+          5: "rgb(var(--primary-5) / <alpha-value>)",
+          10: "rgb(var(--primary-10) / <alpha-value>)",
+          20: "rgb(var(--primary-20) / <alpha-value>)",
+          30: "rgb(var(--primary-30) / <alpha-value>)",
+          40: "rgb(var(--primary-40) / <alpha-value>)",
+          50: "rgb(var(--primary-50) / <alpha-value>)",
+          60: "rgb(var(--primary-60) / <alpha-value>)",
+          70: "rgb(var(--primary-70) / <alpha-value>)",
+          80: "rgb(var(--primary-80) / <alpha-value>)",
+          90: "rgb(var(--primary-90) / <alpha-value>)",
+          100: "rgb(var(--primary-100) / <alpha-value>)",
+          110: "rgb(var(--primary-110) / <alpha-value>)",
+          120: "rgb(var(--primary-120) / <alpha-value>)",
+          130: "rgb(var(--primary-130) / <alpha-value>)",
+          140: "rgb(var(--primary-140) / <alpha-value>)",
+          150: "rgb(var(--primary-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--primary-default) / <alpha-value>)",
+          foreground: "rgb(var(--primary-foreground) / <alpha-value>)",
+        },
+        secondary: {
+          5: "rgb(var(--secondary-5) / <alpha-value>)",
+          10: "rgb(var(--secondary-10) / <alpha-value>)",
+          20: "rgb(var(--secondary-20) / <alpha-value>)",
+          30: "rgb(var(--secondary-30) / <alpha-value>)",
+          40: "rgb(var(--secondary-40) / <alpha-value>)",
+          50: "rgb(var(--secondary-50) / <alpha-value>)",
+          60: "rgb(var(--secondary-60) / <alpha-value>)",
+          70: "rgb(var(--secondary-70) / <alpha-value>)",
+          80: "rgb(var(--secondary-80) / <alpha-value>)",
+          90: "rgb(var(--secondary-90) / <alpha-value>)",
+          100: "rgb(var(--secondary-100) / <alpha-value>)",
+          110: "rgb(var(--secondary-110) / <alpha-value>)",
+          120: "rgb(var(--secondary-120) / <alpha-value>)",
+          130: "rgb(var(--secondary-130) / <alpha-value>)",
+          140: "rgb(var(--secondary-140) / <alpha-value>)",
+          150: "rgb(var(--secondary-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--secondary-default) / <alpha-value>)",
+          foreground: "rgb(var(--secondary-foreground) / <alpha-value>)",
+        },
+        tertiary: {
+          5: "rgb(var(--tertiary-5) / <alpha-value>)",
+          10: "rgb(var(--tertiary-10) / <alpha-value>)",
+          20: "rgb(var(--tertiary-20) / <alpha-value>)",
+          30: "rgb(var(--tertiary-30) / <alpha-value>)",
+          40: "rgb(var(--tertiary-40) / <alpha-value>)",
+          50: "rgb(var(--tertiary-50) / <alpha-value>)",
+          60: "rgb(var(--tertiary-60) / <alpha-value>)",
+          70: "rgb(var(--tertiary-70) / <alpha-value>)",
+          80: "rgb(var(--tertiary-80) / <alpha-value>)",
+          90: "rgb(var(--tertiary-90) / <alpha-value>)",
+          100: "rgb(var(--tertiary-100) / <alpha-value>)",
+          110: "rgb(var(--tertiary-110) / <alpha-value>)",
+          120: "rgb(var(--tertiary-120) / <alpha-value>)",
+          130: "rgb(var(--tertiary-130) / <alpha-value>)",
+          140: "rgb(var(--tertiary-140) / <alpha-value>)",
+          150: "rgb(var(--tertiary-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--tertiary-default) / <alpha-value>)",
+          foreground: "rgb(var(--tertiary-foreground) / <alpha-value>)",
+        },
+        grey: {
+          5: "rgb(var(--grey-5) / <alpha-value>)",
+          10: "rgb(var(--grey-10) / <alpha-value>)",
+          20: "rgb(var(--grey-20) / <alpha-value>)",
+          30: "rgb(var(--grey-30) / <alpha-value>)",
+          40: "rgb(var(--grey-40) / <alpha-value>)",
+          50: "rgb(var(--grey-50) / <alpha-value>)",
+          60: "rgb(var(--grey-60) / <alpha-value>)",
+          70: "rgb(var(--grey-70) / <alpha-value>)",
+          80: "rgb(var(--grey-80) / <alpha-value>)",
+          90: "rgb(var(--grey-90) / <alpha-value>)",
+          100: "rgb(var(--grey-100) / <alpha-value>)",
+          110: "rgb(var(--grey-110) / <alpha-value>)",
+          120: "rgb(var(--grey-120) / <alpha-value>)",
+          130: "rgb(var(--grey-130) / <alpha-value>)",
+          140: "rgb(var(--grey-140) / <alpha-value>)",
+          150: "rgb(var(--grey-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--grey-default) / <alpha-value>)",
+          foreground: "rgb(var(--grey-foreground) / <alpha-value>)",
+        },
+        grey2: {
+          100: "rgb(var(--grey2-100) / <alpha-value>)",
+          200: "rgb(var(--grey2-200) / <alpha-value>)",
+          300: "rgb(var(--grey2-300) / <alpha-value>)",
+          400: "rgb(var(--grey2-400) / <alpha-value>)",
+          500: "rgb(var(--grey2-500) / <alpha-value>)",
+          600: "rgb(var(--grey2-600) / <alpha-value>)",
+          700: "rgb(var(--grey2-700) / <alpha-value>)",
+          800: "rgb(var(--grey2-800) / <alpha-value>)",
+          900: "rgb(var(--grey2-900) / <alpha-value>)",
+          DEFAULT: "rgb(var(--grey2-default) / <alpha-value>)",
+          foreground: "rgb(var(--grey2-foreground) / <alpha-value>)",
+        },
+        info: {
+          lighter: "rgb(var(--info-lighter)) / <alpha-value>)",
+          light: "rgb(var(--info-light)) / <alpha-value>)",
+          100: "rgb(var(--info-100)) / <alpha-value>)",
+          120: "rgb(var(--info-120)) / <alpha-value>)",
+          dark: "rgb(var(--info-dark)) / <alpha-value>)",
+          darker: "rgb(var(--info-darker)) / <alpha-value>)",
+          DEFAULT: "rgb(var(--info-default) / <alpha-value>)",
+          foreground: "rgb(var(--info-foreground) / <alpha-value>)",
+        },
+        success: {
+          lighter: "rgb(var(--success-lighter)) / <alpha-value>)",
+          light: "rgb(var(--success-light)) / <alpha-value>)",
+          100: "rgb(var(--success-100)) / <alpha-value>)",
+          120: "rgb(var(--success-120)) / <alpha-value>)",
+          dark: "rgb(var(--success-dark)) / <alpha-value>)",
+          darker: "rgb(var(--success-darker)) / <alpha-value>)",
+          DEFAULT: "rgb(var(--success-default) / <alpha-value>)",
+          foreground: "rgb(var(--success-foreground) / <alpha-value>)",
+        },
+        warning: {
+          lighter: "rgb(var(--warning-lighter)) / <alpha-value>)",
+          light: "rgb(var(--warning-light)) / <alpha-value>)",
+          100: "rgb(var(--warning-100) / <alpha-value>)",
+          120: "rgb(var(--warning-120) / <alpha-value>)",
+          dark: "rgb(var(--warning-dark)) / <alpha-value>)",
+          darker: "rgb(var(--warning-darker)) / <alpha-value>)",
+          DEFAULT: "rgb(var(--warning-default) / <alpha-value>)",
+          foreground: "rgb(var(--warning-foreground) / <alpha-value>)",
+        },
+        error: {
+          lighter: "rgb(var(--error-lighter)) / <alpha-value>)",
+          light: "rgb(var(--error-light)) / <alpha-value>)",
+          100: "rgb(var(--error-100) / <alpha-value>)",
+          120: "rgb(var(--error-120) / <alpha-value>)",
+          dark: "rgb(var(--error-dark)) / <alpha-value>)",
+          darker: "rgb(var(--error-darker)) / <alpha-value>)",
+          DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
+          foreground: "rgb(var(--error-foreground) / <alpha-value>)",
+        },
+        main: {
+          transparent: {
+            primary: {
+              8: "rgb(var(--main-transparent-primary) / 0.8)",
+              12: "rgb(var(--main-transparent-primary) / 0.12)",
+              16: "rgb(var(--main-transparent-primary) / 0.16)",
+              24: "rgb(var(--main-transparent-primary) / 0.24)",
+              32: "rgb(var(--main-transparent-primary) / 0.32)",
+              48: "rgb(var(--main-transparent-primary) / 0.48)",
+            },
+            secondary: {
+              8: "rgb(var(--main-transparent-secondary) / 0.8)",
+              12: "rgb(var(--main-transparent-secondary) / 0.12)",
+              16: "rgb(var(--main-transparent-secondary) / 0.16)",
+              24: "rgb(var(--main-transparent-secondary) / 0.24)",
+              32: "rgb(var(--main-transparent-secondary) / 0.32)",
+              48: "rgb(var(--main-transparent-secondary) / 0.48)",
+            },
+            tertiary: {
+              8: "rgb(var(--main-transparent-tertiary) / 0.8)",
+              12: "rgb(var(--main-transparent-tertiary) / 0.12)",
+              16: "rgb(var(--main-transparent-tertiary) / 0.16)",
+              24: "rgb(var(--main-transparent-tertiary) / 0.24)",
+              32: "rgb(var(--main-transparent-tertiary) / 0.32)",
+              48: "rgb(var(--main-transparent-tertiary) / 0.48)",
+            },
+          },
+        },
+        // Component color
+        input: {
+          text: {
+            DEFAULT: "rgb(var(--input-default-text-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-text-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-text-color) / <alpha-value>)",
+          },
+          stroke: {
+            DEFAULT: "rgb(var(--input-default-stroke-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-stroke-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-stroke-color) / <alpha-value>)",
+          },
+          background: {
+            DEFAULT: "transparent",
+            active: "transparent",
+            disabled:
+              "rgb(var(--input-disabled-background-color) / <alpha-value>)",
+          },
+          label: {
+            background:
+              "rgb(var(--input-label-background-color) / <alpha-value>)",
+          },
+        },
+        textcolor: {
+          dark: "rgb(var(--text-default-dark) / <alpha-value>)",
+          medium: "rgb(var(--text-default-medium) / <alpha-value>)",
+          light: "rgb(var(--text-default-light) / <alpha-value>)",
+          grey: {
+            dark: "rgb(var(--text-grey-dark) / <alpha-value>)",
+            medium: "rgb(var(--text-grey-medium) / <alpha-value>)",
+            light: "rgb(var(--text-grey-light) / <alpha-value>)",
+          },
+          white: "rgb(var(--text-white) / <alpha-value>)",
+        },
+        popup: {
+          background: "rgb(var(--popup-background) / <alpha-value>)",
+          overlay: "rgb(var(--popup-overlay) / var(--popup-overlay-alpha))",
+        },
+      },
+    },
+  },
+};

package/src/_theme/presets/colors.js

@@ -0,0 +1,94 @@
+/** @type {import('tailwindcss').Config} */
+const generateColorConfig = (
+  baseName,
+  variablePrefix,
+  range = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150]
+) => {
+  const colors = {};
+
+  range.forEach((num) => {
+    colors[`${baseName}-${num}`] = `var(--${variablePrefix}-${num})`;
+  });
+
+  // Add additional colors like foreground, background if needed
+  colors[`${baseName}-foreground`] = `var(--${baseName}-foreground)`;
+  colors[`${baseName}-default`] = `var(--state-color-${baseName}-default)`;
+  colors[`${baseName}-hover`] = `var(--state-color-${baseName}-hover)`;
+  colors[`${baseName}-stroke`] = `var(--state-color-${baseName}-stroke)`;
+  colors[`${baseName}-hover-bg`] = `var(--state-color-${baseName}-hover-bg)`;
+  colors[`${baseName}-pressed`] = `var(--state-color-${baseName}-pressed)`;
+  colors[`${baseName}-active`] = `var(--state-color-${baseName}-active)`;
+
+  return colors;
+};
+
+const secondaryShade = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950",
+];
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        "main-primary": "var(--main-color-primary)",
+        "main-secondary": "var(--main-color-secondary)",
+        "main-tertiary": "var(--main-color-tertiary)",
+
+        "text-dark": "var(--text-dark)",
+        "text-medium": "var(--text-medium)",
+        "text-light": "var(--text-light)",
+        "text-grey-dark": "var(--text-grey-dark)",
+        "text-grey-medium": "var(--text-grey-medium)",
+        "text-grey-light": "var(--text-grey-light)",
+        "text-white": "var(--text-white)",
+
+        ...generateColorConfig("primary", "primary-ramps-primary"),
+        ...generateColorConfig("secondary", "secondary-ramps-secondary"),
+        ...generateColorConfig("tertiary", "tertiary-ramps-tertiary"),
+        ...generateColorConfig("grey", "grey"),
+
+        ...generateColorConfig("grey2", "grey2", secondaryShade),
+        ...generateColorConfig("info", "info", secondaryShade),
+        ...generateColorConfig("success", "success", secondaryShade),
+        ...generateColorConfig("warning", "warning", secondaryShade),
+        ...generateColorConfig("error", "error", secondaryShade),
+
+        "disable-solid": "var(--state-color-disable-solid)",
+        "disable-outline": "var(--state-color-disable-outline)",
+
+        "input-default-text": "var(--input-color-default-text)",
+        "input-default-stroke": "var(--input-color-default-stroke)",
+        "input-filled-text": "var(--input-color-filled-text)",
+        "input-active-stroke": "var(--input-color-active-stroke)",
+        "input-disable-text": "var(--input-color-disable-text)",
+        "input-disable-stroke": "var(--input-color-disable-stroke)",
+        "input-disable-bg": "var(--input-color-disable-bg)",
+        "input-label-bg": "var(--input-color-label-bg)",
+        "input-error": "var(--input-color-error)",
+
+        "other-bg": "var(--other-bg)",
+        "other-bg2": "var(--other-bg2)",
+        "other-popup": "var(--other-popup)",
+        "other-popup-highlight": "var(--other-popup-hightlight)", // naming wrong
+        "other-popup-curtain": "var(--other-popup-curtain)",
+
+        "common-white": "var(--common-white)",
+        "common-black": "var(--common-black)",
+
+        // ---
+        surface: "var(--surface)",
+        "surface-foreground": "var(--surface-foreground)",
+      },
+    },
+  },
+};

package/src/_theme/theme.d.ts

@@ -0,0 +1,69 @@
+type ThemeColorState = {
+  default: string; // bg
+  hover: string; // bg
+  stroke: string; // stroke
+  "hover-bg": string; // bg
+  pressed: string; // bg
+  active: string; // bg
+};
+
+type ThemeColorTransparent = {
+  "8": string;
+  "12": string;
+  "16": string;
+  "24": string;
+  "32": string;
+  "48": string;
+};
+
+type ThemeMainShadeColor = {
+  default: string;
+  "5": string;
+  "10": string;
+  "20": string;
+  "30": string;
+  "40": string;
+  "50": string;
+  "60": string;
+  "70": string;
+  "80": string;
+  "90": string;
+  "100": string;
+  "110": string;
+  "120": string;
+  "130": string;
+  "140": string;
+  "150": string;
+  foreground: string;
+} & ThemeColorState;
+
+type ThemeSecondaryShadeColor = {
+  default: string;
+  "50": string;
+  "100": string;
+  "200": string;
+  "300": string;
+  "400": string;
+  "500": string;
+  "600": string;
+  "700": string;
+  "800": string;
+  "900": string;
+  "950": string;
+  foreground: string;
+} & ThemeColorState;
+
+type Theme = {
+  primary: ThemeMainShadeColor;
+  secondary: ThemeMainShadeColor;
+  tertiary: ThemeMainShadeColor;
+  grey: ThemeMainShadeColor;
+  grey2: ThemeSecondaryShadeColor;
+  info: ThemeSecondaryShadeColor;
+  grey2: ThemeSecondaryShadeColor;
+  success: ThemeSecondaryShadeColor;
+  warning: ThemeSecondaryShadeColor;
+  error: ThemeSecondaryShadeColor;
+};
+
+const myTheme: Theme = {};