@adarsh.nishad/activityual-ui 0.0.0-stage → 0.2.0

package/dist/tokens.d.ts

@@ -0,0 +1,174 @@
+export declare const tokens: {
+    readonly name: "Vaulto Obsidian";
+    readonly version: "3.0.0";
+    readonly colors: {
+        readonly canvasBase: "#080808";
+        readonly background: "#080808";
+        readonly surface: "#272727";
+        readonly surfaceDim: "#111111";
+        readonly surfaceSubtle: "#1B1B1B";
+        readonly surfaceCard: "#202020";
+        readonly surfaceElevated: "#2C2C2C";
+        readonly surfaceBright: "#353535";
+        readonly surfaceContainer: "#1D1D1D";
+        readonly surfaceContainerLow: "#151515";
+        readonly surfaceContainerLowest: "#080808";
+        readonly surfaceContainerHigh: "#272727";
+        readonly surfaceContainerHighest: "#333333";
+        readonly surfaceHover: "#353535";
+        readonly surfaceActive: "#414141";
+        readonly surfaceInset: "#121212";
+        readonly bgCanvas: "#080808";
+        readonly textPrimary: "#F5F5F5";
+        readonly textSecondary: "#A5A5A5";
+        readonly textTertiary: "#707070";
+        readonly textMuted: "#707070";
+        readonly textInverse: "#101010";
+        readonly onSurface: "#F5F5F5";
+        readonly onSurfaceVariant: "#A5A5A5";
+        readonly inverseSurface: "#F5F5F5";
+        readonly inverseOnSurface: "#181818";
+        readonly primary: "#FF4305";
+        readonly primaryHover: "#E93B00";
+        readonly primaryContainer: "#FF4305";
+        readonly primarySoft: "rgba(255, 67, 5, 0.12)";
+        readonly primaryFixed: "#FFDAD3";
+        readonly primaryFixedDim: "#FFB4A4";
+        readonly onPrimary: "#FFFFFF";
+        readonly onPrimaryContainer: "#FFFFFF";
+        readonly accentGlow: "rgba(255, 67, 5, 0.25)";
+        readonly statusDone: "#25D366";
+        readonly statusDoneBg: "rgba(37, 211, 102, 0.12)";
+        readonly statusDoneBorder: "rgba(37, 211, 102, 0.25)";
+        readonly secondary: "#25D366";
+        readonly secondaryContainer: "#1EA852";
+        readonly statusMissed: "#FF3434";
+        readonly statusMissedBg: "rgba(255, 52, 52, 0.12)";
+        readonly statusMissedBorder: "rgba(255, 52, 52, 0.25)";
+        readonly error: "#FF3434";
+        readonly errorContainer: "#D32F2F";
+        readonly statusPending: "#F59E0B";
+        readonly statusPendingBg: "rgba(245, 158, 11, 0.12)";
+        readonly statusPendingBorder: "rgba(245, 158, 11, 0.25)";
+        readonly neutral: "#929292";
+        readonly tertiary: "#A5A5A5";
+        readonly borderSubtle: "rgba(255, 255, 255, 0.05)";
+        readonly borderStrong: "rgba(255, 255, 255, 0.12)";
+        readonly borderHighlight: "rgba(255, 255, 255, 0.1)";
+        readonly outline: "#383838";
+        readonly outlineVariant: "#555555";
+    };
+    readonly typography: {
+        readonly fontFamilySans: "Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+        readonly fontFamilyMono: "'JetBrains Mono', monospace";
+        readonly sizes: {
+            readonly displayLg: {
+                readonly fontSize: "2rem";
+                readonly lineHeight: "2.25rem";
+                readonly fontWeight: "700";
+                readonly letterSpacing: "-0.03em";
+            };
+            readonly displayLgMobile: {
+                readonly fontSize: "1.75rem";
+                readonly lineHeight: "2rem";
+                readonly fontWeight: "700";
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly headlineLg: {
+                readonly fontSize: "1.5rem";
+                readonly lineHeight: "1.875rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly headlineMd: {
+                readonly fontSize: "1.125rem";
+                readonly lineHeight: "1.5rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "-0.015em";
+            };
+            readonly headlineSm: {
+                readonly fontSize: "1rem";
+                readonly lineHeight: "1.375rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly statCounter: {
+                readonly fontSize: "1.875rem";
+                readonly lineHeight: "2.125rem";
+                readonly fontWeight: "700";
+                readonly letterSpacing: "-0.03em";
+            };
+            readonly bodyLg: {
+                readonly fontSize: "0.9375rem";
+                readonly lineHeight: "1.375rem";
+                readonly fontWeight: "400";
+                readonly letterSpacing: "0em";
+            };
+            readonly bodyMd: {
+                readonly fontSize: "0.8125rem";
+                readonly lineHeight: "1.25rem";
+                readonly fontWeight: "400";
+                readonly letterSpacing: "0em";
+            };
+            readonly bodySm: {
+                readonly fontSize: "0.6875rem";
+                readonly lineHeight: "1rem";
+                readonly fontWeight: "400";
+                readonly letterSpacing: "0.01em";
+            };
+            readonly labelMd: {
+                readonly fontSize: "0.8125rem";
+                readonly lineHeight: "1.125rem";
+                readonly fontWeight: "500";
+                readonly letterSpacing: "0.01em";
+            };
+            readonly labelSm: {
+                readonly fontSize: "0.6875rem";
+                readonly lineHeight: "0.9375rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "0.04em";
+            };
+        };
+    };
+    readonly spacing: {
+        readonly spaceXs: "0.25rem";
+        readonly spaceSm: "0.5rem";
+        readonly spaceMd: "0.75rem";
+        readonly spaceLg: "1.25rem";
+        readonly spaceXl: "1.5rem";
+        readonly space2xl: "2.5rem";
+        readonly gutter: "0.75rem";
+        readonly gutterDesktop: "1rem";
+        readonly margin: "1rem";
+        readonly marginTablet: "1.25rem";
+        readonly marginDesktop: "1.5rem";
+    };
+    readonly radii: {
+        readonly sm: "0.5rem";
+        readonly DEFAULT: "0.6875rem";
+        readonly md: "0.6875rem";
+        readonly lg: "0.9375rem";
+        readonly xl: "1.125rem";
+        readonly full: "9999px";
+    };
+    readonly elevation: {
+        readonly glassLow: {
+            readonly background: "rgba(32, 32, 32, 0.7)";
+            readonly backdropFilter: "blur(12px)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.04)";
+        };
+        readonly glassCard: {
+            readonly background: "linear-gradient(145deg, rgba(42, 42, 42, 0.65) 0%, rgba(24, 24, 24, 0.8) 100%)";
+            readonly backdropFilter: "blur(20px)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.05)";
+            readonly boxShadow: "0 10px 28px -4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
+        };
+        readonly glassElevated: {
+            readonly background: "linear-gradient(145deg, rgba(50, 50, 50, 0.75) 0%, rgba(30, 30, 30, 0.88) 100%)";
+            readonly backdropFilter: "blur(24px)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.08)";
+            readonly boxShadow: "0 16px 36px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12)";
+        };
+    };
+};
+export type ThemeTokens = typeof tokens;

package/dist/tokens.js

@@ -0,0 +1,125 @@
+export const tokens = {
+    name: 'Vaulto Obsidian',
+    version: '3.0.0',
+    colors: {
+        // Canvas and surfaces (Vaulto pure charcoal & near-black foundation)
+        canvasBase: '#080808',
+        background: '#080808',
+        surface: '#272727',
+        surfaceDim: '#111111',
+        surfaceSubtle: '#1B1B1B',
+        surfaceCard: '#202020',
+        surfaceElevated: '#2C2C2C',
+        surfaceBright: '#353535',
+        surfaceContainer: '#1D1D1D',
+        surfaceContainerLow: '#151515',
+        surfaceContainerLowest: '#080808',
+        surfaceContainerHigh: '#272727',
+        surfaceContainerHighest: '#333333',
+        surfaceHover: '#353535',
+        surfaceActive: '#414141',
+        surfaceInset: '#121212',
+        bgCanvas: '#080808',
+        // Text and typography
+        textPrimary: '#F5F5F5',
+        textSecondary: '#A5A5A5',
+        textTertiary: '#707070',
+        textMuted: '#707070',
+        textInverse: '#101010',
+        onSurface: '#F5F5F5',
+        onSurfaceVariant: '#A5A5A5',
+        inverseSurface: '#F5F5F5',
+        inverseOnSurface: '#181818',
+        // Primary accent (Vaulto Signature Orange)
+        primary: '#FF4305',
+        primaryHover: '#E93B00',
+        primaryContainer: '#FF4305',
+        primarySoft: 'rgba(255, 67, 5, 0.12)',
+        primaryFixed: '#FFDAD3',
+        primaryFixedDim: '#FFB4A4',
+        onPrimary: '#FFFFFF',
+        onPrimaryContainer: '#FFFFFF',
+        accentGlow: 'rgba(255, 67, 5, 0.25)',
+        // Success & Completion (Vaulto Financial Positive)
+        statusDone: '#25D366',
+        statusDoneBg: 'rgba(37, 211, 102, 0.12)',
+        statusDoneBorder: 'rgba(37, 211, 102, 0.25)',
+        secondary: '#25D366',
+        secondaryContainer: '#1EA852',
+        // Warning & Missed (Vaulto Financial Negative)
+        statusMissed: '#FF3434',
+        statusMissedBg: 'rgba(255, 52, 52, 0.12)',
+        statusMissedBorder: 'rgba(255, 52, 52, 0.25)',
+        error: '#FF3434',
+        errorContainer: '#D32F2F',
+        // Pending & Neutral Status
+        statusPending: '#F59E0B',
+        statusPendingBg: 'rgba(245, 158, 11, 0.12)',
+        statusPendingBorder: 'rgba(245, 158, 11, 0.25)',
+        neutral: '#929292',
+        tertiary: '#A5A5A5',
+        // Borders & Lines
+        borderSubtle: 'rgba(255, 255, 255, 0.05)',
+        borderStrong: 'rgba(255, 255, 255, 0.12)',
+        borderHighlight: 'rgba(255, 255, 255, 0.1)',
+        outline: '#383838',
+        outlineVariant: '#555555'
+    },
+    typography: {
+        fontFamilySans: "Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        fontFamilyMono: "'JetBrains Mono', monospace",
+        sizes: {
+            displayLg: { fontSize: '2rem', lineHeight: '2.25rem', fontWeight: '700', letterSpacing: '-0.03em' },
+            displayLgMobile: { fontSize: '1.75rem', lineHeight: '2rem', fontWeight: '700', letterSpacing: '-0.02em' },
+            headlineLg: { fontSize: '1.5rem', lineHeight: '1.875rem', fontWeight: '600', letterSpacing: '-0.02em' },
+            headlineMd: { fontSize: '1.125rem', lineHeight: '1.5rem', fontWeight: '600', letterSpacing: '-0.015em' },
+            headlineSm: { fontSize: '1rem', lineHeight: '1.375rem', fontWeight: '600', letterSpacing: '-0.01em' },
+            statCounter: { fontSize: '1.875rem', lineHeight: '2.125rem', fontWeight: '700', letterSpacing: '-0.03em' },
+            bodyLg: { fontSize: '0.9375rem', lineHeight: '1.375rem', fontWeight: '400', letterSpacing: '0em' },
+            bodyMd: { fontSize: '0.8125rem', lineHeight: '1.25rem', fontWeight: '400', letterSpacing: '0em' },
+            bodySm: { fontSize: '0.6875rem', lineHeight: '1rem', fontWeight: '400', letterSpacing: '0.01em' },
+            labelMd: { fontSize: '0.8125rem', lineHeight: '1.125rem', fontWeight: '500', letterSpacing: '0.01em' },
+            labelSm: { fontSize: '0.6875rem', lineHeight: '0.9375rem', fontWeight: '600', letterSpacing: '0.04em' }
+        }
+    },
+    spacing: {
+        spaceXs: '0.25rem',
+        spaceSm: '0.5rem',
+        spaceMd: '0.75rem',
+        spaceLg: '1.25rem',
+        spaceXl: '1.5rem',
+        space2xl: '2.5rem',
+        gutter: '0.75rem',
+        gutterDesktop: '1rem',
+        margin: '1rem',
+        marginTablet: '1.25rem',
+        marginDesktop: '1.5rem'
+    },
+    radii: {
+        sm: '0.5rem',
+        DEFAULT: '0.6875rem',
+        md: '0.6875rem',
+        lg: '0.9375rem',
+        xl: '1.125rem',
+        full: '9999px'
+    },
+    elevation: {
+        glassLow: {
+            background: 'rgba(32, 32, 32, 0.7)',
+            backdropFilter: 'blur(12px)',
+            border: '1px solid rgba(255, 255, 255, 0.04)'
+        },
+        glassCard: {
+            background: 'linear-gradient(145deg, rgba(42, 42, 42, 0.65) 0%, rgba(24, 24, 24, 0.8) 100%)',
+            backdropFilter: 'blur(20px)',
+            border: '1px solid rgba(255, 255, 255, 0.05)',
+            boxShadow: '0 10px 28px -4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08)'
+        },
+        glassElevated: {
+            background: 'linear-gradient(145deg, rgba(50, 50, 50, 0.75) 0%, rgba(30, 30, 30, 0.88) 100%)',
+            backdropFilter: 'blur(24px)',
+            border: '1px solid rgba(255, 255, 255, 0.08)',
+            boxShadow: '0 16px 36px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12)'
+        }
+    }
+};

package/package.json

@@ -1,6 +1,40 @@
 {
   "name": "@adarsh.nishad/activityual-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "check": "tsc --noEmit",
+    "build": "tsc",
+    "start": "vite --open",
+    "dev": "vite",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "typescript": "6.0.3"
+  }
+}