@scalepad/ui 0.1.0

package/src/tokens/semantic-colors.ts

@@ -0,0 +1,224 @@
+/**
+ * Semantic color tokens synced from Figma Design System (VCLfybgU3OaUUPrQdBaVmP).
+ * Values reference primitives in colors.ts; inline rgba for alpha variants.
+ * Figma source of truth: Tokens collection (Light / Dark modes).
+ */
+
+import {
+  black,
+  dark,
+  gray,
+  grayAlpha,
+  green,
+  indigo,
+  indigoAlpha,
+  red,
+  redAlpha,
+  teal,
+  tealAlpha,
+  transparent,
+  white,
+  yellow,
+  yellowAlpha,
+} from './colors';
+
+/** Light mode semantic color values */
+export const semanticColors = {
+  'text.title': black,
+  'text.danger.default': red[6],
+  'text.link': green[5],
+  'background.default': white,
+  'background.default-hover': gray[0],
+  'text.default': gray[9],
+  'stroke.default': gray[3],
+  'stroke.light': gray[2],
+  'background.body': gray[0],
+  'text.disabled.default': gray[5],
+  'background.disabled.default': gray[2],
+  'background.transparent': transparent,
+  'background.primary.filled': green[8],
+  'background.primary.filled-hover': green[7],
+  'background.warning.filled': yellow[6],
+  'background.success.filled': teal[6],
+  'background.subdued.light': gray[2],
+  'background.subdued.ultralight': gray[0],
+  'background.danger.filled': red[8],
+  'background.subdued.filled': gray[4],
+  'background.warning.filled-hover': yellow[7],
+  'background.success.filled-hover': teal[7],
+  'background.danger.filled-hover': red[9],
+  'background.subdued.filled-hover': gray[6],
+  'background.danger.light': red[0],
+  'background.primary.light': green[0],
+  'background.warning.light': yellowAlpha['10'],
+  'background.success.light': teal[0],
+  'text.subdued.default': gray[6],
+  'text.primary.default': green[5],
+  'text.primary.light': green[5],
+  'text.warning.default': yellow[6],
+  'text.success.default': teal[6],
+  'background.primary.light-hover': green[1],
+  'background.warning.light-hover': yellowAlpha['12'],
+  'background.success.light-hover': teal[1],
+  'background.danger.light-hover': red[1],
+  'background.subdued.light-hover': gray[1],
+  'stroke.primary.default': green[3],
+  'text.danger.disabled': red[4],
+  'stroke.success.default': teal[6],
+  'stroke.danger.default': red[6],
+  'stroke.subdued.strong': gray[6],
+  'stroke.warning.default': yellow[6],
+  'background.information.filled': indigo[6],
+  'background.information.filled-hover': indigo[7],
+  'background.information.light': indigoAlpha['10'],
+  'background.information.light-hover': indigoAlpha['12'],
+  'stroke.information.default': indigo[6],
+  'text.information.default': indigo[6],
+  'stroke.focus.default': green[5],
+  'background.inverse.filled': gray[9],
+  'background.inverse.filled-hover': gray[8],
+  'icon.light': gray[5],
+  'icon.danger.default': red[6],
+  'icon.danger.disabled': red[4],
+  'text.danger.strong': red[9],
+  'text.warning.strong': yellow[9],
+  'text.success.strong': teal[9],
+  'text.information.strong': indigo[9],
+  'icon.warning.default': yellow[6],
+  'icon.warning.strong': yellow[9],
+  'icon.danger.strong': red[9],
+  'icon.information.default': indigo[6],
+  'icon.information.strong': indigo[9],
+  'icon.success.default': teal[6],
+  'icon.success.strong': teal[9],
+  'text.subdued.strong': gray[7],
+  'icon.default': gray[9],
+  'stroke.inverse': white,
+  'stroke.subdued.default': gray[2],
+  'text.inverse': white,
+  'stroke.strong': gray[5],
+  'icon.inverse': white,
+  'stroke.icon': gray[9],
+  'icon.primary.default': green[5],
+  'icon.primary.strong': green[8],
+  'stroke.focus.strong': green[8],
+  'background.input': white,
+  'background.backdrop': grayAlpha['9-60'],
+  'icon.medium': gray[7],
+} as const;
+
+/** Dark mode semantic color values */
+export const semanticColorsDark = {
+  'text.title': dark[0],
+  'text.danger.default': red[7],
+  'text.link': green[3],
+  'background.default': dark[6],
+  'background.default-hover': dark[5],
+  'text.default': white,
+  'stroke.default': dark[4],
+  'stroke.light': dark[5],
+  'background.body': dark[7],
+  'text.disabled.default': dark[3],
+  'background.disabled.default': dark[6],
+  'background.transparent': transparent,
+  'background.primary.filled': green[5],
+  'background.primary.filled-hover': green[4],
+  'background.warning.filled': yellow[8],
+  'background.success.filled': teal[8],
+  'background.subdued.light': dark[5],
+  'background.subdued.ultralight': dark[6],
+  'background.danger.filled': red[8],
+  'background.subdued.filled': gray[7],
+  'background.warning.filled-hover': yellow[9],
+  'background.success.filled-hover': teal[9],
+  'background.danger.filled-hover': red[9],
+  'background.subdued.filled-hover': gray[8],
+  'background.danger.light': red[4],
+  'background.primary.light': green[9],
+  'background.warning.light': yellowAlpha['15'],
+  'background.success.light': tealAlpha['15'],
+  'text.subdued.default': gray[3],
+  'text.primary.default': green[3],
+  'text.primary.light': green[4],
+  'text.warning.default': yellow[3],
+  'text.success.default': teal[3],
+  'background.primary.light-hover': green[8],
+  'background.warning.light-hover': yellowAlpha['20'],
+  'background.success.light-hover': tealAlpha['20'],
+  'background.danger.light-hover': red[5],
+  'background.subdued.light-hover': dark[6],
+  'stroke.primary.default': green[6],
+  'text.danger.disabled': redAlpha['50'],
+  'stroke.success.default': teal[3],
+  'stroke.danger.default': red[7],
+  'stroke.subdued.strong': gray[3],
+  'stroke.warning.default': yellow[3],
+  'background.information.filled': indigo[8],
+  'background.information.filled-hover': indigo[9],
+  'background.information.light': indigoAlpha['15'],
+  'background.information.light-hover': indigoAlpha['20'],
+  'stroke.information.default': indigo[3],
+  'text.information.default': indigo[3],
+  'stroke.focus.default': green[3],
+  'background.inverse.filled': dark[0],
+  'background.inverse.filled-hover': dark[1],
+  'icon.light': dark[3],
+  'icon.danger.default': red[7],
+  'icon.danger.disabled': redAlpha['50'],
+  'text.danger.strong': red[9],
+  'text.warning.strong': yellow[9],
+  'text.success.strong': teal[9],
+  'text.information.strong': indigo[9],
+  'icon.warning.default': yellow[5],
+  'icon.warning.strong': yellow[9],
+  'icon.danger.strong': red[9],
+  'icon.information.default': indigo[5],
+  'icon.information.strong': indigo[9],
+  'icon.success.default': teal[5],
+  'icon.success.strong': teal[9],
+  'text.subdued.strong': gray[6],
+  'icon.default': dark[1],
+  'stroke.inverse': dark[6],
+  'stroke.subdued.default': gray[6],
+  'text.inverse': dark[9],
+  'stroke.strong': dark[2],
+  'icon.inverse': dark[9],
+  'stroke.icon': dark[1],
+  'icon.primary.default': green[3],
+  'icon.primary.strong': green[1],
+  'stroke.focus.strong': green[1],
+  'background.input': dark[6],
+  'background.backdrop': grayAlpha['9-60'],
+  'icon.medium': dark[4],
+} as const;
+
+function semanticKeyToCssVarName(key: string): string {
+  return `--color-${key.replace(/\./g, '-')}`;
+}
+
+function buildSemanticColorsCss(
+  colorsObj: Record<string, string>,
+  selector: string,
+): string {
+  const lines = [`${selector} {`];
+  for (const [key, value] of Object.entries(colorsObj)) {
+    lines.push(`  ${semanticKeyToCssVarName(key)}: ${value};`);
+  }
+  lines.push('}');
+  return lines.join('\n');
+}
+
+/** CSS custom properties for light mode (generated from semanticColors) */
+export const semanticColorsCssLight = buildSemanticColorsCss(
+  semanticColors as Record<string, string>,
+  ':root, [data-mantine-color-scheme="light"]',
+);
+
+/** CSS custom properties for dark mode (generated from semanticColorsDark) */
+export const semanticColorsCssDark = buildSemanticColorsCss(
+  semanticColorsDark as Record<string, string>,
+  '[data-mantine-color-scheme="dark"]',
+);
+
+/** Combined CSS for both light and dark modes */
+export const semanticColorsCss = `${semanticColorsCssLight}\n${semanticColorsCssDark}`;

