@rovula/ui 0.0.21 → 0.0.22

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

@@ -1,229 +0,0 @@
-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

@@ -1,94 +0,0 @@
-/** @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

@@ -1,69 +0,0 @@
-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 = {};