squarex-ui-component-lib 1.0.3 → 1.0.5

package/dist/tokens/themes/light.d.ts

@@ -0,0 +1,308 @@
+/**
+ * Light Theme
+ * Default light mode color scheme
+ */
+export declare const lightTheme: {
+    readonly color: {
+        readonly background: {
+            readonly brand: {
+                readonly default: "#8851bf";
+                readonly secondary: "#b897d9";
+                readonly tertiary: "#dbcbec";
+                readonly hover: "#6d4199";
+                readonly secondaryHover: "#a074cc";
+                readonly tertiaryHover: "#cfb9e5";
+                readonly subtleLow: "rgba(136, 81, 191, 0.08)";
+                readonly subtleMedium: "rgba(136, 81, 191, 0.08)";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#dad6f2";
+                readonly hover: "#695bcc";
+                readonly secondaryHover: "#695bcc";
+                readonly tertiaryHover: "#c7c1ec";
+                readonly subtleLow: "rgba(68, 50, 191, 0.08)";
+                readonly subtleMedium: "rgba(68, 50, 191, 0.08)";
+            };
+            readonly success: {
+                readonly default: "#14ae5c";
+                readonly secondary: "#a1dfbe";
+                readonly tertiary: "#e7f7ef";
+                readonly hover: "#108b4a";
+                readonly secondaryHover: "#72ce9d";
+                readonly tertiaryHover: "#a1dfbe";
+                readonly subtleLow: "#a1dfbe";
+                readonly subtleMedium: "#a1dfbe";
+            };
+            readonly warning: {
+                readonly default: "#faca0a";
+                readonly secondary: "#fcdf6c";
+                readonly tertiary: "#fdefb5";
+                readonly hover: "#c8a208";
+                readonly secondaryHover: "#fbd53b";
+                readonly tertiaryHover: "#fdea9d";
+                readonly subtleLow: "#fdea9d";
+                readonly subtleMedium: "#fdea9d";
+            };
+            readonly danger: {
+                readonly default: "#f04e4c";
+                readonly secondary: "#f7a7a5";
+                readonly tertiary: "#fde9e9";
+                readonly hover: "#bd1b19";
+                readonly secondaryHover: "#f47a79";
+                readonly tertiaryHover: "#f9bdbc";
+                readonly subtleLow: "rgba(236, 34, 31, 0.08)";
+                readonly subtleMedium: "rgba(236, 34, 31, 0.08)";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#cee8fd";
+                readonly hover: "#0a70c4";
+                readonly secondaryHover: "#3da3f7";
+                readonly tertiaryHover: "#9ed1fb";
+                readonly subtleLow: "#9ed1fb";
+                readonly subtleMedium: "#9ed1fb";
+            };
+            readonly neutral: {
+                readonly default: "#768494";
+                readonly secondary: "#adb5bf";
+                readonly tertiary: "#e4e6ea";
+                readonly hover: "#5e6a76";
+                readonly secondaryHover: "#919da9";
+                readonly tertiaryHover: "#c8ced4";
+                readonly subtleLow: "rgba(118, 132, 148, 0.08)";
+                readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+            };
+            readonly default: {
+                readonly default: "#f1f3f4";
+                readonly hover: "#e4e6ea";
+                readonly glass: "rgba(255, 255, 255, 0.30)";
+                readonly onGlass: "rgba(255, 255, 255, 0.60)";
+                readonly onGlassSecondary: "rgba(255, 255, 255, 0.70)";
+                readonly onGlassTertiary: "rgba(255, 255, 255, 0.80)";
+                readonly onGlassHover: "rgba(255, 255, 255, 0.80)";
+            };
+            readonly disabled: {
+                readonly default: "#dbdbdb";
+                readonly secondary: "#ededed";
+            };
+            readonly utilities: {
+                readonly scrim: "rgba(255, 255, 255, 0.7)";
+                readonly overlay: "rgba(0, 0, 0, 0.5)";
+                readonly blanket: "rgba(0, 0, 0, 0.7)";
+                readonly bgOnGlass: "rgba(255, 255, 255, 0.45)";
+                readonly bgOnGlassOnGlass: "rgba(255, 255, 255, 0.6)";
+                readonly hoverOverlay: "rgba(0, 0, 0, 0.2)";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+            };
+            readonly brand: {
+                readonly default: "#8851bf";
+                readonly secondary: "#b897d9";
+                readonly tertiary: "#dbcbec";
+                readonly onBrand: "#f3eef9";
+                readonly onBrandSecondary: "#36204c";
+                readonly onBrandTertiary: "#6d4199";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#c7c1ec";
+                readonly onAction: "#eceaf9";
+                readonly onActionSecondary: "#291e73";
+                readonly onActionTertiary: "#362899";
+            };
+            readonly success: {
+                readonly default: "#084625";
+                readonly secondary: "#108b4a";
+                readonly tertiary: "#14ae5c";
+                readonly onSuccess: "#e7f7ef";
+                readonly onSuccessSecondary: "#0c6837";
+                readonly onSuccessTertiary: "#084625";
+            };
+            readonly warning: {
+                readonly default: "#4b3d03";
+                readonly secondary: "#967906";
+                readonly tertiary: "#c8a208";
+                readonly onWarning: "#4b3d03";
+                readonly onWarningSecondary: "#645104";
+                readonly onWarningTertiary: "#967906";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#f04e4c";
+                readonly tertiary: "#f47a79";
+                readonly onDanger: "#fde9e9";
+                readonly onDangerSecondary: "#5e0e0c";
+                readonly onDangerTertiary: "#bd1b19";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#b6ddfc";
+                readonly onInfo: "#e7f3fe";
+                readonly onInfoSecondary: "#053862";
+                readonly onInfoTertiary: "#0a70c4";
+            };
+            readonly neutral: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+                readonly onNeutral: "#f1f3f4";
+                readonly onNeutralSecondary: "#2f353b";
+                readonly onNeutralTertiary: "#5e6a76";
+            };
+            readonly disabled: {
+                readonly default: "#b8b8b8";
+                readonly secondary: "#cacaca";
+                readonly onDisabled: "#a6a6a6";
+                readonly onDisabledSecondary: "#cacaca";
+            };
+            readonly utilities: {
+                readonly onOverlay: "rgba(12, 12, 13, 1.00)";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly default: "#ffffff";
+                readonly secondary: "#d6dadf";
+                readonly tertiary: "#768494";
+                readonly subtleLow: "rgba(255, 255, 255, 0.80)";
+                readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+                readonly subtleHigh: "rgba(255, 255, 255, 0.40)";
+            };
+            readonly brand: {
+                readonly default: "#cfb9e5";
+                readonly secondary: "#b897d9";
+                readonly tertiary: "#dbcbec";
+                readonly onBrand: "#f3eef9";
+                readonly onBrandSecondary: "#36204c";
+                readonly onBrandTertiary: "#6d4199";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#c7c1ec";
+                readonly onAction: "#eceaf9";
+                readonly onActionSecondary: "#362899";
+                readonly onActionTertiary: "#1b144c";
+            };
+            readonly success: {
+                readonly default: "#084625";
+                readonly secondary: "#108b4a";
+                readonly tertiary: "#14ae5c";
+            };
+            readonly warning: {
+                readonly default: "#645104";
+                readonly secondary: "#c8a208";
+                readonly tertiary: "#faca0a";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#f47a79";
+                readonly tertiary: "#fbd3d2";
+                readonly onDanger: "#bd1b19";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#b6ddfc";
+            };
+            readonly neutral: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#c8ced4";
+                readonly onNeutral: "#f1f3f4";
+                readonly onNeutralSecondary: "#474f59";
+                readonly onNeutralTertiary: "#5e6a76";
+            };
+            readonly disabled: {
+                readonly default: "#b8b8b8";
+            };
+            readonly utilities: {
+                readonly swatch: "rgba(0, 0, 0, 0.24)";
+            };
+        };
+        readonly icon: {
+            readonly default: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+            };
+            readonly brand: {
+                readonly default: "#36204c";
+                readonly secondary: "#6d4199";
+                readonly tertiary: "#8851bf";
+                readonly onBrand: "#f3eef9";
+                readonly onBrandSecondary: "#36204c";
+                readonly onBrandTertiary: "#6d4199";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#c7c1ec";
+                readonly onAction: "#eceaf9";
+                readonly onActionSecondary: "#291e73";
+                readonly onActionTertiary: "#362899";
+            };
+            readonly success: {
+                readonly default: "#14ae5c";
+                readonly secondary: "#a1dfbe";
+                readonly tertiary: "#d0efde";
+                readonly onSuccess: "#e7f7ef";
+                readonly onSuccessSecondary: "#0c6837";
+                readonly onSuccessTertiary: "#084625";
+            };
+            readonly warning: {
+                readonly default: "#faca0a";
+                readonly secondary: "#fcdf6c";
+                readonly tertiary: "#fdefb5";
+                readonly onWarning: "#191401";
+                readonly onWarningSecondary: "#645104";
+                readonly onWarningTertiary: "#4b3d03";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#f04e4c";
+                readonly tertiary: "#f47a79";
+                readonly onDanger: "#fde9e9";
+                readonly onDangerSecondary: "#8e1413";
+                readonly onDangerTertiary: "#5e0e0c";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#b6ddfc";
+                readonly onInfo: "#010e19";
+                readonly onInfoSecondary: "#053862";
+                readonly onInfoTertiary: "#042a4a";
+            };
+            readonly neutral: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+                readonly onNeutral: "#f1f3f4";
+                readonly onNeutralSecondary: "#474f59";
+                readonly onNeutralTertiary: "#5e6a76";
+            };
+            readonly disabled: {
+                readonly default: "#b8b8b8";
+                readonly secondary: "#cacaca";
+                readonly onDisabled: "#a6a6a6";
+                readonly onDisabledSecondary: "#cacaca";
+            };
+            readonly utilities: {
+                readonly onOverlay: "rgba(12, 12, 13, 1.00)";
+            };
+        };
+    };
+};
+export type LightTheme = typeof lightTheme;
+//# sourceMappingURL=light.d.ts.map

