squarex-ui-component-lib 1.0.4 → 1.0.5

package/dist/tokens/tailwind/config.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Tailwind Configuration from Design Tokens
+ * Converts design tokens to Tailwind theme configuration
+ */
+/**
+ * Tailwind theme configuration generated from design tokens
+ * Use this in your tailwind.config.js
+ */
+export declare const tailwindTheme: {
+    readonly colors: {
+        readonly brand: {
+            readonly DEFAULT: "#8851bf";
+            readonly hover: "#6d4199";
+            readonly light: "#dbcbec";
+        };
+        readonly action: {
+            readonly DEFAULT: "#4432bf";
+            readonly hover: "#695bcc";
+            readonly light: "#dad6f2";
+        };
+        readonly success: {
+            readonly DEFAULT: "#14ae5c";
+            readonly hover: "#108b4a";
+            readonly light: "#e7f7ef";
+        };
+        readonly warning: {
+            readonly DEFAULT: "#faca0a";
+            readonly hover: "#c8a208";
+            readonly light: "#fdefb5";
+        };
+        readonly danger: {
+            readonly DEFAULT: "#f04e4c";
+            readonly hover: "#bd1b19";
+            readonly light: "#fde9e9";
+        };
+        readonly info: {
+            readonly DEFAULT: "#0c8cf5";
+            readonly hover: "#0a70c4";
+            readonly light: "#cee8fd";
+        };
+    };
+    readonly fontFamily: {
+        readonly sans: string[];
+        readonly mono: string[];
+    };
+    readonly fontSize: {
+        readonly xxs: "11px";
+        readonly xs: "12px";
+        readonly sm: "13px";
+        readonly base: "14px";
+        readonly lg: "16px";
+        readonly xl: "18px";
+        readonly '2xl': "20px";
+        readonly '3xl': "24px";
+        readonly '4xl': "28px";
+        readonly '5xl': "32px";
+        readonly '6xl': "40px";
+    };
+    readonly fontWeight: {
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+    readonly spacing: {
+        readonly 0: "0";
+        readonly 50: "2px";
+        readonly 100: "4px";
+        readonly 150: "6px";
+        readonly 200: "8px";
+        readonly 300: "12px";
+        readonly 400: "16px";
+        readonly 500: "20px";
+        readonly 600: "24px";
+        readonly 800: "32px";
+        readonly 1200: "48px";
+        readonly 1600: "64px";
+        readonly 2400: "96px";
+        readonly 4000: "160px";
+    };
+    readonly borderRadius: {
+        readonly none: "0px";
+        readonly sm: "4px";
+        readonly DEFAULT: "8px";
+        readonly md: "8px";
+        readonly lg: "12px";
+        readonly xl: "16px";
+        readonly full: "9999px";
+    };
+    readonly borderWidth: {
+        readonly DEFAULT: "1px";
+        readonly 0: "0";
+        readonly thin: "1px";
+        readonly medium: "1.5px";
+        readonly thick: "2px";
+    };
+    readonly boxShadow: {
+        readonly none: "none";
+        readonly xs: `0 1px ${number}px rgba(0, 0, 0, 0.1)`;
+        readonly sm: `0 2px ${number}px rgba(0, 0, 0, 0.12)`;
+        readonly DEFAULT: `0 4px ${number}px rgba(0, 0, 0, 0.15)`;
+        readonly md: `0 4px ${number}px rgba(0, 0, 0, 0.15)`;
+        readonly lg: `0 8px ${number}px rgba(0, 0, 0, 0.18)`;
+        readonly xl: `0 16px ${number}px rgba(0, 0, 0, 0.20)`;
+    };
+    readonly backdropBlur: {
+        readonly none: "blur(0px)";
+        readonly soft: "blur(2px)";
+        readonly light: "blur(4px)";
+        readonly DEFAULT: "blur(8px)";
+        readonly medium: "blur(8px)";
+        readonly heavy: "blur(12px)";
+        readonly intense: "blur(24px)";
+    };
+    readonly transitionDuration: {
+        readonly fast: "150ms";
+        readonly DEFAULT: "250ms";
+        readonly base: "250ms";
+        readonly slow: "350ms";
+        readonly 'very-slow': "500ms";
+    };
+    readonly transitionTimingFunction: {
+        readonly DEFAULT: "ease-in-out";
+        readonly linear: "linear";
+        readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly 'in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly spring: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+    };
+    readonly screens: {
+        readonly mobile: "375px";
+        readonly tablet: "768px";
+        readonly desktop: "1200px";
+        readonly wide: "1440px";
+    };
+    readonly zIndex: {
+        readonly 0: 0;
+        readonly 10: 4;
+        readonly 20: 8;
+        readonly 30: 16;
+        readonly 40: 32;
+        readonly 50: 48;
+    };
+};
+export default tailwindTheme;
+//# sourceMappingURL=config.d.ts.map

package/dist/tokens/tailwind/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/tokens/tailwind/config.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqBH;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JhB,CAAC;AAEX,eAAe,aAAa,CAAC"}

package/dist/tokens/tailwind/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tailwind Integration
+ * Export Tailwind configuration
+ */
+export { tailwindTheme } from './config';
+export { default } from './config';
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/tailwind/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/tailwind/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

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

@@ -0,0 +1,308 @@
+/**
+ * Dark Theme
+ * Dark mode color scheme (inverted from light theme)
+ */
+export declare const darkTheme: {
+    readonly color: {
+        readonly background: {
+            readonly brand: {
+                readonly default: "#a074cc";
+                readonly secondary: "#6d4199";
+                readonly tertiary: "#36204c";
+                readonly hover: "#b897d9";
+                readonly secondaryHover: "#8851bf";
+                readonly tertiaryHover: "#523173";
+                readonly subtleLow: "rgba(136, 81, 191, 0.08)";
+                readonly subtleMedium: "rgba(136, 81, 191, 0.16)";
+            };
+            readonly action: {
+                readonly default: "#695bcc";
+                readonly secondary: "#362899";
+                readonly tertiary: "#1b144c";
+                readonly hover: "#8f84d9";
+                readonly secondaryHover: "#4432bf";
+                readonly tertiaryHover: "#291e73";
+                readonly subtleLow: "rgba(68, 50, 191, 0.08)";
+                readonly subtleMedium: "rgba(68, 50, 191, 0.16)";
+            };
+            readonly success: {
+                readonly default: "#108b4a";
+                readonly secondary: "#084625";
+                readonly tertiary: "#042312";
+                readonly hover: "#14ae5c";
+                readonly secondaryHover: "#0c6837";
+                readonly tertiaryHover: "#084625";
+                readonly subtleLow: "#06341c";
+                readonly subtleMedium: "#084625";
+            };
+            readonly warning: {
+                readonly default: "#c8a208";
+                readonly secondary: "#645104";
+                readonly tertiary: "#322802";
+                readonly hover: "#faca0a";
+                readonly secondaryHover: "#967906";
+                readonly tertiaryHover: "#4b3d03";
+                readonly subtleLow: "#4b3d03";
+                readonly subtleMedium: "#645104";
+            };
+            readonly danger: {
+                readonly default: "#bd1b19";
+                readonly secondary: "#5e0e0c";
+                readonly tertiary: "#2f0706";
+                readonly hover: "#ec221f";
+                readonly secondaryHover: "#8e1413";
+                readonly tertiaryHover: "#470a09";
+                readonly subtleLow: "rgba(236, 34, 31, 0.08)";
+                readonly subtleMedium: "rgba(236, 34, 31, 0.16)";
+            };
+            readonly info: {
+                readonly default: "#0a70c4";
+                readonly secondary: "#053862";
+                readonly tertiary: "#021c31";
+                readonly hover: "#0c8cf5";
+                readonly secondaryHover: "#075493";
+                readonly tertiaryHover: "#042a4a";
+                readonly subtleLow: "#042a4a";
+                readonly subtleMedium: "#053862";
+            };
+            readonly neutral: {
+                readonly default: "#5e6a76";
+                readonly secondary: "#2f353b";
+                readonly tertiary: "#181a1e";
+                readonly hover: "#768494";
+                readonly secondaryHover: "#474f59";
+                readonly tertiaryHover: "#23282c";
+                readonly subtleLow: "rgba(118, 132, 148, 0.08)";
+                readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+            };
+            readonly default: {
+                readonly default: "#181a1e";
+                readonly hover: "#23282c";
+                readonly glass: "rgba(12, 12, 13, 0.20)";
+                readonly onGlass: "rgba(12, 12, 13, 0.80)";
+                readonly onGlassSecondary: "rgba(12, 12, 13, 0.85)";
+                readonly onGlassTertiary: "rgba(12, 12, 13, 0.90)";
+                readonly onGlassHover: "rgba(12, 12, 13, 0.90)";
+            };
+            readonly disabled: {
+                readonly default: "#424242";
+                readonly secondary: "#323232";
+            };
+            readonly utilities: {
+                readonly scrim: "rgba(0, 0, 0, 0.7)";
+                readonly overlay: "rgba(255, 255, 255, 0.1)";
+                readonly blanket: "rgba(255, 255, 255, 0.15)";
+                readonly bgOnGlass: "rgba(0, 0, 0, 0.45)";
+                readonly bgOnGlassOnGlass: "rgba(0, 0, 0, 0.6)";
+                readonly hoverOverlay: "rgba(255, 255, 255, 0.1)";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly default: "#f1f3f4";
+                readonly secondary: "#adb5bf";
+                readonly tertiary: "#768494";
+            };
+            readonly brand: {
+                readonly default: "#b897d9";
+                readonly secondary: "#a074cc";
+                readonly tertiary: "#6d4199";
+                readonly onBrand: "#1b1026";
+                readonly onBrandSecondary: "#cfb9e5";
+                readonly onBrandTertiary: "#b897d9";
+            };
+            readonly action: {
+                readonly default: "#8f84d9";
+                readonly secondary: "#695bcc";
+                readonly tertiary: "#362899";
+                readonly onAction: "#0e0a26";
+                readonly onActionSecondary: "#b4ade5";
+                readonly onActionTertiary: "#8f84d9";
+            };
+            readonly success: {
+                readonly default: "#72ce9d";
+                readonly secondary: "#43be7d";
+                readonly tertiary: "#14ae5c";
+                readonly onSuccess: "#042312";
+                readonly onSuccessSecondary: "#a1dfbe";
+                readonly onSuccessTertiary: "#72ce9d";
+            };
+            readonly warning: {
+                readonly default: "#fcdf6c";
+                readonly secondary: "#fbd53b";
+                readonly tertiary: "#faca0a";
+                readonly onWarning: "#322802";
+                readonly onWarningSecondary: "#fdea9d";
+                readonly onWarningTertiary: "#fcdf6c";
+            };
+            readonly danger: {
+                readonly default: "#f04e4c";
+                readonly secondary: "#ec221f";
+                readonly tertiary: "#bd1b19";
+                readonly onDanger: "#2f0706";
+                readonly onDangerSecondary: "#f7a7a5";
+                readonly onDangerTertiary: "#f47a79";
+            };
+            readonly info: {
+                readonly default: "#3da3f7";
+                readonly secondary: "#0c8cf5";
+                readonly tertiary: "#0a70c4";
+                readonly onInfo: "#021c31";
+                readonly onInfoSecondary: "#9ed1fb";
+                readonly onInfoTertiary: "#6dbaf9";
+            };
+            readonly neutral: {
+                readonly default: "#f1f3f4";
+                readonly secondary: "#adb5bf";
+                readonly tertiary: "#768494";
+                readonly onNeutral: "#181a1e";
+                readonly onNeutralSecondary: "#c8ced4";
+                readonly onNeutralTertiary: "#adb5bf";
+            };
+            readonly disabled: {
+                readonly default: "#858585";
+                readonly secondary: "#646464";
+                readonly onDisabled: "#b8b8b8";
+                readonly onDisabledSecondary: "#a6a6a6";
+            };
+            readonly utilities: {
+                readonly onOverlay: "rgba(255, 255, 255, 0.80)";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly default: "#2f353b";
+                readonly secondary: "#474f59";
+                readonly tertiary: "#768494";
+                readonly subtleLow: "rgba(12, 12, 13, 0.90)";
+                readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+                readonly subtleHigh: "rgba(12, 12, 13, 0.40)";
+            };
+            readonly brand: {
+                readonly default: "#523173";
+                readonly secondary: "#6d4199";
+                readonly tertiary: "#36204c";
+                readonly onBrand: "#1b1026";
+                readonly onBrandSecondary: "#cfb9e5";
+                readonly onBrandTertiary: "#a074cc";
+            };
+            readonly action: {
+                readonly default: "#362899";
+                readonly secondary: "#291e73";
+                readonly tertiary: "#1b144c";
+                readonly onAction: "#0e0a26";
+                readonly onActionSecondary: "#8f84d9";
+                readonly onActionTertiary: "#b4ade5";
+            };
+            readonly success: {
+                readonly default: "#72ce9d";
+                readonly secondary: "#43be7d";
+                readonly tertiary: "#14ae5c";
+            };
+            readonly warning: {
+                readonly default: "#fcdf6c";
+                readonly secondary: "#fbd53b";
+                readonly tertiary: "#faca0a";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#bd1b19";
+                readonly tertiary: "#5e0e0c";
+                readonly onDanger: "#f04e4c";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#0a70c4";
+                readonly tertiary: "#053862";
+            };
+            readonly neutral: {
+                readonly default: "#adb5bf";
+                readonly secondary: "#768494";
+                readonly tertiary: "#474f59";
+                readonly onNeutral: "#181a1e";
+                readonly onNeutralSecondary: "#c8ced4";
+                readonly onNeutralTertiary: "#adb5bf";
+            };
+            readonly disabled: {
+                readonly default: "#646464";
+            };
+            readonly utilities: {
+                readonly swatch: "rgba(255, 255, 255, 0.24)";
+            };
+        };
+        readonly icon: {
+            readonly default: {
+                readonly default: "#e4e6ea";
+                readonly secondary: "#919da9";
+                readonly tertiary: "#5e6a76";
+            };
+            readonly brand: {
+                readonly default: "#b897d9";
+                readonly secondary: "#a074cc";
+                readonly tertiary: "#8851bf";
+                readonly onBrand: "#1b1026";
+                readonly onBrandSecondary: "#cfb9e5";
+                readonly onBrandTertiary: "#b897d9";
+            };
+            readonly action: {
+                readonly default: "#695bcc";
+                readonly secondary: "#4432bf";
+                readonly tertiary: "#291e73";
+                readonly onAction: "#0e0a26";
+                readonly onActionSecondary: "#b4ade5";
+                readonly onActionTertiary: "#8f84d9";
+            };
+            readonly success: {
+                readonly default: "#43be7d";
+                readonly secondary: "#108b4a";
+                readonly tertiary: "#084625";
+                readonly onSuccess: "#042312";
+                readonly onSuccessSecondary: "#a1dfbe";
+                readonly onSuccessTertiary: "#72ce9d";
+            };
+            readonly warning: {
+                readonly default: "#fbd53b";
+                readonly secondary: "#c8a208";
+                readonly tertiary: "#645104";
+                readonly onWarning: "#322802";
+                readonly onWarningSecondary: "#fdea9d";
+                readonly onWarningTertiary: "#fcdf6c";
+            };
+            readonly danger: {
+                readonly default: "#f04e4c";
+                readonly secondary: "#ec221f";
+                readonly tertiary: "#bd1b19";
+                readonly onDanger: "#2f0706";
+                readonly onDangerSecondary: "#f7a7a5";
+                readonly onDangerTertiary: "#f47a79";
+            };
+            readonly info: {
+                readonly default: "#3da3f7";
+                readonly secondary: "#0a70c4";
+                readonly tertiary: "#053862";
+                readonly onInfo: "#021c31";
+                readonly onInfoSecondary: "#9ed1fb";
+                readonly onInfoTertiary: "#6dbaf9";
+            };
+            readonly neutral: {
+                readonly default: "#e4e6ea";
+                readonly secondary: "#919da9";
+                readonly tertiary: "#5e6a76";
+                readonly onNeutral: "#181a1e";
+                readonly onNeutralSecondary: "#c8ced4";
+                readonly onNeutralTertiary: "#adb5bf";
+            };
+            readonly disabled: {
+                readonly default: "#858585";
+                readonly secondary: "#646464";
+                readonly onDisabled: "#b8b8b8";
+                readonly onDisabledSecondary: "#a6a6a6";
+            };
+            readonly utilities: {
+                readonly onOverlay: "rgba(255, 255, 255, 0.80)";
+            };
+        };
+    };
+};
+export type DarkTheme = typeof darkTheme;
+//# sourceMappingURL=dark.d.ts.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Theme System
+ * Export all available themes
+ */
+export { lightTheme } from './light';
+export { darkTheme } from './dark';
+export type { LightTheme } from './light';
+export type { DarkTheme } from './dark';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/themes/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}