@salesforce/ui-bundle-template-base-angular-app 11.60.0 → 11.62.0

package/src/force-app/main/default/uiBundles/base-angular-app/src/{styles.scss → styles.css}

@@ -1,4 +1,8 @@
-@import 'tailwindcss';
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css';
+@import '@spartan-ng/brain/hlm-tailwind-preset.css';
 
 @layer base {
 	html,
@@ -14,12 +18,8 @@
 @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.
+ * shadcn design tokens — identical to the React base app's global.css.
+ * Spartan/UI helm components read these CSS variables directly.
  */
 @theme inline {
 	--color-background: var(--background);
@@ -137,34 +137,3 @@
 		@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/src/force-app/main/default/uiBundles/base-angular-app/tsconfig.json

@@ -13,7 +13,10 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
-    "module": "preserve"
+    "module": "preserve",
+    "paths": {
+      "@spartan-ng/styles/*": ["./src/app/shared/spartan/*/src/index.ts"]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/_field-size.scss

@@ -1,42 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-/*
- * Shared height scale for the form-field wrappers (app-input, app-select,
- * app-date-picker): sm = 24px, default = 32px, lg = 40px.
- *
- * Material's density scale only reaches 36px at its -5 floor, so these compact
- * heights can't come from `mat.form-field-density`. Instead we set the two M3
- * tokens that drive the height directly:
- *   --mat-form-field-container-height          -> `.mat-mdc-form-field-flex` min-height
- *   --mat-form-field-container-vertical-padding -> infix padding-top / -bottom
- *
- * These are CSS custom properties, so setting them on the wrapper's own
- * `mat-form-field` (an in-view element that matches under emulated
- * encapsulation) is enough — they INHERIT down to Material's internal flex /
- * infix elements. No `::ng-deep` and no global classes needed. This mirrors how
- * `app-button` sizes work (it sets `--mat-button-*-container-height` tokens).
- */
-@mixin apply($height, $vertical-padding) {
-	--mat-form-field-container-height: #{$height};
-	--mat-form-field-container-vertical-padding: #{$vertical-padding};
-}
-
-/*
- * Emit the three size classes. Consumers opt in via `size` on the wrapper,
- * which renders `size-sm | size-default | size-lg` on the mat-form-field.
- */
-@mixin sizes {
-	.size-sm {
-		@include apply(1.5rem, 0.25rem); // 24px, 4px
-	}
-	.size-default {
-		@include apply(2rem, 0.5rem); // 32px, 8px
-	}
-	.size-lg {
-		@include apply(2.5rem, 0.75rem); // 40px, 12px
-	}
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/button/button.scss

@@ -1,112 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-@use '@angular/material' as mat;
-
-// Compact density themes — Material's canonical heights (36 / 32 / 28px).
-$-lg: mat.define-theme(
-	(
-		density: (
-			scale: -1,
-		),
-	)
-);
-$-md: mat.define-theme(
-	(
-		density: (
-			scale: -2,
-		),
-	)
-);
-$-sm: mat.define-theme(
-	(
-		density: (
-			scale: -3,
-		),
-	)
-);
-
-@mixin -height($h) {
-	--mat-button-filled-container-height: #{$h};
-	--mat-button-outlined-container-height: #{$h};
-	--mat-button-text-container-height: #{$h};
-	--mat-button-tonal-container-height: #{$h};
-	--mat-button-protected-container-height: #{$h};
-}
-
-@mixin -label-size($s) {
-	--mat-button-filled-label-text-size: #{$s};
-	--mat-button-outlined-label-text-size: #{$s};
-	--mat-button-text-label-text-size: #{$s};
-	--mat-button-tonal-label-text-size: #{$s};
-	--mat-button-protected-label-text-size: #{$s};
-}
-
-:host {
-	display: inline-flex;
-}
-
-.mat-mdc-button-base {
-	width: 100%;
-	font-weight: 500;
-	--mat-button-filled-container-shape: var(--radius-md);
-	--mat-button-outlined-container-shape: var(--radius-md);
-	--mat-button-text-container-shape: var(--radius-md);
-	--mat-button-tonal-container-shape: var(--radius-md);
-	--mat-button-protected-container-shape: var(--radius-md);
-}
-
-// Heights via Material's density scale; 24px (xs) sits below the button
-// density floor (-3 = 28px), so it sets the height token directly.
-.size-default,
-.size-icon {
-	@include mat.button-density($-md);
-}
-.size-sm,
-.size-icon-sm {
-	@include mat.button-density($-sm);
-}
-.size-lg,
-.size-icon-lg {
-	@include mat.button-density($-lg);
-}
-.size-xs,
-.size-icon-xs {
-	@include -height(1.5rem);
-}
-
-// Font-size isn't a density concern, so it stays a label token.
-.size-default,
-.size-lg {
-	@include -label-size(0.875rem);
-}
-.size-sm {
-	@include -label-size(0.8rem);
-}
-.size-xs {
-	@include -label-size(0.75rem);
-}
-
-// Icon-only: square, no min-width or horizontal padding. Material's leading-icon
-// margins assume a text label, so zero them to keep the icon centred.
-.size-icon,
-.size-icon-xs,
-.size-icon-sm,
-.size-icon-lg {
-	width: auto;
-	min-width: 0;
-	padding: 0;
-	aspect-ratio: 1;
-
-	.mat-icon {
-		margin: 0;
-	}
-}
-
-// Destructive: subtle red tint + red text, matching React's bg-destructive/10.
-.destructive {
-	--mat-button-filled-container-color: color-mix(in oklch, var(--destructive) 10%, transparent);
-	--mat-button-filled-label-text-color: var(--destructive);
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/card/card.scss

@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-// `size="sm"` — compact padding. Material hardcodes the card's 16px padding
-// (there is no padding design token to override), so the compact size tightens
-// the real Material padding classes. `::ng-deep` is required because the slot
-// content (`mat-card-header/content/actions`) is projected — it lives in the
-// consumer's view, not this wrapper's — so a plain scoped selector can't reach
-// it. The rules are anchored under `.app-card-sm`, a class only this component
-// applies, so the deep selector stays contained to compact cards.
-.app-card-sm {
-	::ng-deep .mat-mdc-card-header {
-		padding: 0.75rem 0.75rem 0;
-	}
-
-	::ng-deep .mat-mdc-card-content {
-		padding: 0 0.75rem;
-
-		&:first-child {
-			padding-top: 0.75rem;
-		}
-
-		&:last-child {
-			padding-bottom: 0.75rem;
-		}
-	}
-
-	::ng-deep .mat-mdc-card-actions {
-		padding: 0.75rem;
-	}
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/date-picker/date-picker.scss

@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-@use '../field-size' as field-size;
-
-/*
- * Form-field-specific structural styling. Height comes from the `size` input
- * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
- * Here we only: give the outline our design-token radius, emit the size
- * classes, and collapse the empty hint/error subscript row.
- */
-@include field-size.sizes;
-
-:host {
-	display: block;
-	/*
-	 * Allow the host to shrink below the mat-form-field's intrinsic width when
-	 * used as a flex item (e.g. two side-by-side pickers in a date-range filter,
-	 * or a picker beside an operator select). Without this, the default
-	 * `min-width: auto` on a flex item keeps each field at its content width and
-	 * the row overflows its container.
-	 */
-	min-width: 0;
-}
-
-.mat-mdc-form-field {
-	--mdc-outlined-text-field-container-shape: var(--radius-md);
-	font-size: 0.875rem; /* text-sm, matches the React inputs */
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-	display: none;
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/date-range-picker/date-range-picker.scss

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-@use '../field-size' as field-size;
-
-/*
- * Form-field-specific structural styling. Height comes from the `size` input
- * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
- * Here we only: give the outline our design-token radius, emit the size
- * classes, and collapse the empty hint/error subscript row.
- */
-@include field-size.sizes;
-
-:host {
-	display: block;
-	/*
-	 * Allow the host to shrink below the mat-form-field's intrinsic width when
-	 * used as a flex item, so the row doesn't overflow its container.
-	 */
-	min-width: 0;
-}
-
-.mat-mdc-form-field {
-	--mdc-outlined-text-field-container-shape: var(--radius-md);
-	font-size: 0.875rem; /* text-sm, matches the React inputs */
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-	display: none;
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/input/input.scss

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-@use '../field-size' as field-size;
-
-/*
- * Form-field-specific structural styling. Height comes from the `size` input
- * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
- * Here we only: give the outline our design-token radius, emit the size
- * classes, and collapse the empty hint/error subscript row.
- */
-@include field-size.sizes;
-
-:host {
-	display: block;
-	/*
-	 * Allow the host to shrink below the mat-form-field's intrinsic width when
-	 * used as a flex item (e.g. two side-by-side inputs in a numeric/date
-	 * range). Without this, the default `min-width: auto` on a flex item keeps
-	 * each field at its content width and the row overflows its container.
-	 */
-	min-width: 0;
-}
-
-.mat-mdc-form-field {
-	--mdc-outlined-text-field-container-shape: var(--radius-md);
-	font-size: 0.875rem; /* text-sm, matches the React inputs */
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-	display: none;
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/label/label.html

@@ -1,3 +0,0 @@
-<label [attr.for]="for()" class="text-sm leading-none font-medium select-none">
-	<ng-content />
-</label>

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/select/select.scss

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-@use '../field-size' as field-size;
-
-/*
- * Form-field-specific structural styling. Height comes from the `size` input
- * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
- * Here we only: give the outline our design-token radius, emit the size
- * classes, and collapse the empty hint/error subscript row.
- */
-@include field-size.sizes;
-
-:host {
-	display: block;
-	/*
-	 * Allow the host to shrink below the mat-form-field's intrinsic width when
-	 * used as a flex item (e.g. the operator select beside a date picker in a
-	 * date filter row). Without this, the default `min-width: auto` on a flex
-	 * item keeps each field at its content width and the row overflows.
-	 */
-	min-width: 0;
-}
-
-.mat-mdc-form-field {
-	--mdc-outlined-text-field-container-shape: var(--radius-md);
-	font-size: 0.875rem; /* text-sm, matches the React inputs */
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-	display: none;
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/separator/separator.html

@@ -1 +0,0 @@
-<mat-divider role="presentation" [vertical]="isVertical()" [inset]="inset()" />

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/separator/separator.scss

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-/*
- * Material's `mat-divider` draws a full-height border for the vertical variant,
- * so its element must fill the host. The host itself carries `self-stretch`
- * (see component `hostClass`) to take the flex row's height; here we make the
- * inner divider fill that height. Horizontal needs nothing extra — the divider
- * is already `display:block; width:100%`.
- */
-:host {
-	// A vertical divider is a zero-width line; keep it out of flex growth math.
-	&[data-orientation='vertical'] {
-		display: flex;
-	}
-}
-
-.mat-divider-vertical {
-	height: 100%;
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/skeleton/skeleton.html

@@ -1 +0,0 @@
-<ng-content />

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/skeleton/skeleton.scss

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-/*
- * The skeleton is a block by default so call sites only need to supply a width
- * and height (`h-4 w-32`) — no `block` utility to repeat. The pulse lives here
- * (rather than Tailwind's `animate-pulse`) so it can be switched off for users
- * who ask for reduced motion.
- */
-:host {
-	display: block;
-	animation: app-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes app-skeleton-pulse {
-	50% {
-		opacity: 0.5;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	:host {
-		animation: none;
-	}
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/theme.scss

@@ -1,39 +0,0 @@
-// 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,
-		)
-	);
-}