@veevarts/design-system 1.17.0-beta.5 → 1.17.0-beta.7

package/dist/tailwind/index.js

@@ -20,6 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tailwind/index.ts
 var index_exports = {};
 __export(index_exports, {
+  adminSurfaceCss: () => adminSurfaceCss,
+  adminSurfaceTailwindColors: () => adminSurfaceTailwindColors,
+  adminSurfaceTokens: () => adminSurfaceTokens,
   colors: () => colors,
   createHeroUIConfig: () => createHeroUIConfig,
   deepMerge: () => deepMerge,
@@ -209,12 +212,73 @@ var spacing = {
   // 128px
 };
 
+// src/tokens/admin-surface.ts
+var { gray } = colors.neutral;
+var WARNING_TEXT = colors.palettes.warning[700];
+var WARNING_FILL = colors.palettes.warning[100];
+var SIGNED_OFF = {
+  rustFill: "#FBEBE4",
+  rustBorder: "#EBC3B1",
+  page: "#F6F7F8",
+  border: "#E7E9EC",
+  hair: "#EEF0F2",
+  okFill: "#E6F4EF",
+  dangerFill: "#FBEAE8",
+  infoFill: "#E8EEFC"
+};
+var adminSurfaceTokens = {
+  // Brand — the 500 already matches the scale exactly.
+  "--rust": colors.brand.primary[500],
+  "--rust-fill": SIGNED_OFF.rustFill,
+  "--rust-border": SIGNED_OFF.rustBorder,
+  // Chrome
+  "--page": SIGNED_OFF.page,
+  "--surface": colors.neutral.white,
+  "--border": SIGNED_OFF.border,
+  "--hair": SIGNED_OFF.hair,
+  // Text — all four match the scale's grays exactly.
+  "--ink": gray[900],
+  "--ink2": gray[700],
+  "--sub": gray[500],
+  "--muted": gray[400],
+  // Semantic — text tone paired with the tint it sits on.
+  "--ok": colors.semantic.success,
+  "--ok-fill": SIGNED_OFF.okFill,
+  "--warn": WARNING_TEXT,
+  "--warn-fill": WARNING_FILL,
+  "--danger": colors.semantic.danger,
+  "--danger-fill": SIGNED_OFF.dangerFill,
+  "--info": colors.semantic.info,
+  "--info-fill": SIGNED_OFF.infoFill
+};
+var adminSurfaceTailwindColors = Object.fromEntries(
+  Object.entries(adminSurfaceTokens).map(([name, value]) => [name.replace(/^--/, ""), value])
+);
+function adminSurfaceCss({
+  scope = ".acct",
+  fontFamily = "'NeueMontreal', system-ui, sans-serif"
+} = {}) {
+  const declarations = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  const typography2 = fontFamily ? `
+  font-family: ${fontFamily};
+  color: var(--ink);` : "";
+  return `${scope} {
+${declarations}${typography2}
+}
+`;
+}
+
 // src/tailwind/index.ts
 var tailwindTheme = {
   colors: {
     ...colors.brand,
     ...colors.neutral,
-    ...colors.semantic
+    ...colors.semantic,
+    // Back-office surface palette, namespaced so `border`/`page`/`info` do
+    // not collide with Tailwind's own utility grammar. Sourced from the
+    // same object that emits the CSS custom properties, so the utility and
+    // the property cannot disagree. See src/tokens/admin-surface.ts.
+    acct: adminSurfaceTailwindColors
   },
   fontFamily: typography.fontFamily,
   spacing,
@@ -298,6 +362,9 @@ var tokens = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  adminSurfaceCss,
+  adminSurfaceTailwindColors,
+  adminSurfaceTokens,
   colors,
   createHeroUIConfig,
   deepMerge,

package/dist/tokens/admin-surface.d.ts

@@ -0,0 +1,58 @@
+/**
+ * The admin-surface palette, as CSS custom properties.
+ *
+ * WHY A SECOND OUTPUT FORMAT. The rest of the Design System reaches its colours
+ * through Tailwind utilities, which only works when the consuming app scans the
+ * DS `dist` in its Tailwind `content` globs. The domain packages that render
+ * back-office screens cannot rely on that: `@veevart/accounting` is absent from
+ * the portal's globs, so any utility class written there is purged from the
+ * bundle, and the Salesforce Canvas embed builds its CSS separately again. Those
+ * surfaces therefore style through inline styles over a scoped `<style>` block,
+ * and what they need from us is custom properties, not classes.
+ *
+ * The values come from `colors` — the same object that feeds the Tailwind
+ * preset. That is the whole point: before this existed, the admin palette lived
+ * inside `@veevart/accounting` as a hand-written block, got copied to a second
+ * screen, then a third and a fourth, and had already lost a token in one copy
+ * and forked `warning` away from ours. A palette owned by a domain package is a
+ * palette that forks.
+ *
+ * ```ts
+ * <style dangerouslySetInnerHTML={{ __html: adminSurfaceCss() }} />
+ * <div className="acct">…</div>
+ * ```
+ */
+/** Token name → value. Exported so tests and tooling can assert on it directly. */
+export declare const adminSurfaceTokens: Record<string, string>;
+/**
+ * Pairs whose contrast is NOT yet at WCAG AA, with the reason each is tolerated.
+ *
+ * `--info` on its tint measures 4.45:1 against the 4.5 threshold. It predates
+ * this module and no one has agreed to change it; raising the text to the
+ * scale's 700 would fix it the same way `--warn` was fixed, but that is a
+ * separate design call on a separate set of screens. Listed here rather than
+ * left to be rediscovered, so the guard below stays meaningful for the rest.
+ */
+export declare const KNOWN_CONTRAST_DEBT: readonly ["--info"];
+/**
+ * The same palette as a Tailwind colour scale, namespaced under `acct`.
+ *
+ * This is what the admin primitives actually style with — `text-acct-ink`,
+ * `bg-acct-surface`, `border-acct-hair`. Feeding it into the preset from the
+ * same object as {@link adminSurfaceTokens} is what keeps the utility and the
+ * custom property from ever disagreeing.
+ *
+ * Namespaced deliberately. Several of these names (`border`, `page`, `info`)
+ * would collide with Tailwind's own utility grammar unprefixed: a colour
+ * literally called `border` produces `border-border`, and `text-info` would
+ * read as a size to anyone skimming.
+ */
+export declare const adminSurfaceTailwindColors: Record<string, string>;
+export interface AdminSurfaceCssOptions {
+    /** Class the properties are scoped to. Defaults to `.acct`. */
+    scope?: string;
+    /** Base font stack for the surface. Pass `false` to leave typography alone. */
+    fontFamily?: string | false;
+}
+/** The palette as a `<style>`-ready rule. */
+export declare function adminSurfaceCss({ scope, fontFamily, }?: AdminSurfaceCssOptions): string;

package/dist/tokens/index.d.ts

@@ -1,4 +1,6 @@
 export { colors } from './colors';
 export { spacing } from './spacing';
 export { typography } from './typography';
+export { adminSurfaceCss, adminSurfaceTokens } from './admin-surface';
 export type { ColorToken } from './colors';
+export type { AdminSurfaceCssOptions } from './admin-surface';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.17.0-beta.5",
+    "version": "1.17.0-beta.7",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",

package/dist/patterns/CheckboxCardGroup/CheckboxCardGroup.d.ts

@@ -1,53 +0,0 @@
-import { default as React } from 'react';
-export interface CheckboxCardOption {
-    /** Stable identifier surfaced through `onChange`. */
-    key: string;
-    /** Visible label. */
-    label: string;
-    /** Optional secondary line under the label. */
-    description?: string;
-    /** Iconify name (`'solar:ticket-outline'`) or a custom node. */
-    icon?: string | React.ReactNode;
-    /** Disable just this card. */
-    isDisabled?: boolean;
-    /** Override per-card test id; defaults to `${dataTestId}-${key}`. */
-    'data-testid'?: string;
-}
-export interface CheckboxCardGroupClassNames {
-    base?: string;
-    grid?: string;
-    card?: string;
-    hint?: string;
-}
-export interface CheckboxCardGroupProps {
-    /** Options to render in order. */
-    options: readonly CheckboxCardOption[];
-    /** Currently selected option keys. */
-    selectedKeys: readonly string[];
-    /** Fires with the next full selection whenever a card is toggled. Keys are emitted in the original option order (not selection order); any selected key not present in `options` is preserved. */
-    onChange: (keys: string[]) => void;
-    /** Optional heading rendered above the grid (labels the group). */
-    heading?: string;
-    /** `aria-label` for the group when `heading` is omitted. Default `'Select options'`. */
-    ariaLabel?: string;
-    /** Grid columns on >= sm. Default `2`. */
-    columnsDesktop?: 2 | 3 | 4;
-    /** Grid columns on mobile. Default `1`. */
-    columnsMobile?: 1 | 2;
-    /**
-     * Minimum number of selections. When set, the group auto-derives its
-     * invalid state (`selectedKeys.length < minSelected`) and a default hint,
-     * unless `isInvalid` / `hint` are explicitly supplied.
-     */
-    minSelected?: number;
-    /** Helper text under the grid. Overrides the `minSelected` default hint. */
-    hint?: React.ReactNode;
-    /** Error styling + `aria-invalid`. Overrides the `minSelected`-derived state. */
-    isInvalid?: boolean;
-    /** Disable every card. */
-    isDisabled?: boolean;
-    className?: string;
-    classNames?: CheckboxCardGroupClassNames;
-    'data-testid'?: string;
-}
-export declare const CheckboxCardGroup: React.FC<CheckboxCardGroupProps>;

package/dist/patterns/CheckboxCardGroup/index.d.ts

@@ -1,2 +0,0 @@
-export { CheckboxCardGroup } from './CheckboxCardGroup';
-export type { CheckboxCardGroupProps, CheckboxCardGroupClassNames, CheckboxCardOption, } from './CheckboxCardGroup';