@scalepad/ui 0.1.0

package/src/theme.ts

@@ -0,0 +1,168 @@
+import {
+  ActionIcon,
+  Card,
+  Container,
+  createTheme,
+  Modal,
+  Paper,
+  rem,
+  Select,
+  type MantineThemeOverride,
+} from '@mantine/core';
+
+import {
+  figmaColors,
+  figmaFontFamilies,
+  figmaFontSizes,
+  figmaLineHeights,
+  figmaRadius,
+  figmaShadows,
+  figmaSpacing,
+  textStyleVariants,
+  zIndex,
+} from './tokens';
+
+const CONTAINER_SIZES: Record<string, string> = {
+  xxs: rem('200px'),
+  xs: rem('300px'),
+  sm: rem('400px'),
+  md: rem('500px'),
+  lg: rem('600px'),
+  xl: rem('1400px'),
+  xxl: rem('1600px'),
+};
+
+/** ActionIcon/IconButton size → same height as Button for that size (aligns sm IconButton with sm Button) */
+const ICON_BUTTON_SIZES: Record<string, string> = {
+  xs: rem('30px'),
+  sm: rem('36px'),
+  md: rem('42px'),
+  lg: rem('50px'),
+  xl: rem('60px'),
+};
+
+export const mantineTheme: MantineThemeOverride = createTheme({
+  /** Put your mantine theme override here */
+  colors: {
+    ...figmaColors, // Color palettes synced from Figma
+  },
+  fontFamily: `"${figmaFontFamilies['font-family-body']}", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif`,
+  fontFamilyMonospace: `"${figmaFontFamilies['font-family-monospace']}", "Courier New", monospace`,
+  headings: {
+    fontFamily: `"${figmaFontFamilies['font-family-headings']}", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif`,
+    sizes: {
+      h1: { fontSize: figmaFontSizes.h1, lineHeight: figmaLineHeights.h1 },
+      h2: { fontSize: figmaFontSizes.h2, lineHeight: figmaLineHeights.h2 },
+      h3: { fontSize: figmaFontSizes.h3, lineHeight: figmaLineHeights.h3 },
+      h4: { fontSize: figmaFontSizes.h4, lineHeight: figmaLineHeights.h4 },
+      h5: { fontSize: figmaFontSizes.h4, lineHeight: figmaLineHeights.h4 }, // Fallback to h4
+      h6: { fontSize: figmaFontSizes.h4, lineHeight: figmaLineHeights.h4 }, // Fallback to h4
+    },
+  },
+  breakpoints: {
+    xxs: '20em',
+    xs: '30em',
+    sm: '48em',
+    md: '64em',
+    lg: '72em',
+    xl: '80em',
+    xxl: '90em',
+    '2xl': '100em',
+  },
+  fontSizes: {
+    // Figma paragraph tokens
+    xs: figmaFontSizes['paragraph-mini'], // 12px
+    sm: figmaFontSizes['paragraph-small'], // 14px
+    md: figmaFontSizes['paragraph-regular'], // 16px
+    lg: rem('18px'),
+    xl: figmaFontSizes.h4, // 20px
+    '2xl': figmaFontSizes.h3, // 24px
+    '3xl': figmaFontSizes.h2, // 30px
+    '4xl': rem('36px'),
+    '5xl': figmaFontSizes.h1, // 48px
+  },
+  spacing: {
+    ...figmaSpacing, // Spacing synced from Figma
+    // Additional spacing values
+    sm: rem('12px'),
+  },
+  radius: {
+    ...figmaRadius, // Border radius synced from Figma
+  },
+  shadows: {
+    ...figmaShadows, // Shadows synced from Figma
+  },
+  primaryColor: 'primary',
+  other: {
+    style: 'mantine',
+    zIndex: {
+      app: zIndex.app,
+      modal: zIndex.modal,
+      popover: zIndex.popover,
+      overlay: zIndex.overlay,
+      max: zIndex.max,
+    },
+  },
+  components: {
+    /** Put your mantine component override here */
+    Container: Container.extend({
+      vars: (_, { size, fluid }) => ({
+        root: {
+          '--container-size': fluid
+            ? '100%'
+            : size !== undefined && size in CONTAINER_SIZES
+              ? CONTAINER_SIZES[size]
+              : rem(size),
+        },
+      }),
+    }),
+    Paper: Paper.extend({
+      defaultProps: {
+        p: 'md',
+        shadow: 'xl',
+        radius: 'md',
+        withBorder: true,
+      },
+    }),
+
+    Card: Card.extend({
+      defaultProps: {
+        p: 'xl',
+        shadow: 'xl',
+        radius: 'var(--radius-default)',
+        withBorder: true,
+      },
+    }),
+    Select: Select.extend({
+      defaultProps: {
+        checkIconPosition: 'right',
+      },
+    }),
+    ActionIcon: ActionIcon.extend({
+      vars: (_, { size }) => ({
+        root: {
+          '--ai-size':
+            size !== undefined && size in ICON_BUTTON_SIZES
+              ? ICON_BUTTON_SIZES[size as keyof typeof ICON_BUTTON_SIZES]
+              : undefined,
+        },
+      }),
+    }),
+    // Mantine renders `Modal` titles inside an `<h2>` and styles them with its
+    // own defaults. Project the design-system `heading4` token onto every
+    // modal title so dialogs across the app share a single, consistent header
+    // typography (and so consumers don't need to nest a `<Title variant="…">`
+    // element, which would produce invalid `<h2><h4>…</h4></h2>` markup that
+    // React 19 surfaces as a `validateDOMNesting` error).
+    Modal: Modal.extend({
+      styles: {
+        title: {
+          fontWeight: textStyleVariants.heading4.fontWeight,
+          fontSize: textStyleVariants.heading4.fontSize,
+          lineHeight: textStyleVariants.heading4.lineHeight,
+          letterSpacing: textStyleVariants.heading4.letterSpacing,
+        },
+      },
+    }),
+  },
+});