package/src/tokens/semantic-tokens-css.ts

@@ -0,0 +1,53 @@
+/**
+ * Semantic design token CSS custom properties (radius, spacing, shadows, z-index, font).
+ * Injected by ThemeProvider so components can use var(--radius-*), var(--spacing-*), etc.
+ */
+
+import { figmaRadius } from './radius';
+import { figmaShadows } from './shadows';
+import { figmaSpacing } from './spacing';
+import { figmaFontFamilies } from './typography';
+import { zIndex } from './zIndex';
+
+function buildSemanticTokensCss(): string {
+  const lines: string[] = [
+    ':root, [data-mantine-color-scheme="light"], [data-mantine-color-scheme="dark"] {',
+  ];
+
+  // Radius
+  for (const [key, value] of Object.entries(figmaRadius)) {
+    lines.push(`  --radius-${key}: ${value};`);
+  }
+  lines.push(`  --radius-default: ${figmaRadius.lg};`);
+
+  // Spacing
+  for (const [key, value] of Object.entries(figmaSpacing)) {
+    lines.push(`  --spacing-${key}: ${value};`);
+  }
+
+  // Shadows
+  for (const [key, value] of Object.entries(figmaShadows)) {
+    lines.push(`  --shadow-${key}: ${value};`);
+  }
+
+  // Z-index
+  for (const [key, value] of Object.entries(zIndex)) {
+    lines.push(`  --z-index-${key}: ${value};`);
+  }
+
+  // Font families
+  lines.push(
+    `  --font-family-monospace: "${figmaFontFamilies['font-family-monospace']}", "Courier New", monospace;`,
+  );
+  lines.push(
+    `  --font-family-body: "${figmaFontFamilies['font-family-body']}", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;`,
+  );
+  lines.push(
+    `  --font-family-headings: "${figmaFontFamilies['font-family-headings']}", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;`,
+  );
+
+  lines.push('}');
+  return lines.join('\n');
+}
+
+export const semanticTokensCss = buildSemanticTokensCss();

