npm - @salesforce/templates - Versions diffs - 66.11.0 → 66.12.0 - Mend

@salesforce/templates 66.11.0 → 66.12.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 (438) hide show

package/lib/templates/uiBundles/angularbasic/src/index.html CHANGED Viewed

@@ -6,6 +6,7 @@
 		<base href="/" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/x-icon" href="favicon.ico" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 	</head>
 	<body>
 		<app-root></app-root>

package/lib/templates/uiBundles/angularbasic/src/styles.scss ADDED Viewed

@@ -0,0 +1,170 @@
+@import 'tailwindcss';
+@layer base {
+	html,
+	body {
+		@apply min-h-screen;
+	}
+	body {
+		@apply antialiased bg-white;
+	}
+}
+@custom-variant dark (&:is(.dark *));
+/*
+ * shadcn design tokens, ported from the React base app's global.css so the
+ * shared object-search feature (bg-card, text-muted-foreground, border-border,
+ * rounded-* via --radius, etc.) renders identically in Angular. The React base
+ * also imports tw-animate-css and shadcn/tailwind.css (accordion keyframes +
+ * data-* variants) — omitted here as they are not installed for the Angular
+ * base and are not required for layout/color parity.
+ */
+@theme inline {
+	--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-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--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);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--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);
+}
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--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);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--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);
+}
+.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);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--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);
+}
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+/*
+ * Angular Material colour re-skin — layered on top of the custom M3 theme
+ * defined in theme.scss. The theme owns density (compact control heights) and
+ * seeds the base `--mat-sys-*` system variables; here we remap the colour and
+ * shape system variables to our shadcn design tokens so every Material
+ * component adopts the shadcn look without touching component code. This block
+ * loads after theme.scss, so these values win.
+ *
+ * Control sizing is NOT set here — density handles heights, and any remaining
+ * form-field-specific styling lives in the component's own scoped CSS.
+ */
+:root {
+	--mat-sys-primary: var(--primary);
+	--mat-sys-on-primary: var(--primary-foreground);
+	--mat-sys-surface: var(--background);
+	--mat-sys-on-surface: var(--foreground);
+	--mat-sys-surface-variant: var(--muted);
+	--mat-sys-on-surface-variant: var(--muted-foreground);
+	--mat-sys-outline: var(--border);
+	--mat-sys-outline-variant: var(--border);
+	--mat-sys-error: var(--destructive);
+	--mat-sys-corner-small: var(--radius-sm);
+	--mat-sys-corner-medium: var(--radius-md);
+	--mat-sys-corner-large: var(--radius-lg);
+	// Card subtitle — Material defaults this to `--mat-sys-on-surface` (the same
+	// dark colour as the title). React renders the card description in muted
+	// grey (`text-muted-foreground`), so point the subtitle token there.
+	--mat-card-subtitle-text-color: var(--muted-foreground);
+}

package/lib/templates/uiBundles/angularbasic/src/theme.scss ADDED Viewed

@@ -0,0 +1,39 @@
+// Copyright (c) 2026, Salesforce, Inc.,
+// All rights reserved.
+// For full license text, see the LICENSE.txt file
+// Angular Material M3 theme.
+// See https://material.angular.dev/guide/theming.
+//
+// This replaces the prebuilt azure-blue theme so we can set a negative
+// `density` — the standard, system-driven way to get the compact control
+// heights the React reference uses (no hardcoded pixel heights anywhere).
+//
+// Colour is intentionally NOT finalised here: the shadcn design tokens are
+// applied on top by remapping `--mat-sys-*` in styles.css, which loads after
+// this file. The palette below only seeds Material's base system variables.
+@use '@angular/material' as mat;
+html {
+	@include mat.theme(
+		(
+			color: (
+				theme-type: light,
+				primary: mat.$azure-palette,
+				tertiary: mat.$blue-palette,
+			),
+			// Font family reads Tailwind's system stack (`--font-sans`, the same
+			// default the React reference uses) instead of Material's Roboto, so
+			// Material components and Tailwind-styled text share one font. Tailwind
+			// is the single source of the family; the typescale sizes/weights stay
+			// Material's own.
+			typography: (
+					plain-family: var(--font-sans),
+					brand-family: var(--font-sans),
+				),
+			// Compact density (scale 0 to -5). Drives control heights via
+			// Material's own tokens instead of hardcoded px.
+			density: -2,
+		)
+	);
+}