package/src/tokens/color-types.ts

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ */
+
+/** Text/foreground color tokens (for the `c` prop on text elements) */
+export type TextColor =
+  | 'text.title'
+  | 'text.danger.default'
+  | 'text.link'
+  | 'text.default'
+  | 'text.disabled.default'
+  | 'text.subdued.default'
+  | 'text.primary.default'
+  | 'text.primary.light'
+  | 'text.warning.default'
+  | 'text.success.default'
+  | 'text.danger.disabled'
+  | 'text.information.default'
+  | 'text.danger.strong'
+  | 'text.warning.strong'
+  | 'text.success.strong'
+  | 'text.information.strong'
+  | 'text.subdued.strong'
+  | 'text.inverse';
+
+/** Background color tokens (for the `bg` prop) */
+export type BackgroundColor =
+  | 'background.default'
+  | 'background.default-hover'
+  | 'background.body'
+  | 'background.disabled.default'
+  | 'background.transparent'
+  | 'background.primary.filled'
+  | 'background.primary.filled-hover'
+  | 'background.warning.filled'
+  | 'background.success.filled'
+  | 'background.subdued.light'
+  | 'background.subdued.ultralight'
+  | 'background.danger.filled'
+  | 'background.subdued.filled'
+  | 'background.warning.filled-hover'
+  | 'background.success.filled-hover'
+  | 'background.danger.filled-hover'
+  | 'background.subdued.filled-hover'
+  | 'background.danger.light'
+  | 'background.primary.light'
+  | 'background.warning.light'
+  | 'background.success.light'
+  | 'background.primary.light-hover'
+  | 'background.warning.light-hover'
+  | 'background.success.light-hover'
+  | 'background.danger.light-hover'
+  | 'background.subdued.light-hover'
+  | 'background.information.filled'
+  | 'background.information.filled-hover'
+  | 'background.information.light'
+  | 'background.information.light-hover'
+  | 'background.inverse.filled'
+  | 'background.inverse.filled-hover'
+  | 'background.input'
+  | 'background.backdrop';
+
+/** Stroke/border color tokens (for borders and dividers) */
+export type StrokeColor =
+  | 'stroke.default'
+  | 'stroke.light'
+  | 'stroke.primary.default'
+  | 'stroke.success.default'
+  | 'stroke.danger.default'
+  | 'stroke.subdued.strong'
+  | 'stroke.warning.default'
+  | 'stroke.information.default'
+  | 'stroke.focus.default'
+  | 'stroke.inverse'
+  | 'stroke.subdued.default'
+  | 'stroke.strong'
+  | 'stroke.icon'
+  | 'stroke.focus.strong';
+
+/** Icon color tokens (for icon fill colors) */
+export type IconColor =
+  | 'icon.light'
+  | 'icon.danger.default'
+  | 'icon.danger.disabled'
+  | 'icon.warning.default'
+  | 'icon.warning.strong'
+  | 'icon.danger.strong'
+  | 'icon.information.default'
+  | 'icon.information.strong'
+  | 'icon.success.default'
+  | 'icon.success.strong'
+  | 'icon.default'
+  | 'icon.inverse'
+  | 'icon.primary.default'
+  | 'icon.primary.strong'
+  | 'icon.medium';
+
+/** Any semantic color token */
+export type SemanticColor =
+  | TextColor
+  | BackgroundColor
+  | StrokeColor
+  | IconColor;