package/src/tokens/shadows.ts

@@ -0,0 +1,11 @@
+/**
+ * AUTO-GENERATED - DO NOT EDIT
+ * Generated from: packages/figma-tokens/source/shadows.json
+ */
+
+export const figmaShadows = {
+  sm: '0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10)',
+  md: '0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.10)',
+  lg: '0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px -4px 6px rgba(0, 0, 0, 0.10)',
+  xl: '0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px -6px 10px rgba(0, 0, 0, 0.10)',
+} as const;

package/src/tokens/spacing.ts

@@ -0,0 +1,20 @@
+/**
+ * AUTO-GENERATED - DO NOT EDIT
+ * Generated from: packages/figma-tokens/source/spacing.json
+ */
+
+import { rem } from '@mantine/core';
+
+export const figmaSpacing = {
+  '3xs': rem('2px'),
+  '2xs': rem('4px'),
+  xs: rem('8px'),
+  sm: rem('12px'),
+  md: rem('16px'),
+  lg: rem('20px'),
+  xl: rem('24px'),
+  '2xl': rem('32px'),
+  '3xl': rem('40px'),
+  '4xl': rem('48px'),
+  '5xl': rem('64px'),
+} as const;

package/src/tokens/text-styles.ts

@@ -0,0 +1,179 @@
+/**
+ * AUTO-GENERATED - DO NOT EDIT
+ * Generated from: packages/figma-tokens/source/text-styles.json + typography.json
+ */
+
+import { rem } from '@mantine/core';
+
+export type TextTransform = 'uppercase' | 'none' | 'capitalize' | 'lowercase';
+
+export type TextStyleDefinition = {
+  fontFamily: string | undefined;
+  fontWeight: number;
+  fontSize: string;
+  lineHeight: string;
+  letterSpacing: number | string;
+  textTransform?: TextTransform;
+};
+
+export const textStyleVariants = {
+  heading1: {
+    fontFamily: undefined,
+    fontWeight: 700,
+    fontSize: rem('48px'),
+    lineHeight: rem('48px'),
+    letterSpacing: 0,
+  },
+  heading2: {
+    fontFamily: undefined,
+    fontWeight: 700,
+    fontSize: rem('28px'),
+    lineHeight: rem('28px'),
+    letterSpacing: 0,
+  },
+  heading3: {
+    fontFamily: undefined,
+    fontWeight: 700,
+    fontSize: rem('24px'),
+    lineHeight: rem('28.8px'),
+    letterSpacing: 0,
+  },
+  heading4: {
+    fontFamily: undefined,
+    fontWeight: 700,
+    fontSize: rem('20px'),
+    lineHeight: rem('24px'),
+    letterSpacing: 0,
+  },
+  heading5: {
+    fontFamily: undefined,
+    fontWeight: 700,
+    fontSize: rem('18px'),
+    lineHeight: rem('24px'),
+    letterSpacing: 0,
+  },
+  body1: {
+    fontFamily: undefined,
+    fontWeight: 400,
+    fontSize: rem('14px'),
+    lineHeight: rem('21px'),
+    letterSpacing: 0,
+  },
+  'body1.strong': {
+    fontFamily: undefined,
+    fontWeight: 500,
+    fontSize: rem('14px'),
+    lineHeight: rem('21px'),
+    letterSpacing: 0,
+  },
+  'body1.stronger': {
+    fontFamily: undefined,
+    fontWeight: 600,
+    fontSize: rem('14px'),
+    lineHeight: rem('21px'),
+    letterSpacing: 0,
+  },
+  caption1: {
+    fontFamily: undefined,
+    fontWeight: 400,
+    fontSize: rem('13px'),
+    lineHeight: rem('19.5px'),
+    letterSpacing: rem('0.06px'),
+  },
+  'caption1.strong': {
+    fontFamily: undefined,
+    fontWeight: 500,
+    fontSize: rem('13px'),
+    lineHeight: rem('19.5px'),
+    letterSpacing: rem('0.06px'),
+  },
+  'caption1.stronger': {
+    fontFamily: undefined,
+    fontWeight: 600,
+    fontSize: rem('13px'),
+    lineHeight: rem('19.5px'),
+    letterSpacing: rem('0.06px'),
+  },
+  caption2: {
+    fontFamily: undefined,
+    fontWeight: 400,
+    fontSize: rem('12px'),
+    lineHeight: rem('18px'),
+    letterSpacing: rem('0.165px'),
+  },
+  'caption2.strong': {
+    fontFamily: undefined,
+    fontWeight: 500,
+    fontSize: rem('12px'),
+    lineHeight: rem('18px'),
+    letterSpacing: rem('0.165px'),
+  },
+  'caption2.stronger': {
+    fontFamily: undefined,
+    fontWeight: 600,
+    fontSize: rem('12px'),
+    lineHeight: rem('18px'),
+    letterSpacing: rem('0.165px'),
+  },
+  caption3: {
+    fontFamily: undefined,
+    fontWeight: 400,
+    fontSize: rem('11px'),
+    lineHeight: rem('16.5px'),
+    letterSpacing: 0,
+  },
+  'caption3.strong': {
+    fontFamily: undefined,
+    fontWeight: 500,
+    fontSize: rem('11px'),
+    lineHeight: rem('16.5px'),
+    letterSpacing: 0,
+  },
+  'caption3.stronger': {
+    fontFamily: undefined,
+    fontWeight: 600,
+    fontSize: rem('11px'),
+    lineHeight: rem('16.5px'),
+    letterSpacing: 0,
+  },
+  smallCaps: {
+    fontFamily: undefined,
+    fontWeight: 600,
+    fontSize: rem('12px'),
+    lineHeight: rem('18px'),
+    letterSpacing: rem('0.5px'),
+    textTransform: 'uppercase',
+  },
+  monospaced: {
+    fontFamily: 'var(--font-family-monospace)',
+    fontWeight: 400,
+    fontSize: rem('16px'),
+    lineHeight: rem('24px'),
+    letterSpacing: 0,
+  },
+} as const satisfies Record<string, TextStyleDefinition>;
+
+export type TextStyleVariant = keyof typeof textStyleVariants;
+
+export type HeadingVariant =
+  | 'heading1'
+  | 'heading2'
+  | 'heading3'
+  | 'heading4'
+  | 'heading5';
+
+export type BodyVariant =
+  | 'body1'
+  | 'body1.strong'
+  | 'body1.stronger'
+  | 'caption1'
+  | 'caption1.strong'
+  | 'caption1.stronger'
+  | 'caption2'
+  | 'caption2.strong'
+  | 'caption2.stronger'
+  | 'caption3'
+  | 'caption3.strong'
+  | 'caption3.stronger'
+  | 'smallCaps'
+  | 'monospaced';

