npm - @vellira-ui/tokens - Versions diffs - 2.26.0 → 2.27.0 - Mend

@vellira-ui/tokens 2.26.0 → 2.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/dist/css/tokens.css +721 -352
package/dist/dark/components/button.d.ts +263 -95
package/dist/dark/components/button.d.ts.map +1 -1
package/dist/dark/components/button.js +136 -151
package/dist/dark/components/checkbox.d.ts +4 -3
package/dist/dark/components/checkbox.d.ts.map +1 -1
package/dist/dark/components/checkbox.js +2 -3
package/dist/dark/components/formField.d.ts +1 -1
package/dist/dark/components/input.d.ts +3 -3
package/dist/dark/components/radio.d.ts +1 -1
package/dist/dark/components/tabs.d.ts +1 -1
package/dist/dark/semantic/action.d.ts +8 -8
package/dist/dark/semantic/action.js +6 -6
package/dist/dark/semantic/control.d.ts +2 -2
package/dist/dark/semantic/icons.d.ts +1 -1
package/dist/dark/semantic/status.d.ts +4 -4
package/dist/dark/semantic/text.d.ts +1 -1
package/dist/dark/theme.d.ts +12 -12
package/dist/generated/token-types.d.ts +4 -4
package/dist/generated/token-types.d.ts.map +1 -1
package/dist/generated/token-types.js +708 -216
package/dist/highContrast/components/button.d.ts +264 -96
package/dist/highContrast/components/button.d.ts.map +1 -1
package/dist/highContrast/components/button.js +135 -150
package/dist/highContrast/components/checkbox.d.ts +1 -0
package/dist/highContrast/components/checkbox.d.ts.map +1 -1
package/dist/highContrast/components/checkbox.js +4 -1
package/dist/highContrast/components/formField.d.ts +1 -1
package/dist/highContrast/components/input.d.ts +3 -3
package/dist/highContrast/semantic/action.d.ts +10 -10
package/dist/highContrast/semantic/action.js +9 -9
package/dist/highContrast/semantic/icons.d.ts +1 -1
package/dist/highContrast/semantic/status.d.ts +5 -5
package/dist/highContrast/theme.d.ts +12 -12
package/dist/light/components/button.d.ts +264 -96
package/dist/light/components/button.d.ts.map +1 -1
package/dist/light/components/button.js +136 -151
package/dist/light/components/checkbox.d.ts +1 -0
package/dist/light/components/checkbox.d.ts.map +1 -1
package/dist/light/components/checkbox.js +4 -1
package/dist/light/components/formField.d.ts +2 -2
package/dist/light/components/input.d.ts +3 -3
package/dist/light/semantic/icons.d.ts +1 -1
package/dist/light/semantic/status.d.ts +7 -7
package/dist/light/semantic/status.js +3 -3
package/dist/light/theme.d.ts +12 -12
package/dist/primitives/colors.d.ts +12 -12
package/dist/primitives/colors.js +12 -12
package/dist/utils/createButtonPalette.d.ts +106 -0
package/dist/utils/createButtonPalette.d.ts.map +1 -0
package/dist/utils/createButtonPalette.js +72 -0
package/package.json +1 -1

package/dist/dark/components/button.d.ts CHANGED Viewed

