@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260331.091034Z

package/src/css/color.css

@@ -0,0 +1,136 @@
+:root {
+  --background: oklch(1 0 0); /* White */
+  --foreground: oklch(0.145 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --tooltips: oklch(97% 0.014 254.604); /* Light Blue */
+
+  --primary: oklch(44.72% 0.193316 261.0044); /* Dark Blue */
+  --primary-background: oklch(99.26% 0.0105 196.99); /* Light Blue */
+
+  --secondary: oklch(0.205 0 0);
+  --secondary-background: oklch(0.97 0 0);
+
+  --muted: oklch(0.556 0 0);
+  --muted-background: oklch(0.97 0 0);
+
+  --destructive: oklch(50.5% 0.213 27.518); /* Dark Red */
+  --destructive-background: oklch(97.1% 0.013 17.38); /* Light Red */
+
+  --success: oklch(52.7% 0.154 150.069); /* Dark Green */
+  --success-background: oklch(98.2% 0.018 155.826); /* Light Green */
+
+  --attention: oklch(55.48% 0.12708 62.5245); /* Dark Yellow */
+  --attention-background: oklch(98.7% 0.026 102.212); /* Light Yellow */
+
+  --done: oklch(49.6% 0.265 301.924); /* Dark Purple */
+  --done-background: oklch(97.7% 0.014 308.299); /* Light Purple */
+
+  --info: oklch(48.8% 0.243 264.376); /* Dark Blue */
+  --info-background: oklch(97% 0.014 254.604); /* Light Blue */
+
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  --topnav-background: oklch(0.985 0 0);
+  --topnav-foreground: oklch(0.145 0 0);
+  --topnav-primary: oklch(0.205 0 0);
+  --topnav-primary-foreground: oklch(0.985 0 0);
+  --topnav-accent: oklch(0.97 0 0);
+  --topnav-accent-foreground: oklch(0.205 0 0);
+  --topnav-border: oklch(0.922 0 0);
+  --topnav-ring: oklch(0.708 0 0);
+
+  --preview: oklch(46.95% 0.233 303.17);
+  --staging: oklch(63.89% 0.103 201.59);
+  --development: oklch(44.30% 0.193 261.11);
+
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+
+  --tooltips: oklch(70.7% 0.165 254.624); /* Mid Blue */
+
+  --primary: oklch(60.05% 0.1735 260.17); /* Mid Blue */
+  --primary-background: oklch(1 0 0); /* White */
+
+  --secondary: oklch(0.985 0 0);
+  --secondary-background: oklch(0.269 0 0);
+
+  --muted: oklch(0.708 0 0);
+  --muted-background: oklch(0.269 0 0); /* Dark Gray */
+
+  --destructive: oklch(70.4% 0.191 22.216); /* Mid Red */
+  --destructive-background: oklch(70.4% 0.191 22.216 / 0.2); /* Mid Red */
+
+  --success: oklch(79.2% 0.209 151.711); /* Mid Green */
+  --success-background: oklch(79.2% 0.209 151.711 / 0.2); /* Mid Green */
+
+  --attention: oklch(85.2% 0.199 91.936); /* Mid Yellow */
+  --attention-background: oklch(85.2% 0.199 91.936 / 0.2); /* Mid Yellow */
+
+  --done: oklch(71.4% 0.203 305.504); /* Mid Purple */
+  --done-background: oklch(71.4% 0.203 305.504 / 0.2); /* Mid Purple */
+
+  --info: oklch(70.7% 0.165 254.624); /* Mid Blue */
+  --info-background: oklch(70.7% 0.165 254.624 / 0.2); /* Mid Blue */
+
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  --topnav-background: oklch(0.205 0 0);
+  --topnav-foreground: oklch(0.985 0 0);
+  --topnav-primary: oklch(0.488 0.243 264.376);
+  --topnav-primary-foreground: oklch(0.985 0 0);
+  --topnav-accent: oklch(0.269 0 0);
+  --topnav-accent-foreground: oklch(0.985 0 0);
+  --topnav-border: oklch(0.269 0 0);
+  --topnav-ring: oklch(0.439 0 0);
+
+  --preview: oklch(46.95% 0.233 303.17);
+  --staging: oklch(63.89% 0.103 201.59);
+  --development: oklch(44.30% 0.193 261.11);
+
+}

package/src/css/custom-tooltips.css

@@ -0,0 +1,64 @@
+/* Custom styling for title attribute tooltips */
+button[title], a[title] {
+  position: relative !important;
+}
+
+button[title]::before, a[title]::before {
+  content: "";
+  display: none;
+}
+
+button[title]:hover::before, a[title]:hover::before {
+  content: attr(title);
+  display: block;
+  position: absolute;
+  top: -42px; /* Position tooltip above the element */
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 80px;
+  max-width: 200px;
+  padding: 6px 8px;
+  background-color: rgba(15, 23, 42, 0.95); /* slate-900 with opacity */
+  color: white;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  line-height: 1.4;
+  border-radius: 4px;
+  white-space: nowrap;
+  z-index: 1000;
+  pointer-events: none;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(100, 116, 139, 0.2); /* slate-400 with opacity */
+}
+
+/* Arrow for the tooltip */
+button[title]:hover::after, a[title]:hover::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -6px; /* Position arrow at the bottom of tooltip */
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px;
+  border-style: solid;
+  border-color: transparent transparent rgba(15, 23, 42, 0.95) transparent; /* Arrow pointing down */
+  z-index: 1000;
+}
+
+/* Light mode specific styles */
+button[title]:hover::before, a[title]:hover::before {
+  background-color: rgba(15, 23, 42, 0.95); /* slate-900 with opacity */
+  color: rgba(248, 250, 252, 1); /* slate-50 */
+}
+
+/* Dark mode adjustment */
+.dark button[title]:hover::before, .dark a[title]:hover::before {
+  background-color: rgba(30, 41, 59, 0.95); /* slate-800 with opacity */
+  color: rgba(248, 250, 252, 1); /* slate-50 */
+  border: 1px solid rgba(71, 85, 105, 0.4); /* slate-600 */
+}
+
+.dark button[title]:hover::after, .dark a[title]:hover::after {
+  border-color: transparent transparent rgba(30, 41, 59, 0.95) transparent;
+}