package/src/tokens/typography.ts

@@ -0,0 +1,40 @@
+/**
+ * AUTO-GENERATED - DO NOT EDIT
+ * Generated from: packages/figma-tokens/source/typography.json
+ */
+
+import { rem } from '@mantine/core';
+
+export const figmaFontFamilies = {
+  'font-family-sans': 'Inter',
+  'font-family-serif': 'Inter',
+  'font-family-monospace': 'Menlo',
+  'font-family-headings': 'Inter',
+  'font-family-body': 'Inter',
+} as const;
+
+export const figmaFontSizes = {
+  'paragraph-regular': rem('14px'),
+  'paragraph-small': rem('13px'),
+  'paragraph-mini': rem('12px'),
+  monospaced: rem('16px'),
+  'paragraph-tiny': rem('11px'),
+  h5: rem('18px'),
+  h4: rem('20px'),
+  h3: rem('24px'),
+  h2: rem('28px'),
+  h1: rem('48px'),
+} as const;
+
+export const figmaLineHeights = {
+  'paragraph-regular': rem('21px'),
+  'paragraph-small': rem('19.5px'),
+  'paragraph-mini': rem('18px'),
+  monospaced: rem('24px'),
+  'paragraph-tiny': rem('16.5px'),
+  h5: rem('24px'),
+  h4: rem('24px'),
+  h3: rem('28.8px'),
+  h2: rem('28px'),
+  h1: rem('48px'),
+} as const;

