@scalepad/ui 0.1.0 → 0.2.0

package/src/components/Anchor/index.ts

@@ -1,2 +1,2 @@
 export { Anchor } from './Anchor';
-export type { AnchorProps } from './Anchor';
+export type { AnchorProps, AnchorSize, AnchorTone } from './Anchor';

package/src/components/FilterMenu/FilterSubMenuTypes/SearchableFilterSubmenu.tsx

@@ -193,12 +193,16 @@ export function SearchableFilterSubmenu({
         ) : displayedItems.length > 0 ? (
           <>
             {displayedItems.map(item => (
+              // Toggling flows through the Checkbox's native onChange (input
+              // click + label click both delegate there). We deliberately
+              // don't put `onClick` on Menu.Item: Mantine's Checkbox renders
+              // its label as a `<label for=input>` whose click event keeps
+              // bubbling after delegating to the input, so a Menu.Item.onClick
+              // would catch the bubbled event and fire a second toggle that
+              // net-cancels the first. `onKeyDown` for space stays so the
+              // row can still be toggled when focused via keyboard.
               <Menu.Item
                 key={item.id}
-                onClick={e => {
-                  e.stopPropagation();
-                  toggleItem(item.id);
-                }}
                 closeMenuOnClick={false}
                 onKeyDown={e => {
                   if (e.key === ' ') {
@@ -212,7 +216,6 @@ export function SearchableFilterSubmenu({
                   <Checkbox
                     checked={selectedIds.has(item.id)}
                     onChange={() => toggleItem(item.id)}
-                    onClick={e => e.stopPropagation()}
                     size="sm"
                     label={item.name}
                   />

package/src/components/FilterMenu/helpers.ts

@@ -14,8 +14,11 @@ export function extractFilterValue(
   );
 
   if (schema.type === 'boolean') {
-    // Boolean filters: true if category exists and has items, false otherwise
-    return category ? category.items.length > 0 : false;
+    // Boolean filters are binary — they have no concept of items. The
+    // canonical writer (`createFilterCategory`) emits a stub `{id, name:'True'}`
+    // entry, but external consumers also produce the category with `items: []`,
+    // so we treat presence of the category as the on-state.
+    return Boolean(category);
   }
 
   if (schema.type === 'multi-select') {

package/src/components/IconButton/IconButton.tsx

@@ -18,11 +18,58 @@ export interface IconButtonProps extends MantineActionIconProps {
   variant?: IconButtonVariant;
 }
 
+/**
+ * Mantine's ActionIcon resolves `--ai-color`, `--ai-bg`, `--ai-hover`, and
+ * `--ai-hover-color` to the variant resolver's output and applies them as
+ * inline `style="..."` on the rendered button. Inline styles win over our
+ * vanilla-extract class CSS, so a class-level `color: tokens.color.text.*`
+ * can be silently overridden by Mantine's resolved variant color (especially
+ * in dark mode where `subtle + primary` resolves to a pale green that reads
+ * as washed out or "black" against the dark surface).
+ *
+ * Returning a `vars` *function* here pins the CSS variables to our semantic
+ * tokens at the same level Mantine writes them — instance vars merge into
+ * (and override) the varsResolver output, so `color: var(--ai-color)` in
+ * Mantine's class rule picks up our token instead. Mantine 8 invokes the
+ * `vars` prop as a function (`vars(theme, props)`), so it must be callable —
+ * passing a plain object throws "vars is not a function" at render time.
+ */
+type ActionIconVarsFn = MantineActionIconProps['vars'];
+
+const ghostVars: ActionIconVarsFn = () => ({
+  root: {
+    '--ai-color': 'var(--color-text-default)',
+    '--ai-bg': 'transparent',
+    '--ai-hover': 'var(--color-background-primary-light)',
+    '--ai-hover-color': 'var(--color-text-primary-default)',
+  },
+});
+
+const ghostMutedVars: ActionIconVarsFn = () => ({
+  root: {
+    '--ai-color': 'var(--color-text-subdued-strong)',
+    '--ai-bg': 'transparent',
+    '--ai-hover': 'var(--color-background-primary-light)',
+    '--ai-hover-color': 'var(--color-text-primary-default)',
+  },
+});
+
+const outlineVars: ActionIconVarsFn = () => ({
+  root: {
+    '--ai-color': 'var(--color-text-default)',
+    '--ai-bg': 'var(--color-background-default)',
+    '--ai-bd': '1px solid var(--color-stroke-default)',
+    '--ai-hover': 'var(--color-background-primary-light)',
+    '--ai-hover-color': 'var(--color-text-primary-default)',
+  },
+});
+
 const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ variant = 'outline', className, ...props }, ref) => {
     let mantineVariant: 'outline' | 'subtle' | 'filled' = 'outline';
     let mantineColor = props.color;
     let customClassName = className;
+    let customVars: ActionIconVarsFn | undefined;
 
     if (variant === 'primary') {
       mantineVariant = 'filled';
@@ -40,6 +87,7 @@ const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
     } else if (variant === 'outline') {
       mantineVariant = 'outline';
       customClassName = `${iconButtonStyles.outlineIconButton}${className ? ` ${className}` : ''}`;
+      customVars = outlineVars;
     } else if (variant === 'outline-inverse') {
       mantineVariant = 'outline';
       mantineColor = 'white';
@@ -47,9 +95,11 @@ const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
     } else if (variant === 'ghost') {
       mantineVariant = 'subtle';
       customClassName = `${iconButtonStyles.ghostIconButton}${className ? ` ${className}` : ''}`;
+      customVars = ghostVars;
     } else if (variant === 'ghost-muted') {
       mantineVariant = 'subtle';
       customClassName = `${iconButtonStyles.ghostMutedIconButton}${className ? ` ${className}` : ''}`;
+      customVars = ghostMutedVars;
     }
 
     return (
@@ -58,6 +108,7 @@ const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
         variant={mantineVariant}
         color={mantineColor}
         className={customClassName}
+        vars={customVars}
         {...props}
         radius={props.radius ?? 'lg'}
       />

package/src/components/SubNavigation/SubNavigation.css.ts

@@ -1,5 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
+import { mantineVars } from '../../theme/mantineVars';
 import { tokens } from '../../theme/themeContract.css';
 import { textStyleVariants } from '../../tokens/text-styles';
 
@@ -59,6 +60,25 @@ export const itemActive = style({
       backgroundColor: tokens.color.background.primaryLightHover,
       color: tokens.color.text.primaryDefault,
     },
+    // Dark mode: the global `primaryLight` (greenAlpha 12%) reads as a barely
+    // perceivable wash and `primaryDefault` (green[3]) is too pale to register
+    // as "selected". The 25-35% tint we initially tried still composited to a
+    // dim teal over the dark canvas (≈#243B3B over #161B24). Push the green
+    // wash to ~50% / 60% so the active tab reads as a clearly saturated
+    // brand surface, and pair with near-white text for a strong "selected"
+    // affordance.
+    //
+    // `mantineVars.darkSelector` already ends in ` &`, so we use it raw
+    // rather than appending another ` &` (which would produce an invalid
+    // self-descendant selector and silently fail to apply).
+    [mantineVars.darkSelector]: {
+      backgroundColor: 'rgba(77, 155, 127, 0.5)',
+      color: tokens.color.text.title,
+    },
+    [`${mantineVars.darkSelector}:hover`]: {
+      backgroundColor: 'rgba(77, 155, 127, 0.6)',
+      color: tokens.color.text.title,
+    },
   },
 });
 

package/src/components/Typography/Text.tsx

@@ -31,15 +31,13 @@ import {
   type TextStyleDefinition,
 } from '../../tokens';
 import { resolveColorToken } from '../../utils/color-props';
+import type { TypographyStyleProp } from '../../utils/typography-props';
 
 import type { TextColor } from '../../tokens';
 
-/** Typography styling props that are controlled by the variant and should not be set directly */
-type TypographyStyleProps = 'fw' | 'fz' | 'size' | 'lh' | 'ff' | 'lts' | 'fs';
-
 export type TextProps = Omit<
   MantineTextProps,
-  TypographyStyleProps | 'c' | 'children'
+  TypographyStyleProp | 'c' | 'children'
 > & {
   /** Text style variant from the design system. Defaults to 'body1'. */
   variant?: BodyVariant;

package/src/components/Typography/Title.tsx

@@ -24,12 +24,10 @@ import {
   type HeadingVariant,
 } from '../../tokens/text-styles';
 import { resolveColorToken } from '../../utils/color-props';
+import type { TypographyStyleProp } from '../../utils/typography-props';
 
 import type { TextColor } from '../../tokens/color-types';
 
-/** Typography styling props that are controlled by the variant and should not be set directly */
-type TypographyStyleProps = 'fw' | 'fz' | 'size' | 'lh' | 'ff' | 'lts' | 'fs';
-
 const variantToOrder: Record<HeadingVariant, TitleOrder> = {
   heading1: 1,
   heading2: 2,
@@ -40,7 +38,7 @@ const variantToOrder: Record<HeadingVariant, TitleOrder> = {
 
 export type TitleProps = Omit<
   MantineTitleProps,
-  TypographyStyleProps | 'c' | 'children' | 'order'
+  TypographyStyleProp | 'c' | 'children' | 'order'
 > & {
   /** Heading style variant from the design system. */
   variant?: HeadingVariant;

package/src/index.ts

@@ -30,7 +30,7 @@ export type {
   FilterCategory,
 } from './components/AppliedFiltersManagerBar';
 export { Anchor } from './components/Anchor';
-export type { AnchorProps } from './components/Anchor';
+export type { AnchorProps, AnchorSize, AnchorTone } from './components/Anchor';
 export { Badge } from './components/Badge';
 export type { BadgeProps } from './components/Badge';
 export { BulkActionBar } from './components/BulkActionBar';
@@ -475,8 +475,10 @@ export {
   Textarea,
   Tooltip,
   UnstyledButton,
+  useMantineColorScheme,
 } from './mantine';
 export type {
+  MantineColorScheme,
   PopoverProps,
   ProgressProps,
   UnstyledButtonProps,

package/src/inter-font.ts

@@ -0,0 +1,21 @@
+// Inject the Inter font from Google Fonts as a `<link rel="stylesheet">`.
+//
+// Loading the stylesheet via JS instead of `import './foo.css'` keeps the
+// design system robust against consumer bundlers that don't resolve `.css`
+// files inside `node_modules/@scalepad/ui`. Idempotent — safe to import
+// from multiple entry points.
+
+const INTER_FONT_LINK_ID = 'scalepad-ui-inter-font';
+const INTER_FONT_HREF =
+  'https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap';
+
+if (
+  typeof document !== 'undefined' &&
+  !document.getElementById(INTER_FONT_LINK_ID)
+) {
+  const link = document.createElement('link');
+  link.id = INTER_FONT_LINK_ID;
+  link.rel = 'stylesheet';
+  link.href = INTER_FONT_HREF;
+  document.head.appendChild(link);
+}

package/src/mantine.ts

@@ -17,8 +17,10 @@ export {
   Textarea,
   Tooltip,
   UnstyledButton,
+  useMantineColorScheme,
 } from '@mantine/core';
 export type {
+  MantineColorScheme,
   PopoverProps,
   ProgressProps,
   UnstyledButtonProps,

package/src/theme/themeContract.css.ts

@@ -1,7 +1,11 @@
 /**
- * AUTO-GENERATED - DO NOT EDIT
- * Generated from: packages/figma-tokens (semantic-colors, border-radius, spacing, shadows)
- * Theme contract for vanilla-extract: typed references to CSS variables injected by ThemeProvider.
+ * Theme contract for vanilla-extract: typed references to CSS variables
+ * injected by ThemeProvider.
+ *
+ * NOTE: extended by hand to add `background.surface.*`, `background.entity.*`,
+ * and the `color.chart.*` group alongside the auto-generated entries from the
+ * Figma export. Once the Figma source catches up these can fold back into the
+ * generated output.
  */
 
 import { createGlobalThemeContract } from '@vanilla-extract/css';
@@ -63,6 +67,18 @@ export const tokens = createGlobalThemeContract({
       inverseFilledHover: 'color-background-inverse-filled-hover',
       input: 'color-background-input',
       backdrop: 'color-background-backdrop',
+      surfaceRaised: 'color-background-surface-raised',
+      surfaceOverlay: 'color-background-surface-overlay',
+      entityTaskLight: 'color-background-entity-task-light',
+      entityTaskIcon: 'color-background-entity-task-icon',
+      entityInitiativeLight: 'color-background-entity-initiative-light',
+      entityInitiativeIcon: 'color-background-entity-initiative-icon',
+      entityGoalLight: 'color-background-entity-goal-light',
+      entityGoalIcon: 'color-background-entity-goal-icon',
+      entityMeetingLight: 'color-background-entity-meeting-light',
+      entityMeetingIcon: 'color-background-entity-meeting-icon',
+      entityDeliverableLight: 'color-background-entity-deliverable-light',
+      entityDeliverableIcon: 'color-background-entity-deliverable-icon',
     },
     stroke: {
       default: 'color-stroke-default',
@@ -97,6 +113,14 @@ export const tokens = createGlobalThemeContract({
       primaryStrong: 'color-icon-primary-strong',
       medium: 'color-icon-medium',
     },
+    chart: {
+      series1: 'color-chart-series-1',
+      series2: 'color-chart-series-2',
+      series3: 'color-chart-series-3',
+      series4: 'color-chart-series-4',
+      series5: 'color-chart-series-5',
+      series6: 'color-chart-series-6',
+    },
   },
   radius: {
     xs: 'radius-xs',

package/src/tokens/color-types.ts

@@ -1,9 +1,10 @@
 /**
- * AUTO-GENERATED - DO NOT EDIT
- * Generated from: packages/figma-tokens/source/semantic-colors.json
- *
  * Typed color token unions grouped by their intended usage.
  * Use these types to restrict color props to only valid tokens.
+ *
+ * NOTE: extended by hand to add `background.surface.*`, `background.entity.*`,
+ * and the new `ChartColor` type alongside the auto-generated entries from the
+ * Figma export of `packages/figma-tokens/source/semantic-colors.json`.
  */
 
 /** Text/foreground color tokens (for the `c` prop on text elements) */
@@ -62,7 +63,19 @@ export type BackgroundColor =
   | 'background.inverse.filled'
   | 'background.inverse.filled-hover'
   | 'background.input'
-  | 'background.backdrop';
+  | 'background.backdrop'
+  | 'background.surface.raised'
+  | 'background.surface.overlay'
+  | 'background.entity.task.light'
+  | 'background.entity.task.icon'
+  | 'background.entity.initiative.light'
+  | 'background.entity.initiative.icon'
+  | 'background.entity.goal.light'
+  | 'background.entity.goal.icon'
+  | 'background.entity.meeting.light'
+  | 'background.entity.meeting.icon'
+  | 'background.entity.deliverable.light'
+  | 'background.entity.deliverable.icon';
 
 /** Stroke/border color tokens (for borders and dividers) */
 export type StrokeColor =
@@ -99,9 +112,19 @@ export type IconColor =
   | 'icon.primary.strong'
   | 'icon.medium';
 
+/** Chart series color tokens (for Recharts series colors, legend swatches, etc.) */
+export type ChartColor =
+  | 'chart.series.1'
+  | 'chart.series.2'
+  | 'chart.series.3'
+  | 'chart.series.4'
+  | 'chart.series.5'
+  | 'chart.series.6';
+
 /** Any semantic color token */
 export type SemanticColor =
   | TextColor
   | BackgroundColor
   | StrokeColor
-  | IconColor;
+  | IconColor
+  | ChartColor;

package/src/tokens/colors.ts

@@ -1,6 +1,11 @@
 /**
  * Color primitives synced from Figma Design System (VCLfybgU3OaUUPrQdBaVmP).
  * Figma source of truth: Primitives collection.
+ *
+ * NOTE: `dark[]`, `greenAlpha`, and `grapeAlpha` have been hand-tuned in code
+ * ahead of the Figma back-sync to give dark mode real surface depth and proper
+ * brand-tinted alphas. Once those values land in Figma the file can revert to
+ * fully auto-generated.
  */
 
 import type { MantineColorsTuple } from '@mantine/core';
@@ -21,6 +26,14 @@ export const green: MantineColorsTuple = [
   '#005a3e',
 ];
 
+export const greenAlpha = {
+  '08': 'rgba(77, 155, 127, 0.08)',
+  '10': 'rgba(77, 155, 127, 0.10)',
+  '12': 'rgba(77, 155, 127, 0.12)',
+  '15': 'rgba(77, 155, 127, 0.15)',
+  '20': 'rgba(77, 155, 127, 0.20)',
+} as const;
+
 export const blue: MantineColorsTuple = [
   '#e7f5ff',
   '#d0ebff',
@@ -72,19 +85,41 @@ export const grayAlpha = {
   '9-60': 'rgba(17, 24, 39, 0.60)',
 } as const;
 
+/**
+ * Dark neutral scale tuned for sophisticated dark-mode surface depth (cool
+ * near-black with a subtle blue cast). 0 → lightest, 9 → darkest, matching
+ * the Mantine palette convention so dark-mode semantic mappings flip naturally
+ * against the light gray scale.
+ *
+ * Surface roles per index:
+ *   0 (#e7eaf2) headings, inverse content
+ *   1 (#c8cdd9) body text
+ *   2 (#8a92a6) subdued text
+ *   3 (#4a5163) disabled text, subdued borders
+ *   4 (#323847) default borders
+ *   5 (#252b38) hover / pressed surface
+ *   6 (#1c222d) elevated surface (popovers, dropdowns)
+ *   7 (#161b24) default surface (cards, panels)
+ *   8 (#11151c) body background
+ *   9 (#0b0e14) outer canvas / chrome
+ */
 export const dark: MantineColorsTuple = [
-  '#c9c9c9',
-  '#b8b8b8',
-  '#828282',
-  '#696969',
-  '#424242',
-  '#3b3b3b',
-  '#2e2e2e',
-  '#242424',
-  '#1f1f1f',
-  '#141414',
+  '#e7eaf2',
+  '#c8cdd9',
+  '#8a92a6',
+  '#4a5163',
+  '#323847',
+  '#252b38',
+  '#1c222d',
+  '#161b24',
+  '#11151c',
+  '#0b0e14',
 ];
 
+export const darkAlpha = {
+  '70': 'rgba(11, 14, 20, 0.70)',
+} as const;
+
 export const primary: MantineColorsTuple = [
   '#edf7f3',
   '#d5f0e5',
@@ -164,6 +199,13 @@ export const grape: MantineColorsTuple = [
   '#862e9c',
 ];
 
+export const grapeAlpha = {
+  '10': 'rgba(190, 75, 219, 0.10)',
+  '12': 'rgba(190, 75, 219, 0.12)',
+  '15': 'rgba(190, 75, 219, 0.15)',
+  '20': 'rgba(190, 75, 219, 0.20)',
+} as const;
+
 export const cyan: MantineColorsTuple = [
   '#e3fafc',
   '#c5f6fa',