package/src/css/index.css

@@ -0,0 +1,27 @@
+/**
+ * Vertesia shared styles
+ *
+ * Import this file to get the full set of design tokens, theme bindings,
+ * utility overrides, tooltips, and base layer rules.
+ *
+ * Usage (apps with Vite alias @vertesia/ui → src/):
+ *   @import "@vertesia/ui/css/index.css";
+ *
+ * Usage (packages via exports):
+ *   @import "@vertesia/ui/styles.css";
+ *
+ * Granular imports:
+ *   @import "@vertesia/ui/css/color.css";
+ *   @import "@vertesia/ui/css/theme.css";
+ *
+ * Typography (.vprose) is opt-in since it requires @tailwindcss/typography:
+ *   @import "@vertesia/ui/css/typography.css" layer(base);
+ */
+
+@import "./color.css" layer(base);
+@import "./theme.css" layer(theme);
+@import "./custom-tooltips.css" layer(utilities);
+@import "./utilities.css";
+@import "./base.css";
+
+@custom-variant dark (&:is(.dark *));

package/src/css/theme.css

@@ -0,0 +1,86 @@
+@theme static {
+
+  --radius: 0.625rem;
+  --radius-xs: calc(var(--radius) - 8px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-tooltips: var(--tooltips);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-link: var(--primary);
+  --color-link-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-background: var(--secondary-background);
+
+  --color-muted: var(--muted);
+  --color-muted-background: var(--muted-background);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-background: var(--destructive-background);
+
+  --color-success: var(--success);
+  --color-success-background: var(--success-background);
+
+  --color-attention: var(--attention);
+  --color-attention-background: var(--attention-background);
+
+  --color-done: var(--done);
+  --color-done-background: var(--done-background);
+
+  --color-info: var(--info);
+  --color-info-background: var(--info-background);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-topnav: var(--topnav-background);
+  --color-topnav-foreground: var(--topnav-foreground);
+  --color-topnav-primary: var(--topnav-primary);
+  --color-topnav-primary-foreground: var(--topnav-primary-foreground);
+  --color-topnav-accent: var(--topnav-accent);
+  --color-topnav-accent-foreground: var(--topnav-accent-foreground);
+  --color-topnav-border: var(--topnav-border);
+  --color-topnav-ring: var(--topnav-ring);
+
+  --color-preview: var(--preview);
+  --color-staging: var(--staging);
+  --color-development: var(--development);
+
+  --font-sans:
+    Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    Fira mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+}

package/src/css/typography.css

@@ -0,0 +1,88 @@
+.vprose {
+    @apply prose text-foreground max-w-none;
+}
+
+.vprose p {
+    @apply bg-transparent my-2;
+}
+
+.vprose a {
+    @apply text-info hover:text-info/80;
+}
+
+.vprose pre, .vprose code {
+    @apply !bg-muted text-muted my-2;
+}
+
+.vprose h1,
+.vprose h2,
+.vprose h3,
+.vprose h4,
+.vprose h5,
+.vprose h6 {
+    @apply text-foreground;
+}
+
+.vprose strong {
+    @apply text-foreground font-bold;
+}
+
+.vprose em {
+    @apply italic;
+}
+
+.vprose ul {
+    @apply my-3 pl-6 list-disc space-y-1;
+}
+
+.vprose ol {
+    @apply my-3 pl-6 list-decimal space-y-1;
+}
+
+.vprose li {
+    @apply text-mixer-foreground/50 my-2 pl-1;
+}
+
+.vprose blockquote {
+    @apply border-l-4 border-muted/30 dark:border-muted pl-4 italic text-muted my-3;
+}
+
+.vprose hr {
+    @apply border-muted/30 dark:border-muted my-4;
+}
+
+.vprose h1 {
+    @apply font-bold text-2xl my-2;
+}
+
+.vprose h2 {
+    @apply font-bold text-xl my-2;
+}
+
+.vprose h3 {
+    @apply font-bold text-lg my-2;
+}
+
+.vprose table {
+    @apply min-w-full border-collapse border border-muted/30 my-4;
+}
+
+.vprose th {
+    @apply border border-muted/30 bg-mixer-muted/50 px-4 py-2 text-left text-muted font-bold;
+}
+
+.vprose td {
+    @apply border border-muted/30 px-4 py-2 text-muted;
+}
+
+.vprose code {
+    @apply font-mono text-sm;
+}
+
+.vprose :not(pre) > code {
+    @apply px-1.5 py-0.5 rounded text-muted bg-muted/20 dark:bg-muted/30;
+}
+
+.vprose .code-language-indicator {
+    @apply text-xs px-3 py-1 rounded-t-md font-mono border-t border-l border-r -mb-2;
+}

package/src/css/utilities.css

@@ -0,0 +1,72 @@
+:root {
+    --mixer: oklch(1 0 0);
+  }
+  .dark {
+    --mixer: oklch(0 0 0);
+  }
+  @utility text-mixer-* {
+    color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 0.7%));
+  }
+
+  @utility text-disabled-* {
+    color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(50 * 0.7%));
+  }
+
+  @utility bg-* {
+    background-color: --value(--color-*-background, [*])
+  }
+
+  @utility bg-mixer-* {
+    background-color: color-mix(in oklab, --value(--color-*-background, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility border-* {
+    border-color: --value(--color-*, [*])
+  }
+
+  @utility border-mixer-* {
+    border-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+  @utility border-disabled-* {
+    border-color: color-mix(in oklab, --value(--color-*-background, [*]), var(--mixer) calc(50 * 0.7%));
+  }
+
+  @utility decoration-mixer-* {
+    text-decoration-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility outline-mixer-* {
+    outline-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility shadow-mixer-* {
+    --tw-shadow-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility inset-shadow-mixer-* {
+    --tw-inset-shadow-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility ring-mixer-* {
+    --tw-ring-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility inset-ring-mixer-* {
+    --tw-inset-ring-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility accent-mixer-* {
+    accent-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility caret-mixer-* {
+    caret-color: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility fill-mixer-* {
+    fill: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }
+
+  @utility stroke-mixer-* {
+    stroke: color-mix(in oklab, --value(--color-*, [*]), var(--mixer) calc(( (--modifier(integer, var(--modifier-default))) ) * 1%));
+  }

package/src/env/index.ts

@@ -6,6 +6,7 @@ import { AuthTokenPayload } from "@vertesia/common";
 export interface EnvProps {
     name: string; // the app name
     version: string,
+    commitTimestamp?: string, // ISO timestamp of the deployed commit
     sdkVersion?: string, // the @vertesia/ui package version
     isLocalDev: boolean,
     isDocker: boolean,
@@ -18,12 +19,14 @@ export interface EnvProps {
     firebase?: {
         apiKey: string,
         authDomain: string,
+        authorizedDomains?: string[],
         projectId: string,
         appId?: string,
         providerType?: string,
     },
     region?: string,
-    datadog?: boolean,
+    datadogRum?: boolean,
+    datadogLogs?: boolean,
     logger?: {
         info: (msg: string, ...args: any) => void,
         warn: (msg: string, ...args: any) => void,
@@ -55,6 +58,10 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         return this.prop("version");
     }
 
+    get commitTimestamp() {
+        return this._props?.commitTimestamp;
+    }
+
     get sdkVersion() {
         return this._props?.sdkVersion;
     }
@@ -68,19 +75,11 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
     }
 
     get isProd() {
-        return this.type === "production";
-    }
-
-    get isStable() {
-        return this.type === "production" || this.type === "preview" || this.type === "disaster-recovery";
+        return this.type === "production" || this.type === "preview";
     }
 
     get isDev() {
-        return !this.isStable;
-    }
-
-    get isPreview() {
-        return this.type === "preview";
+        return !this.isProd;
     }
 
     get isLocalDev() {
@@ -102,9 +101,21 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
     get region() {
         return this._props?.region;
     }
-
+    
+    /**
+     * @deprecated Use datadogRum and datadogLogs instead for more granular control. This will be removed in a future release. Is an alias for DatadogRUM
+     * 
+     */
     get datadog() {
-        return this._props?.datadog ?? false;
+        return this.datadogRum;
+    }
+
+    get datadogRum() {
+        return this._props?.datadogRum ?? false;
+    }
+
+    get datadogLogs() {
+        return this._props?.datadogLogs ?? false;
     }
 
     get logger() {