package/src/tokens/zIndex.ts

@@ -0,0 +1,27 @@
+/**
+ * Z-index design tokens. Single source of truth for stacking order.
+ * Aligned with Mantine's scale (app, modal, popover, overlay, max) where applicable.
+ * Use in TypeScript (inline styles, Mantine props) or via CSS var(--z-index-*).
+ */
+
+export const zIndex = {
+  base: 1,
+  resizeHandle: 10,
+  bulkActionBar: 20,
+  app: 100,
+  modal: 200,
+  dropdownOverlay: 299,
+  popover: 300,
+  overlay: 400,
+  loading: 1000,
+  max: 9999,
+} as const;
+
+export type ZIndexKey = keyof typeof zIndex;
+
+/**
+ * Returns the CSS var() for a z-index token. Use in vanilla-extract when you need override capability.
+ */
+export function toZIndexVar(key: ZIndexKey): string {
+  return `var(--z-index-${key})`;
+}

package/src/types/mantine-theme.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Mantine Theme Augmentation
+ * Extends Mantine's theme types to include custom font weights
+ */
+
+import '@mantine/core';
+
+declare module '@mantine/core' {
+  export interface MantineThemeOther {
+    style?: string;
+    fontWeights?: {
+      regular: string; // 400
+      medium: string; // 500
+      semibold: string; // 600
+    };
+  }
+}

package/src/types/tanstack-table.d.ts

@@ -0,0 +1,22 @@
+import '@tanstack/react-table';
+
+/**
+ * Module augmentation for TanStack Table's ColumnMeta interface.
+ * This provides type-safe access to custom column metadata across
+ * DataTable and SimpleTable components.
+ */
+declare module '@tanstack/react-table' {
+  // oxlint-disable-next-line typescript/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    /**
+     * Text alignment for the column header and cells
+     * @default 'left'
+     */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Pin column to left or right so it stays in view when scrolling.
+     * Used by useServerTable to set initialState.columnPinning and by DataTable for sticky styles.
+     */
+    pinned?: 'left' | 'right' | null;
+  }
+}