package/src/tokens/colors.ts

@@ -0,0 +1,243 @@
+/**
+ * Color primitives synced from Figma Design System (VCLfybgU3OaUUPrQdBaVmP).
+ * Figma source of truth: Primitives collection.
+ */
+
+import type { MantineColorsTuple } from '@mantine/core';
+
+export const white = '#ffffff';
+export const black = '#000000';
+
+export const green: MantineColorsTuple = [
+  '#edf7f3',
+  '#d5f0e5',
+  '#c1e8d7',
+  '#b3d9cc',
+  '#80c4a8',
+  '#4d9b7f',
+  '#3a8068',
+  '#046548',
+  '#017854',
+  '#005a3e',
+];
+
+export const blue: MantineColorsTuple = [
+  '#e7f5ff',
+  '#d0ebff',
+  '#a5d8ff',
+  '#74c0fc',
+  '#4dabf7',
+  '#339af0',
+  '#228be6',
+  '#1c7ed6',
+  '#1971c2',
+  '#1864ab',
+];
+
+export const red: MantineColorsTuple = [
+  '#fff5f5',
+  '#ffe3e3',
+  '#ffc9c9',
+  '#ffa8a8',
+  '#ff8787',
+  '#ff6b6b',
+  '#fa5252',
+  '#f03e3e',
+  '#e03131',
+  '#c92a2a',
+];
+
+export const redAlpha = {
+  '10': 'rgba(250, 82, 82, 0.10)',
+  '12': 'rgba(250, 82, 82, 0.12)',
+  '15': 'rgba(250, 82, 82, 0.15)',
+  '20': 'rgba(250, 82, 82, 0.20)',
+  '50': 'rgba(224, 49, 49, 0.50)',
+} as const;
+
+export const gray: MantineColorsTuple = [
+  '#f9fafb',
+  '#f3f4f6',
+  '#e5e7eb',
+  '#d1d5db',
+  '#9ca3af',
+  '#6b7280',
+  '#4b5563',
+  '#374151',
+  '#1f2937',
+  '#111827',
+];
+
+export const grayAlpha = {
+  '9-60': 'rgba(17, 24, 39, 0.60)',
+} as const;
+
+export const dark: MantineColorsTuple = [
+  '#c9c9c9',
+  '#b8b8b8',
+  '#828282',
+  '#696969',
+  '#424242',
+  '#3b3b3b',
+  '#2e2e2e',
+  '#242424',
+  '#1f1f1f',
+  '#141414',
+];
+
+export const primary: MantineColorsTuple = [
+  '#edf7f3',
+  '#d5f0e5',
+  '#c1e8d7',
+  '#b3d9cc',
+  '#80c4a8',
+  '#4d9b7f',
+  '#3a8068',
+  '#046548',
+  '#017854',
+  '#005a3e',
+];
+
+export const teal: MantineColorsTuple = [
+  '#e6fcf5',
+  '#c3fae8',
+  '#96f2d7',
+  '#63e6be',
+  '#38d9a9',
+  '#20c997',
+  '#12b886',
+  '#0ca678',
+  '#099268',
+  '#087f5b',
+];
+
+export const tealAlpha = {
+  '10': 'rgba(18, 184, 134, 0.10)',
+  '12': 'rgba(18, 184, 134, 0.12)',
+  '15': 'rgba(18, 184, 134, 0.15)',
+  '20': 'rgba(18, 184, 134, 0.20)',
+} as const;
+
+export const yellow: MantineColorsTuple = [
+  '#fff9db',
+  '#fff3bf',
+  '#ffec99',
+  '#ffe066',
+  '#ffd43b',
+  '#fcc419',
+  '#fab005',
+  '#f59f00',
+  '#f08c00',
+  '#e67700',
+];
+
+export const yellowAlpha = {
+  '10': 'rgba(250, 176, 5, 0.10)',
+  '12': 'rgba(250, 176, 5, 0.12)',
+  '15': 'rgba(250, 176, 5, 0.15)',
+  '20': 'rgba(250, 176, 5, 0.20)',
+} as const;
+
+export const violet: MantineColorsTuple = [
+  '#f3f0ff',
+  '#e5dbff',
+  '#d0bfff',
+  '#b197fc',
+  '#9775fa',
+  '#845ef7',
+  '#7950f2',
+  '#7048e8',
+  '#6741d9',
+  '#5f3dc4',
+];
+
+export const grape: MantineColorsTuple = [
+  '#f8f0fc',
+  '#f3d9fa',
+  '#eebefa',
+  '#e599f7',
+  '#da77f2',
+  '#cc5de8',
+  '#be4bdb',
+  '#ae3ec9',
+  '#9c36b5',
+  '#862e9c',
+];
+
+export const cyan: MantineColorsTuple = [
+  '#e3fafc',
+  '#c5f6fa',
+  '#99e9f2',
+  '#66d9e8',
+  '#3bc9db',
+  '#22b8cf',
+  '#15aabf',
+  '#1098ad',
+  '#0c8599',
+  '#0b7285',
+];
+
+export const orange: MantineColorsTuple = [
+  '#fff4e6',
+  '#ffe8cc',
+  '#ffd8a8',
+  '#ffc078',
+  '#ffa94d',
+  '#ff922b',
+  '#fd7e14',
+  '#f76707',
+  '#e8590c',
+  '#d9480f',
+];
+
+export const indigo: MantineColorsTuple = [
+  '#edf2ff',
+  '#dbe4ff',
+  '#bac8ff',
+  '#91a7ff',
+  '#748ffc',
+  '#5c7cfa',
+  '#4c6ef5',
+  '#4263eb',
+  '#3b5bdb',
+  '#364fc7',
+];
+
+export const indigoAlpha = {
+  '10': 'rgba(76, 110, 245, 0.10)',
+  '12': 'rgba(76, 110, 245, 0.12)',
+  '15': 'rgba(76, 110, 245, 0.15)',
+  '20': 'rgba(76, 110, 245, 0.20)',
+} as const;
+
+export const pink: MantineColorsTuple = [
+  '#fff0f6',
+  '#ffdeeb',
+  '#fcc2d7',
+  '#faa2c1',
+  '#f783ac',
+  '#f06595',
+  '#e64980',
+  '#d6336c',
+  '#c2255c',
+  '#a61e4d',
+];
+
+export const transparent = 'rgba(255, 255, 255, 0)';
+
+export const figmaColors = {
+  green,
+  blue,
+  red,
+  gray,
+  dark,
+  primary,
+  teal,
+  yellow,
+  violet,
+  grape,
+  cyan,
+  orange,
+  indigo,
+  pink,
+} as const;

package/src/tokens/index.ts

@@ -0,0 +1,14 @@
+/**
+ * AUTO-GENERATED - DO NOT EDIT
+ * Figma Design Tokens
+ */
+
+export * from './colors';
+export * from './spacing';
+export * from './radius';
+export * from './shadows';
+export * from './typography';
+export * from './text-styles';
+export * from './semantic-colors';
+export * from './color-types';
+export { zIndex, toZIndexVar, type ZIndexKey } from './zIndex';

package/src/tokens/radius.ts

@@ -0,0 +1,17 @@
+/**
+ * AUTO-GENERATED - DO NOT EDIT
+ * Generated from: packages/figma-tokens/source/border-radius.json
+ */
+
+import { rem } from '@mantine/core';
+
+export const figmaRadius = {
+  xs: rem('2px'),
+  sm: rem('4px'),
+  md: rem('6px'),
+  lg: rem('8px'),
+  xl: rem('12px'),
+  '2xl': rem('16px'),
+  '3xl': rem('24px'),
+  full: '9999px',
+} as const;