@valerius_petrini/corekit-ui 0.1.65 → 0.1.69

package/dist/styles/color.js

@@ -1,156 +1,165 @@
+export const colorStyles = [
+    "rose", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "gray", "sub", "none",
+    "white", "black",
+    "primary", "secondary", "accent",
+    "error", "warning", "success", "info"
+];
+export const colorStyleTypes = [
+    "base", "text", "full", "light", "outline", "ghost", "loader"
+];
 export const colorStyleParts = {
     rose: {
-        base: "bg-rose-500",
-        text: "text-rose-500",
-        full: "bg-rose-500 hover:bg-rose-600",
-        light: "bg-rose-500/35 hover:bg-rose-600/35 text-white/60",
-        outline: "border border-rose-500 hover:border-rose-600 text-rose-500 hover:text-rose-600 hover:bg-rose-500/10",
-        ghost: "hover:bg-rose-500",
-        loader: "border-t-rose-500"
+        base: "bg-rose-600",
+        text: "text-rose-600",
+        full: "bg-rose-600 hover:bg-rose-700",
+        light: "bg-rose-600/35 hover:bg-rose-700/35 text-white/60",
+        outline: "border border-rose-600 hover:border-rose-700 text-rose-600 hover:text-rose-700 hover:bg-rose-600/10",
+        ghost: "hover:bg-rose-600",
+        loader: "border-t-rose-600"
     },
     red: {
-        base: "bg-red-500",
-        text: "text-red-500",
-        full: "bg-red-500 hover:bg-red-600",
-        light: "bg-red-500/35 hover:bg-red-600/35 text-white/60",
-        outline: "border border-red-500 hover:border-red-600 text-red-500 hover:text-red-600 hover:bg-red-500/10",
-        ghost: "hover:bg-red-500",
-        loader: "border-t-red-500"
+        base: "bg-red-600",
+        text: "text-red-600",
+        full: "bg-red-600 hover:bg-red-700",
+        light: "bg-red-600/35 hover:bg-red-700/35 text-white/60",
+        outline: "border border-red-600 hover:border-red-700 text-red-600 hover:text-red-700 hover:bg-red-600/10",
+        ghost: "hover:bg-red-600",
+        loader: "border-t-red-600"
     },
     orange: {
-        base: "bg-orange-500",
-        text: "text-orange-500",
-        full: "bg-orange-500 hover:bg-orange-600",
-        light: "bg-orange-500/35 hover:bg-orange-600/35 text-white/60",
-        outline: "border border-orange-500 hover:border-orange-600 text-orange-500 hover:text-orange-600 hover:bg-orange-500/10",
-        ghost: "hover:bg-orange-500",
-        loader: "border-t-orange-500"
+        base: "bg-orange-600",
+        text: "text-orange-600",
+        full: "bg-orange-600 hover:bg-orange-700",
+        light: "bg-orange-600/35 hover:bg-orange-700/35 text-white/60",
+        outline: "border border-orange-600 hover:border-orange-700 text-orange-600 hover:text-orange-700 hover:bg-orange-600/10",
+        ghost: "hover:bg-orange-600",
+        loader: "border-t-orange-600"
     },
     amber: {
-        base: "bg-amber-500",
-        text: "text-amber-500",
-        full: "bg-amber-500 hover:bg-amber-600",
-        light: "bg-amber-500/35 hover:bg-amber-600/35 text-white/60",
-        outline: "border border-amber-500 hover:border-amber-600 text-amber-500 hover:text-amber-600 hover:bg-amber-500/10",
-        ghost: "hover:bg-amber-500",
-        loader: "border-t-amber-500"
+        base: "bg-amber-600",
+        text: "text-amber-600",
+        full: "bg-amber-600 hover:bg-amber-700",
+        light: "bg-amber-600/35 hover:bg-amber-700/35 text-white/60",
+        outline: "border border-amber-600 hover:border-amber-700 text-amber-600 hover:text-amber-700 hover:bg-amber-600/10",
+        ghost: "hover:bg-amber-600",
+        loader: "border-t-amber-600"
     },
     yellow: {
-        base: "bg-yellow-500",
-        text: "text-yellow-500",
-        full: "bg-yellow-500 hover:bg-yellow-600",
-        light: "bg-yellow-500/35 hover:bg-yellow-600/35 text-white/60",
-        outline: "border border-yellow-500 hover:border-yellow-600 text-yellow-500 hover:text-yellow-600 hover:bg-yellow-500/10",
-        ghost: "hover:bg-yellow-500",
-        loader: "border-t-yellow-500"
+        base: "bg-yellow-600",
+        text: "text-yellow-600",
+        full: "bg-yellow-600 hover:bg-yellow-700",
+        light: "bg-yellow-600/35 hover:bg-yellow-700/35 text-white/60",
+        outline: "border border-yellow-600 hover:border-yellow-700 text-yellow-600 hover:text-yellow-700 hover:bg-yellow-600/10",
+        ghost: "hover:bg-yellow-600",
+        loader: "border-t-yellow-600"
     },
     lime: {
-        base: "bg-lime-500",
-        text: "text-lime-500",
-        full: "bg-lime-500 hover:bg-lime-600",
-        light: "bg-lime-500/35 hover:bg-lime-600/35 text-white/60",
-        outline: "border border-lime-500 hover:border-lime-600 text-lime-500 hover:text-lime-600 hover:bg-lime-500/10",
-        ghost: "hover:bg-lime-500",
-        loader: "border-t-lime-500"
+        base: "bg-lime-600",
+        text: "text-lime-600",
+        full: "bg-lime-600 hover:bg-lime-700",
+        light: "bg-lime-600/35 hover:bg-lime-700/35 text-white/60",
+        outline: "border border-lime-600 hover:border-lime-700 text-lime-600 hover:text-lime-700 hover:bg-lime-600/10",
+        ghost: "hover:bg-lime-600",
+        loader: "border-t-lime-600"
     },
     green: {
-        base: "bg-green-500",
-        text: "text-green-500",
-        full: "bg-green-500 hover:bg-green-600",
-        light: "bg-green-500/35 hover:bg-green-600/35 text-white/60",
-        outline: "border border-green-500 hover:border-green-600 text-green-500 hover:text-green-600 hover:bg-green-500/10",
-        ghost: "hover:bg-green-500",
-        loader: "border-t-green-500"
+        base: "bg-green-600",
+        text: "text-green-600",
+        full: "bg-green-600 hover:bg-green-700",
+        light: "bg-green-600/35 hover:bg-green-700/35 text-white/60",
+        outline: "border border-green-600 hover:border-green-700 text-green-600 hover:text-green-700 hover:bg-green-600/10",
+        ghost: "hover:bg-green-600",
+        loader: "border-t-green-600"
     },
     emerald: {
-        base: "bg-emerald-500",
-        text: "text-emerald-500",
-        full: "bg-emerald-500 hover:bg-emerald-600",
-        light: "bg-emerald-500/35 hover:bg-emerald-600/35 text-white/60",
-        outline: "border border-emerald-500 hover:border-emerald-600 text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10",
-        ghost: "hover:bg-emerald-500",
-        loader: "border-t-emerald-500"
+        base: "bg-emerald-600",
+        text: "text-emerald-600",
+        full: "bg-emerald-600 hover:bg-emerald-700",
+        light: "bg-emerald-600/35 hover:bg-emerald-700/35 text-white/60",
+        outline: "border border-emerald-600 hover:border-emerald-700 text-emerald-600 hover:text-emerald-700 hover:bg-emerald-600/10",
+        ghost: "hover:bg-emerald-600",
+        loader: "border-t-emerald-600"
     },
     teal: {
-        base: "bg-teal-500",
-        text: "text-teal-500",
-        full: "bg-teal-500 hover:bg-teal-600",
-        light: "bg-teal-500/35 hover:bg-teal-600/35 text-white/60",
-        outline: "border border-teal-500 hover:border-teal-600 text-teal-500 hover:text-teal-600 hover:bg-teal-500/10",
-        ghost: "hover:bg-teal-500",
-        loader: "border-t-teal-500"
+        base: "bg-teal-600",
+        text: "text-teal-600",
+        full: "bg-teal-600 hover:bg-teal-700",
+        light: "bg-teal-600/35 hover:bg-teal-700/35 text-white/60",
+        outline: "border border-teal-600 hover:border-teal-700 text-teal-600 hover:text-teal-700 hover:bg-teal-600/10",
+        ghost: "hover:bg-teal-600",
+        loader: "border-t-teal-600"
     },
     cyan: {
-        base: "bg-cyan-500",
-        text: "text-cyan-500",
-        full: "bg-cyan-500 hover:bg-cyan-600",
-        light: "bg-cyan-500/35 hover:bg-cyan-600/35 text-white/60",
-        outline: "border border-cyan-500 hover:border-cyan-600 text-cyan-500 hover:text-cyan-600 hover:bg-cyan-500/10",
-        ghost: "hover:bg-cyan-500",
-        loader: "border-t-cyan-500"
+        base: "bg-cyan-600",
+        text: "text-cyan-600",
+        full: "bg-cyan-600 hover:bg-cyan-700",
+        light: "bg-cyan-600/35 hover:bg-cyan-700/35 text-white/60",
+        outline: "border border-cyan-600 hover:border-cyan-700 text-cyan-600 hover:text-cyan-700 hover:bg-cyan-600/10",
+        ghost: "hover:bg-cyan-600",
+        loader: "border-t-cyan-600"
     },
     blue: {
-        base: "bg-blue-500",
-        text: "text-blue-500",
-        full: "bg-blue-500 hover:bg-blue-600",
-        light: "bg-blue-500/35 hover:bg-blue-600/35 text-white/60",
-        outline: "border border-blue-500 hover:border-blue-600 text-blue-500 hover:text-blue-600 hover:bg-blue-500/10",
-        ghost: "hover:bg-blue-500",
-        loader: "border-t-blue-500"
+        base: "bg-blue-600",
+        text: "text-blue-600",
+        full: "bg-blue-600 hover:bg-blue-700",
+        light: "bg-blue-600/35 hover:bg-blue-700/35 text-white/60",
+        outline: "border border-blue-600 hover:border-blue-700 text-blue-600 hover:text-blue-700 hover:bg-blue-600/10",
+        ghost: "hover:bg-blue-600",
+        loader: "border-t-blue-600"
     },
     indigo: {
-        base: "bg-indigo-500",
-        text: "text-indigo-500",
-        full: "bg-indigo-500 hover:bg-indigo-600",
-        light: "bg-indigo-500/35 hover:bg-indigo-600/35 text-white/60",
-        outline: "border border-indigo-500 hover:border-indigo-600 text-indigo-500 hover:text-indigo-600 hover:bg-indigo-500/10",
-        ghost: "hover:bg-indigo-500",
-        loader: "border-t-indigo-500"
+        base: "bg-indigo-600",
+        text: "text-indigo-600",
+        full: "bg-indigo-600 hover:bg-indigo-700",
+        light: "bg-indigo-600/35 hover:bg-indigo-700/35 text-white/60",
+        outline: "border border-indigo-600 hover:border-indigo-700 text-indigo-600 hover:text-indigo-700 hover:bg-indigo-600/10",
+        ghost: "hover:bg-indigo-600",
+        loader: "border-t-indigo-600"
     },
     violet: {
-        base: "bg-violet-500",
-        text: "text-violet-500",
-        full: "bg-violet-500 hover:bg-violet-600",
-        light: "bg-violet-500/35 hover:bg-violet-600/35 text-white/60",
-        outline: "border border-violet-500 hover:border-violet-600 text-violet-500 hover:text-violet-600 hover:bg-violet-500/10",
-        ghost: "hover:bg-violet-500",
-        loader: "border-t-violet-500"
+        base: "bg-violet-600",
+        text: "text-violet-600",
+        full: "bg-violet-600 hover:bg-violet-700",
+        light: "bg-violet-600/35 hover:bg-violet-700/35 text-white/60",
+        outline: "border border-violet-600 hover:border-violet-700 text-violet-600 hover:text-violet-700 hover:bg-violet-600/10",
+        ghost: "hover:bg-violet-600",
+        loader: "border-t-violet-600"
     },
     purple: {
-        base: "bg-purple-500",
-        text: "text-purple-500",
-        full: "bg-purple-500 hover:bg-purple-600",
-        light: "bg-purple-500/35 hover:bg-purple-600/35 text-white/60",
-        outline: "border border-purple-500 hover:border-purple-600 text-purple-500 hover:text-purple-600 hover:bg-purple-500/10",
-        ghost: "hover:bg-purple-500",
-        loader: "border-t-purple-500"
+        base: "bg-purple-600",
+        text: "text-purple-600",
+        full: "bg-purple-600 hover:bg-purple-700",
+        light: "bg-purple-600/35 hover:bg-purple-700/35 text-white/60",
+        outline: "border border-purple-600 hover:border-purple-700 text-purple-600 hover:text-purple-700 hover:bg-purple-600/10",
+        ghost: "hover:bg-purple-600",
+        loader: "border-t-purple-600"
     },
     pink: {
-        base: "bg-pink-500",
-        text: "text-pink-500",
-        full: "bg-pink-500 hover:bg-pink-600",
-        light: "bg-pink-500/35 hover:bg-pink-600/35 text-white/60",
-        outline: "border border-pink-500 hover:border-pink-600 text-pink-500 hover:text-pink-600 hover:bg-pink-500/10",
-        ghost: "hover:bg-pink-500",
-        loader: "border-t-pink-500"
+        base: "bg-pink-600",
+        text: "text-pink-600",
+        full: "bg-pink-600 hover:bg-pink-700",
+        light: "bg-pink-600/35 hover:bg-pink-700/35 text-white/60",
+        outline: "border border-pink-600 hover:border-pink-700 text-pink-600 hover:text-pink-700 hover:bg-pink-600/10",
+        ghost: "hover:bg-pink-600",
+        loader: "border-t-pink-600"
     },
     fuchsia: {
-        base: "bg-fuchsia-500",
-        text: "text-fuchsia-500",
-        full: "bg-fuchsia-500 hover:bg-fuchsia-600",
-        light: "bg-fuchsia-500/35 hover:bg-fuchsia-600/35 text-white/60",
-        outline: "border border-fuchsia-500 hover:border-fuchsia-600 text-fuchsia-500 hover:text-fuchsia-600 hover:bg-fuchsia-500/10",
-        ghost: "hover:bg-fuchsia-500",
-        loader: "border-t-fuchsia-500"
+        base: "bg-fuchsia-600",
+        text: "text-fuchsia-600",
+        full: "bg-fuchsia-600 hover:bg-fuchsia-700",
+        light: "bg-fuchsia-600/35 hover:bg-fuchsia-700/35 text-white/60",
+        outline: "border border-fuchsia-600 hover:border-fuchsia-700 text-fuchsia-600 hover:text-fuchsia-700 hover:bg-fuchsia-600/10",
+        ghost: "hover:bg-fuchsia-600",
+        loader: "border-t-fuchsia-600"
     },
     gray: {
-        base: "bg-gray-500",
-        text: "text-gray-500",
-        full: "bg-gray-500 hover:bg-gray-600",
-        light: "bg-gray-500/35 hover:bg-gray-600/35 text-white/60",
-        outline: "border border-gray-500 hover:border-gray-600 text-gray-500 hover:text-gray-600 hover:bg-gray-500/10",
-        ghost: "hover:bg-gray-500",
-        loader: "border-t-gray-500"
+        base: "bg-gray-600",
+        text: "text-gray-600",
+        full: "bg-gray-600 hover:bg-gray-700",
+        light: "bg-gray-600/35 hover:bg-gray-700/35 text-white/60",
+        outline: "border border-gray-600 hover:border-gray-700 text-gray-600 hover:text-gray-700 hover:bg-gray-600/10",
+        ghost: "hover:bg-gray-600",
+        loader: "border-t-gray-600"
     },
     sub: {
         base: "bg-sub-background",
@@ -183,73 +192,73 @@ export const colorStyleParts = {
         base: "bg-black",
         text: "text-black",
         full: "bg-black hover:bg-stone-950",
-        light: "bg-black/35 hover:bg-black/35 text-gray-500",
+        light: "bg-black/35 hover:bg-black/35 text-gray-600",
         outline: "border border-black hover:border-gray-700 text-black hover:text-gray-700 hover:bg-black/10",
         ghost: "hover:bg-black",
         loader: "border-t-black"
     },
     primary: {
-        base: "bg-primary",
-        text: "text-primary",
-        full: "bg-primary hover:bg-primary/90",
-        light: "bg-primary/35 hover:bg-primary/35 text-white/60",
-        outline: "border border-primary hover:border-primary/90 text-primary hover:text-primary/90 hover:bg-primary/10",
-        ghost: "hover:bg-primary",
+        base: "bg-primary-600",
+        text: "text-primary-600",
+        full: "bg-primary-600 hover:bg-primary-700",
+        light: "bg-primary-600/35 hover:bg-primary-700/35 text-white/60",
+        outline: "border border-primary-600 hover:border-primary-700 text-primary-600 hover:text-primary-700 hover:bg-primary-600/10",
+        ghost: "hover:bg-primary-600",
         loader: "border-t-primary"
     },
     secondary: {
-        base: "bg-secondary",
-        text: "text-secondary",
-        full: "bg-secondary hover:bg-secondary/90",
-        light: "bg-secondary/35 hover:bg-secondary/35 text-white/60",
-        outline: "border border-secondary hover:border-secondary/90 text-secondary hover:text-secondary/90 hover:bg-secondary/10",
-        ghost: "hover:bg-secondary",
+        base: "bg-secondary-600",
+        text: "text-secondary-600",
+        full: "bg-secondary-600 hover:bg-secondary-700",
+        light: "bg-secondary-600/35 hover:bg-secondary-700/35 text-white/60",
+        outline: "border border-secondary-600 hover:border-secondary-700 text-secondary-600 hover:text-secondary-700 hover:bg-secondary-600/10",
+        ghost: "hover:bg-secondary-600",
         loader: "border-t-secondary"
     },
     accent: {
-        base: "bg-accent",
-        text: "text-accent",
-        full: "bg-accent hover:bg-accent/90",
-        light: "bg-accent/35 hover:bg-accent/35 text-white/60",
-        outline: "border border-accent hover:border-accent/90 text-accent hover:text-accent/90 hover:bg-accent/10",
-        ghost: "hover:bg-accent",
+        base: "bg-accent-600",
+        text: "text-accent-600",
+        full: "bg-accent-600 hover:bg-accent-700",
+        light: "bg-accent-600/35 hover:bg-accent-700/35 text-white/60",
+        outline: "border border-accent-600 hover:border-accent-700 text-accent-600 hover:text-accent-700 hover:bg-accent-600/10",
+        ghost: "hover:bg-accent-600",
         loader: "border-t-accent"
     },
     error: {
-        base: "bg-red-500",
-        text: "text-red-500",
-        full: "bg-red-500 hover:bg-red-600",
-        light: "bg-red-500/35 hover:bg-red-600/35 text-white/60",
-        outline: "border border-red-500 hover:border-red-600 text-red-500 hover:text-red-600 hover:bg-red-500/10",
-        ghost: "hover:bg-red-500",
-        loader: "border-t-red-500"
+        base: "bg-red-600",
+        text: "text-red-600",
+        full: "bg-red-600 hover:bg-red-700",
+        light: "bg-red-600/35 hover:bg-red-700/35 text-white/60",
+        outline: "border border-red-600 hover:border-red-700 text-red-600 hover:text-red-700 hover:bg-red-600/10",
+        ghost: "hover:bg-red-600",
+        loader: "border-t-red-600"
     },
     warning: {
-        base: "bg-amber-500",
-        text: "text-amber-500",
-        full: "bg-amber-500 hover:bg-amber-600",
-        light: "bg-amber-500/35 hover:bg-amber-600/35 text-white/60",
-        outline: "border border-amber-500 hover:border-amber-600 text-amber-500 hover:text-amber-600 hover:bg-amber-500/10",
-        ghost: "hover:bg-amber-500",
-        loader: "border-t-amber-500"
+        base: "bg-amber-600",
+        text: "text-amber-600",
+        full: "bg-amber-600 hover:bg-amber-700",
+        light: "bg-amber-600/35 hover:bg-amber-700/35 text-white/60",
+        outline: "border border-amber-600 hover:border-amber-700 text-amber-600 hover:text-amber-700 hover:bg-amber-600/10",
+        ghost: "hover:bg-amber-600",
+        loader: "border-t-amber-600"
     },
     success: {
-        base: "bg-emerald-500",
-        text: "text-emerald-500",
-        full: "bg-emerald-500 hover:bg-emerald-600",
-        light: "bg-emerald-500/35 hover:bg-emerald-600/35 text-white/60",
-        outline: "border border-emerald-500 hover:border-emerald-600 text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10",
-        ghost: "hover:bg-emerald-500",
-        loader: "border-t-emerald-500"
+        base: "bg-emerald-600",
+        text: "text-emerald-600",
+        full: "bg-emerald-600 hover:bg-emerald-700",
+        light: "bg-emerald-600/35 hover:bg-emerald-700/35 text-white/60",
+        outline: "border border-emerald-600 hover:border-emerald-700 text-emerald-600 hover:text-emerald-700 hover:bg-emerald-600/10",
+        ghost: "hover:bg-emerald-600",
+        loader: "border-t-emerald-600"
     },
     info: {
-        base: "bg-sky-500",
-        text: "text-sky-500",
-        full: "bg-sky-500 hover:bg-sky-600",
-        light: "bg-sky-500/35 hover:bg-sky-600/35 text-white/60",
-        outline: "border border-sky-500 hover:border-sky-600 text-sky-500 hover:text-sky-600 hover:bg-sky-500/10",
-        ghost: "hover:bg-sky-500",
-        loader: "border-t-sky-500"
+        base: "bg-sky-600",
+        text: "text-sky-600",
+        full: "bg-sky-600 hover:bg-sky-700",
+        light: "bg-sky-600/35 hover:bg-sky-700/35 text-white/60",
+        outline: "border border-sky-600 hover:border-sky-700 text-sky-600 hover:text-sky-700 hover:bg-sky-600/10",
+        ghost: "hover:bg-sky-600",
+        loader: "border-t-sky-600"
     }
 };
 export function generateColorStyle(color, variant) {

package/dist/styles/layout.css

@@ -22,6 +22,42 @@
     --color-accent: var(--vpcui-accent);
 
     --color-loader-btn-color: var(--vpcui-loader-btn-color);
+
+    --color-primary-50: #eef2ff;
+    --color-primary-100: #e0e7ff;
+    --color-primary-200: #c7d2fe;
+    --color-primary-300: #818cf8;
+    --color-primary-400: #6366f1;
+    --color-primary-500: #4f46e5;
+    --color-primary-600: #4338ca;
+    --color-primary-700: #3730a3;
+    --color-primary-800: #312e81;
+    --color-primary-900: #1e1b55;
+    --color-primary-950: #12113a;
+
+    --color-secondary-50: #f5f3ff;
+    --color-secondary-100: #ede9fe;
+    --color-secondary-200: #ddd6fe;
+    --color-secondary-300: #a78bfa;
+    --color-secondary-400: #8b5cf6;
+    --color-secondary-500: #7c3aed;
+    --color-secondary-600: #6d28d9;
+    --color-secondary-700: #5b21b6;
+    --color-secondary-800: #4c1d95;
+    --color-secondary-900: #2e125c;
+    --color-secondary-950: #1a0a3a;
+
+    --color-accent-50: #ecfeff;
+    --color-accent-100: #cffafe;
+    --color-accent-200: #a5f3fc;
+    --color-accent-300: #22d3ee;
+    --color-accent-400: #06b6d4;
+    --color-accent-500: #0891b2;
+    --color-accent-600: #0e7490;
+    --color-accent-700: #155e75;
+    --color-accent-800: #164e63;
+    --color-accent-900: #0c2f3d;
+    --color-accent-950: #061e28;
 }
 
 :root {
@@ -39,7 +75,7 @@
     --vpcui-sub-background-hover: var(--vpcui-light-150);
     --vpcui-main-text: var(--vpcui-light-950);
     --vpcui-sub-text: var(--vpcui-light-300);
-    --vpcui-contrast-text: var(--vpcui-light-50);
+    --vpcui-contrast-text: var(--vpcui-light-950);
     --vpcui-form-background: var(--vpcui-light-50);
     --vpcui-form-hover: var(--vpcui-light-200);
     --vpcui-form-border: var(--vpcui-light-250);
@@ -62,7 +98,7 @@ html.dark {
     --vpcui-sub-background-hover: var(--vpcui-dark-150);
     --vpcui-main-text: var(--vpcui-dark-950);
     --vpcui-sub-text: var(--vpcui-dark-300);
-    --vpcui-contrast-text: var(--vpcui-dark-950);
+    --vpcui-contrast-text: var(--vpcui-dark-50);
     --vpcui-form-background: var(--vpcui-dark-150);
     --vpcui-form-border: var(--vpcui-dark-250);
     --vpcui-form-hover: var(--vpcui-dark-200);

package/dist/styles/size.d.ts

@@ -1,8 +1,10 @@
 export type SizeStyleTheme = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full" | "none";
-export type SizeStyleType = "button" | "buttonIcon" | "radius" | "text" | "card" | "form" | "formLabel" | "formLabelSelected" | "progress" | "loader" | "buttonLoader";
+export type SizeStyleType = "radius" | "text" | "card" | "form" | "formLabel" | "formLabelSelected" | "progress" | "loader" | "buttonLoader";
 export type SizeStyle = SizeStyleTheme | number;
+export declare const sizeStyles: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full", "none"];
 export declare const sizeStyleParts: Record<SizeStyleTheme, Record<SizeStyleType, string>>;
 export declare function getSizeStyleClass(size: SizeStyle, type: SizeStyleType): string;
+export declare function getSizeStyleClassRecord(size: SizeStyle, record: Record<SizeStyle, string>): string;
 export declare function getSizeStyle(size: SizeStyle, type: SizeStyleType): string;
 export declare const textStyle: {
     "text-xs": string;