package/dist/tokens/themes/light.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../src/tokens/themes/light.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOb,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC"}

package/dist/tokens/utils/cssVariables.d.ts

@@ -0,0 +1,26 @@
+/**
+ * CSS Custom Properties Generator
+ * Converts design tokens to CSS variables for runtime theming
+ */
+import { Theme } from '../index';
+/**
+ * Generates CSS custom properties from theme object
+ */
+export declare function generateCSSVariables(theme: Theme): Record<string, string>;
+/**
+ * Applies CSS variables to a DOM element (usually :root or a container)
+ */
+export declare function applyCSSVariables(element: HTMLElement, variables: Record<string, string>): void;
+/**
+ * Removes CSS variables from a DOM element
+ */
+export declare function removeCSSVariables(element: HTMLElement, variables: Record<string, string>): void;
+/**
+ * Gets current value of a CSS variable
+ */
+export declare function getCSSVariable(name: string, element?: HTMLElement): string;
+/**
+ * Generates a CSS string with all variables
+ */
+export declare function generateCSSString(theme: Theme, selector?: string): string;
+//# sourceMappingURL=cssVariables.d.ts.map

package/dist/tokens/utils/cssVariables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVariables.d.ts","sourceRoot":"","sources":["../../../src/tokens/utils/cssVariables.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAkCjC;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEzE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,IAAI,CAIN;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,IAAI,CAIN;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,WAAsC,GAAG,MAAM,CAEpG;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,SAAU,GAAG,MAAM,CAO1E"}