@@ -1,212 +1,380 @@
 export declare const button: {
     readonly primary: {
+        readonly ring: string;
         readonly solid: {
+            default: import("../../utils/createButtonPalette.js").ButtonState;
+            hover: import("../../utils/createButtonPalette.js").ButtonState;
+            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+        };
+        readonly outline: {
             readonly default: {
-                readonly bg: "#6346E8";
-                readonly fg: "#FFFFFF";
-                readonly border: "#6346E8";
+                readonly bg: "transparent";
+                readonly fg: string;
+                readonly border: string;
             };
             readonly hover: {
-                readonly bg: "#7C5CFF";
-                readonly fg: "#FFFFFF";
-                readonly border: "#7C5CFF";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
             readonly pressed: {
-                readonly bg: "#5037C8";
-                readonly fg: "#FFFFFF";
-                readonly border: "#5037C8";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
         };
-        readonly outline: {
+        readonly ghost: {
             readonly default: {
+                readonly fg: string;
                 readonly bg: "transparent";
-                readonly fg: "#B8A8FF";
-                readonly border: "#7C5CFF";
+                readonly border: "transparent";
             };
             readonly hover: {
-                readonly bg: "#2F2A42";
-                readonly fg: "#D4CCFF";
-                readonly border: "#9B7CFF";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#3D3754";
-                readonly fg: "#E9E6FF";
-                readonly border: "#7C5CFF";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: "transparent";
             };
         };
-        readonly ghost: {
+        readonly soft: {
             readonly default: {
-                readonly fg: "#B8A8FF";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+            readonly hover: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+            readonly pressed: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+        };
+        readonly link: {
+            readonly default: {
+                readonly fg: string;
                 readonly bg: "transparent";
                 readonly border: "transparent";
             };
             readonly hover: {
-                readonly bg: "#2F2A42";
-                readonly fg: "#D4CCFF";
+                readonly fg: string;
+                readonly bg: "transparent";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#3D3754";
-                readonly fg: "#E9E6FF";
+                readonly fg: string;
+                readonly bg: "transparent";
                 readonly border: "transparent";
             };
         };
     };
-    readonly secondary: {
+    readonly neutral: {
+        readonly ring: string;
         readonly solid: {
+            default: import("../../utils/createButtonPalette.js").ButtonState;
+            hover: import("../../utils/createButtonPalette.js").ButtonState;
+            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+        };
+        readonly outline: {
             readonly default: {
-                readonly bg: "#1FBEDB";
-                readonly fg: "#000000";
-                readonly border: "#1FBEDB";
+                readonly bg: "transparent";
+                readonly fg: string;
+                readonly border: string;
             };
             readonly hover: {
-                readonly bg: "#3ED5EE";
-                readonly fg: "#000000";
-                readonly border: "#3ED5EE";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
             readonly pressed: {
-                readonly bg: "#0F9BB8";
-                readonly fg: "#000000";
-                readonly border: "#0F9BB8";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
         };
-        readonly outline: {
+        readonly ghost: {
             readonly default: {
+                readonly fg: string;
                 readonly bg: "transparent";
-                readonly fg: "#79E8F8";
-                readonly border: "#1FBEDB";
+                readonly border: "transparent";
+            };
+            readonly hover: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: "transparent";
+            };
+            readonly pressed: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: "transparent";
+            };
+        };
+        readonly soft: {
+            readonly default: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
             readonly hover: {
-                readonly bg: "#2F2A42";
-                readonly fg: "#B4F4FD";
-                readonly border: "#3ED5EE";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
             readonly pressed: {
-                readonly bg: "#3D3754";
-                readonly fg: "#D9FBFF";
-                readonly border: "#1FBEDB";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
         };
-        readonly ghost: {
+        readonly link: {
             readonly default: {
-                readonly fg: "#79E8F8";
+                readonly fg: string;
                 readonly bg: "transparent";
                 readonly border: "transparent";
             };
             readonly hover: {
-                readonly bg: "#2F2A42";
-                readonly fg: "#B4F4FD";
+                readonly fg: string;
+                readonly bg: "transparent";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#3D3754";
-                readonly fg: "#D9FBFF";
+                readonly fg: string;
+                readonly bg: "transparent";
                 readonly border: "transparent";
             };
         };
     };
-    readonly close: {
+    readonly success: {
+        readonly ring: string;
         readonly solid: {
+            default: import("../../utils/createButtonPalette.js").ButtonState;
+            hover: import("../../utils/createButtonPalette.js").ButtonState;
+            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+        };
+        readonly outline: {
             readonly default: {
-                readonly bg: "#958CB0";
-                readonly fg: "#000000";
-                readonly border: "#958CB0";
+                readonly bg: "transparent";
+                readonly fg: string;
+                readonly border: string;
             };
             readonly hover: {
-                readonly bg: "#BBB2D2";
-                readonly fg: "#000000";
-                readonly border: "#BBB2D2";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
             readonly pressed: {
-                readonly bg: "#6B6386";
-                readonly fg: "#000000";
-                readonly border: "#6B6386";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
         };
-        readonly outline: {
+        readonly ghost: {
             readonly default: {
+                readonly fg: string;
                 readonly bg: "transparent";
-                readonly fg: "#BBB2D2";
-                readonly border: "#6B6386";
+                readonly border: "transparent";
             };
             readonly hover: {
-                readonly bg: "#2F2A42";
-                readonly fg: "#E4DDF4";
-                readonly border: "#958CB0";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#3D3754";
-                readonly fg: "#F4F1FB";
-                readonly border: "#6B6386";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: "transparent";
             };
         };
-        readonly ghost: {
+        readonly soft: {
+            readonly default: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+            readonly hover: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+            readonly pressed: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+        };
+        readonly link: {
             readonly default: {
-                readonly fg: "#BBB2D2";
+                readonly fg: string;
                 readonly bg: "transparent";
                 readonly border: "transparent";
             };
             readonly hover: {
-                readonly bg: "#2F2A42";
-                readonly fg: "#E4DDF4";
+                readonly fg: string;
+                readonly bg: "transparent";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#3D3754";
-                readonly fg: "#F4F1FB";
+                readonly fg: string;
+                readonly bg: "transparent";
                 readonly border: "transparent";
             };
         };
     };
-    readonly danger: {
+    readonly warning: {
+        readonly ring: string;
         readonly solid: {
+            default: import("../../utils/createButtonPalette.js").ButtonState;
+            hover: import("../../utils/createButtonPalette.js").ButtonState;
+            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+        };
+        readonly outline: {
             readonly default: {
-                readonly bg: "#E11D48";
-                readonly fg: "#FFFFFF";
-                readonly border: "#E11D48";
+                readonly bg: "transparent";
+                readonly fg: string;
+                readonly border: string;
             };
             readonly hover: {
-                readonly bg: "#F43F5E";
-                readonly fg: "#FFFFFF";
-                readonly border: "#F43F5E";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
             readonly pressed: {
-                readonly bg: "#BE123C";
-                readonly fg: "#FFFFFF";
-                readonly border: "#BE123C";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
         };
+        readonly ghost: {
+            readonly default: {
+                readonly fg: string;
+                readonly bg: "transparent";
+                readonly border: "transparent";
+            };
+            readonly hover: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: "transparent";
+            };
+            readonly pressed: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: "transparent";
+            };
+        };
+        readonly soft: {
+            readonly default: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+            readonly hover: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+            readonly pressed: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+        };
+        readonly link: {
+            readonly default: {
+                readonly fg: string;
+                readonly bg: "transparent";
+                readonly border: "transparent";
+            };
+            readonly hover: {
+                readonly fg: string;
+                readonly bg: "transparent";
+                readonly border: "transparent";
+            };
+            readonly pressed: {
+                readonly fg: string;
+                readonly bg: "transparent";
+                readonly border: "transparent";
+            };
+        };
+    };
+    readonly danger: {
+        readonly ring: string;
+        readonly solid: {
+            default: import("../../utils/createButtonPalette.js").ButtonState;
+            hover: import("../../utils/createButtonPalette.js").ButtonState;
+            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+        };
         readonly outline: {
             readonly default: {
                 readonly bg: "transparent";
-                readonly fg: "#FB7185";
-                readonly border: "#FB7185";
+                readonly fg: string;
+                readonly border: string;
             };
             readonly hover: {
-                readonly bg: "rgba(251, 113, 133, 0.16)";
-                readonly fg: "#FDA4AF";
-                readonly border: "#FB7185";
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
             };
             readonly pressed: {
                 readonly bg: string;
-                readonly fg: "#FECDD3";
-                readonly border: "#F43F5E";
+                readonly fg: string;
+                readonly border: string;
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#FB7185";
+                readonly fg: string;
                 readonly bg: "transparent";
                 readonly border: "transparent";
             };
             readonly hover: {
-                readonly bg: "rgba(251, 113, 133, 0.16)";
-                readonly fg: "#FDA4AF";
+                readonly bg: string;
+                readonly fg: string;
                 readonly border: "transparent";
             };
             readonly pressed: {
                 readonly bg: string;
-                readonly fg: "#FECDD3";
+                readonly fg: string;
+                readonly border: "transparent";
+            };
+        };
+        readonly soft: {
+            readonly default: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+            readonly hover: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+            readonly pressed: {
+                readonly bg: string;
+                readonly fg: string;
+                readonly border: string;
+            };
+        };
+        readonly link: {
+            readonly default: {
+                readonly fg: string;
+                readonly bg: "transparent";
+                readonly border: "transparent";
+            };
+            readonly hover: {
+                readonly fg: string;
+                readonly bg: "transparent";
+                readonly border: "transparent";
+            };
+            readonly pressed: {
+                readonly fg: string;
+                readonly bg: "transparent";
                 readonly border: "transparent";
             };
         };

package/dist/dark/components/button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/dark/components/button.ts"],"names":[],"mappings":"~~AAYA~~,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkMT,CAAC"}
1	+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/dark/components/button.ts"],"names":[],"mappings":"AA2KA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYT,CAAC"}