mcr-design-systems 1.0.0

package/dist/tokens/primitives/colors.js

@@ -0,0 +1,157 @@
+const a = {
+  white: "#ffffff",
+  black: "#000000",
+  transparent: "transparent"
+}, f = {
+  // Primary neutral palette
+  neutral: {
+    50: "#FAFAFA",
+    100: "#F5F5F5",
+    200: "#E5E5E5",
+    300: "#D4D4D4",
+    400: "#A3A3A3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0A0A0A"
+  },
+  // Brand and accent colors
+  blue: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  green: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  orange: {
+    50: "#fff7ed",
+    100: "#ffedd5",
+    200: "#fed7aa",
+    300: "#fdba74",
+    400: "#fb923c",
+    500: "#f97316",
+    600: "#ea580c",
+    700: "#c2410c",
+    800: "#9a3412",
+    900: "#7c2d12",
+    950: "#431407"
+  },
+  red: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  },
+  yellow: {
+    50: "#fefce8",
+    100: "#fef9c3",
+    200: "#fef08a",
+    300: "#fde047",
+    400: "#facc15",
+    500: "#eab308",
+    600: "#ca8a04",
+    700: "#a16207",
+    800: "#854d0e",
+    900: "#713f12",
+    950: "#422006"
+  },
+  violet: {
+    50: "#f5f3ff",
+    100: "#ede9fe",
+    200: "#ddd6fe",
+    300: "#c4b5fd",
+    400: "#a78bfa",
+    500: "#8b5cf6",
+    600: "#7c3aed",
+    700: "#6d28d9",
+    800: "#5b21b6",
+    900: "#4c1d95",
+    950: "#2e1065"
+  },
+  // Extended grays for design flexibility
+  slate: {
+    50: "#F8FAFC",
+    100: "#F1F5F9",
+    200: "#E2E8F0",
+    300: "#CBD5E1",
+    400: "#94A3B8",
+    500: "#64748B",
+    600: "#475569",
+    700: "#334155",
+    800: "#1E293B",
+    900: "#0F172A",
+    950: "#020617"
+  },
+  gray: {
+    50: "#F9FAFB",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    700: "#374151",
+    800: "#1F2937",
+    900: "#111827",
+    950: "#030712"
+  }
+}, e = {
+  white: {
+    "0.25": "rgba(255, 255, 255, 0.06)",
+    "0.5": "rgba(255, 255, 255, 0.12)",
+    1: "rgba(255, 255, 255, 0.25)",
+    "1.25": "rgba(255, 255, 255, 0.31)",
+    "1.5": "rgba(255, 255, 255, 0.37)",
+    2: "rgba(255, 255, 255, 0.5)",
+    "2.25": "rgba(255, 255, 255, 0.56)",
+    "2.5": "rgba(255, 255, 255, 0.62)",
+    3: "rgba(255, 255, 255, 0.75)",
+    4: "rgba(255, 255, 255, 0.87)"
+  },
+  black: {
+    "0.25": "rgba(0, 0, 0, 0.06)",
+    "0.5": "rgba(0, 0, 0, 0.12)",
+    1: "rgba(0, 0, 0, 0.25)",
+    "1.25": "rgba(0, 0, 0, 0.31)",
+    "1.5": "rgba(0, 0, 0, 0.37)",
+    2: "rgba(0, 0, 0, 0.5)",
+    "2.25": "rgba(0, 0, 0, 0.56)",
+    "2.5": "rgba(0, 0, 0, 0.62)",
+    3: "rgba(0, 0, 0, 0.75)",
+    4: "rgba(0, 0, 0, 0.87)",
+    64: "rgba(0, 0, 0, 0.64)"
+  }
+};
+export {
+  e as alphaColors,
+  a as baseColors,
+  f as colorScales
+};

package/dist/tokens/primitives/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Primitive Token Exports
+ * Centralized exports for all primitive design tokens
+ */
+export * from './colors';
+export * from './typography';
+export * from './layout';
+export type PrimitiveToken = 'color' | 'typography' | 'spacing' | 'border' | 'shadow' | 'transition';

package/dist/tokens/primitives/layout.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Layout Tokens
+ * Spacing, sizing, borders, and layout-related properties
+ */
+export declare const spacing: {
+    readonly none: "0rem";
+    readonly 'xs-4': "0.125rem";
+    readonly 'xs-3': "0.25rem";
+    readonly 'xs-2': "0.375rem";
+    readonly xs: "0.5rem";
+    readonly 'sm-2': "0.75rem";
+    readonly sm: "1rem";
+    readonly md: "1.5rem";
+    readonly lg: "2rem";
+    readonly xl: "2.5rem";
+    readonly 'xl-2': "3rem";
+    readonly 'xl-3': "3.5rem";
+    readonly 'xl-4': "4rem";
+    readonly 'xl-5': "5rem";
+    readonly 'xl-6': "6rem";
+    readonly 'xl-7': "8rem";
+};
+export declare const borderRadius: {
+    readonly none: "0rem";
+    readonly xs: "0.125rem";
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly 'xl-2': "1rem";
+    readonly 'xl-3': "1.5rem";
+    readonly full: "9999px";
+};
+export declare const shadows: {
+    readonly '50': "0px 1px 2px 0px rgba(0, 0, 0, 0.04)";
+    readonly '100': "0px 3px 4px 0px rgba(0, 0, 0, 0.04)";
+    readonly '200': "0px 3px 8px 0px rgba(0, 0, 0, 0.08)";
+    readonly '300': "0px 5px 12px 0px rgba(0, 0, 0, 0.12)";
+    readonly '400': "0px 5px 16px 0px rgba(0, 0, 0, 0.16)";
+    readonly '500': "0px 6px 24px 0px rgba(0, 0, 0, 0.16)";
+    readonly '600': "0px 6px 32px 0px rgba(0, 0, 0, 0.16)";
+    readonly popover: "0px 4px 20px rgba(9, 9, 11, 0.1)";
+    readonly 'left-side-panel': "6px 0px 20px rgba(9, 9, 11, 0.1)";
+    readonly 'right-side-panel': "-6px 0px 20px rgba(9, 9, 11, 0.1)";
+    readonly 'hover-stage': "0px 0px 0px 3px rgb(228, 228, 231)";
+    readonly 'hover-error': "0px 0px 0px 3px rgba(239, 68, 68, 0.2)";
+    readonly 'focus-ring': "0px 0px 0px 2px rgba(59, 130, 246, 0.5)";
+    readonly none: "none";
+    readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
+};
+export declare const zIndex: {
+    readonly hide: -1;
+    readonly auto: "auto";
+    readonly base: 0;
+    readonly docked: 10;
+    readonly dropdown: 1000;
+    readonly sticky: 1020;
+    readonly banner: 1030;
+    readonly overlay: 1040;
+    readonly modal: 1050;
+    readonly popover: 1060;
+    readonly skipLink: 1070;
+    readonly toast: 1080;
+    readonly tooltip: 1090;
+};
+export declare const transitions: {
+    readonly duration: {
+        readonly '75': "75ms";
+        readonly '100': "100ms";
+        readonly '150': "150ms";
+        readonly '200': "200ms";
+        readonly '300': "300ms";
+        readonly '500': "500ms";
+        readonly '700': "700ms";
+        readonly '1000': "1000ms";
+    };
+    readonly timing: {
+        readonly linear: "linear";
+        readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly 'in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+    };
+};
+export type SpacingKey = keyof typeof spacing;
+export type BorderRadiusKey = keyof typeof borderRadius;
+export type ShadowKey = keyof typeof shadows;
+export type ZIndexKey = keyof typeof zIndex;
+export type TransitionDuration = keyof typeof transitions.duration;
+export type TransitionTiming = keyof typeof transitions.timing;

package/dist/tokens/primitives/layout.js

@@ -0,0 +1,87 @@
+const x = {
+  none: "0rem",
+  "xs-4": "0.125rem",
+  "xs-3": "0.25rem",
+  "xs-2": "0.375rem",
+  xs: "0.5rem",
+  "sm-2": "0.75rem",
+  sm: "1rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "2.5rem",
+  "xl-2": "3rem",
+  "xl-3": "3.5rem",
+  "xl-4": "4rem",
+  "xl-5": "5rem",
+  "xl-6": "6rem",
+  "xl-7": "8rem"
+}, p = {
+  none: "0rem",
+  xs: "0.125rem",
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  "xl-2": "1rem",
+  "xl-3": "1.5rem",
+  full: "9999px"
+}, r = {
+  // Base elevation shadows
+  50: "0px 1px 2px 0px rgba(0, 0, 0, 0.04)",
+  100: "0px 3px 4px 0px rgba(0, 0, 0, 0.04)",
+  200: "0px 3px 8px 0px rgba(0, 0, 0, 0.08)",
+  300: "0px 5px 12px 0px rgba(0, 0, 0, 0.12)",
+  400: "0px 5px 16px 0px rgba(0, 0, 0, 0.16)",
+  500: "0px 6px 24px 0px rgba(0, 0, 0, 0.16)",
+  600: "0px 6px 32px 0px rgba(0, 0, 0, 0.16)",
+  // Component-specific shadows
+  popover: "0px 4px 20px rgba(9, 9, 11, 0.1)",
+  "left-side-panel": "6px 0px 20px rgba(9, 9, 11, 0.1)",
+  "right-side-panel": "-6px 0px 20px rgba(9, 9, 11, 0.1)",
+  // Interactive state shadows
+  "hover-stage": "0px 0px 0px 3px rgb(228, 228, 231)",
+  "hover-error": "0px 0px 0px 3px rgba(239, 68, 68, 0.2)",
+  "focus-ring": "0px 0px 0px 2px rgba(59, 130, 246, 0.5)",
+  // Special shadows
+  none: "none",
+  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
+}, e = {
+  hide: -1,
+  auto: "auto",
+  base: 0,
+  docked: 10,
+  dropdown: 1e3,
+  sticky: 1020,
+  banner: 1030,
+  overlay: 1040,
+  modal: 1050,
+  popover: 1060,
+  skipLink: 1070,
+  toast: 1080,
+  tooltip: 1090
+}, m = {
+  duration: {
+    75: "75ms",
+    100: "100ms",
+    150: "150ms",
+    200: "200ms",
+    300: "300ms",
+    500: "500ms",
+    700: "700ms",
+    1e3: "1000ms"
+  },
+  timing: {
+    linear: "linear",
+    in: "cubic-bezier(0.4, 0, 1, 1)",
+    out: "cubic-bezier(0, 0, 0.2, 1)",
+    "in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+    bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+  }
+};
+export {
+  p as borderRadius,
+  r as shadows,
+  x as spacing,
+  m as transitions,
+  e as zIndex
+};

package/dist/tokens/primitives/typography.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Typography Tokens
+ * Font definitions, sizes, weights, and text-related properties
+ * Based on Figma design system specifications
+ */
+export declare const typography: {
+    readonly fontFamilies: {
+        readonly primary: readonly ["\"Open Sans\"", "sans-serif"];
+        readonly secondary: readonly ["\"Open Sans\"", "sans-serif"];
+    };
+    readonly fontSizes: {
+        readonly 'base-xs': "0.625rem";
+        readonly 'base-sm': "0.75rem";
+        readonly 'base-md': "0.875rem";
+        readonly 'base-lg': "1rem";
+        readonly 'heading-xs': "1.125rem";
+        readonly 'heading-sm': "1.25rem";
+        readonly 'heading-md': "1.5rem";
+        readonly 'heading-lg': "1.65rem";
+        readonly 'heading-xl': "2rem";
+        readonly 'heading-2xl': "2.5rem";
+        readonly 'display-lg': "6rem";
+        readonly 'display-xl': "4rem";
+        readonly 'display-2xl': "3rem";
+    };
+    readonly fontWeights: {
+        readonly base: "400";
+        readonly 'heading-1': "700";
+        readonly 'heading-2': "700";
+        readonly 'heading-3': "700";
+        readonly 'heading-4': "600";
+        readonly 'heading-5': "600";
+        readonly 'heading-6': "600";
+        readonly 'display-1': "700";
+        readonly 'display-2': "700";
+        readonly 'display-3': "700";
+        readonly thin: "100";
+        readonly extralight: "200";
+        readonly light: "300";
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+        readonly black: "900";
+    };
+    readonly lineHeights: {
+        readonly 'base-xs': "1rem";
+        readonly 'base-sm': "1rem";
+        readonly 'base-md': "1.25rem";
+        readonly 'base-lg': "1.5rem";
+        readonly 'heading-2xl': "3.75rem";
+        readonly 'heading-xl': "3rem";
+        readonly 'heading-lg': "2.625rem";
+        readonly 'heading-md': "2.25rem";
+        readonly 'heading-sm': "1.875rem";
+        readonly 'heading-xs': "1.625rem";
+        readonly 'display-2xl': "9rem";
+        readonly 'display-xl': "5rem";
+        readonly 'display-lg': "4.5rem";
+    };
+    readonly letterSpacing: {
+        readonly tight: "-0.025em";
+        readonly normal: "0";
+        readonly wide: "0.025em";
+    };
+};
+export type FontFamily = keyof typeof typography.fontFamilies;
+export type FontSize = keyof typeof typography.fontSizes;
+export type FontWeight = keyof typeof typography.fontWeights;
+export type LineHeight = keyof typeof typography.lineHeights;
+export type LetterSpacing = keyof typeof typography.letterSpacing;
+export type BaseFontSize = Extract<FontSize, `base-${string}`>;
+export type HeadingFontSize = Extract<FontSize, `heading-${string}`>;
+export type DisplayFontSize = Extract<FontSize, `display-${string}`>;
+export type BaseLineHeight = Extract<LineHeight, `base-${string}`>;
+export type HeadingLineHeight = Extract<LineHeight, `heading-${string}`>;
+export type DisplayLineHeight = Extract<LineHeight, `display-${string}`>;

package/dist/tokens/primitives/typography.js

@@ -0,0 +1,113 @@
+const e = {
+  // Font families with primary and secondary variants
+  fontFamilies: {
+    primary: ['"Open Sans"', "sans-serif"],
+    secondary: ['"Open Sans"', "sans-serif"]
+  },
+  // Font sizes organized by variant type (converted to rem)
+  fontSizes: {
+    "base-xs": "0.625rem",
+    // 10px
+    "base-sm": "0.75rem",
+    // 12px
+    "base-md": "0.875rem",
+    // 14px
+    "base-lg": "1rem",
+    // 16px
+    "heading-xs": "1.125rem",
+    // 18px
+    "heading-sm": "1.25rem",
+    // 20px
+    "heading-md": "1.5rem",
+    // 24px
+    "heading-lg": "1.65rem",
+    // 28px
+    "heading-xl": "2rem",
+    // 32px
+    "heading-2xl": "2.5rem",
+    // 40px
+    "display-lg": "6rem",
+    // 96px,
+    "display-xl": "4rem",
+    // 64px
+    "display-2xl": "3rem"
+    // 48px
+  },
+  // Font weights for different typography variants
+  fontWeights: {
+    // Base text weight
+    base: "400",
+    // Normal/Regular
+    // Heading weights (variable by heading level)
+    "heading-1": "700",
+    // Bold
+    "heading-2": "700",
+    // Bold
+    "heading-3": "700",
+    // Bold
+    "heading-4": "600",
+    // SemiBold
+    "heading-5": "600",
+    // SemiBold
+    "heading-6": "600",
+    // SemiBold
+    // Display weights
+    "display-1": "700",
+    // Bold
+    "display-2": "700",
+    // Bold
+    "display-3": "700",
+    // Bold
+    // Utility weights
+    thin: "100",
+    extralight: "200",
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900"
+  },
+  // Line heights matching font sizes (converted to rem)
+  lineHeights: {
+    // Base line heights
+    "base-xs": "1rem",
+    // 16px
+    "base-sm": "1rem",
+    // 16px
+    "base-md": "1.25rem",
+    // 20px
+    "base-lg": "1.5rem",
+    // 24px - Use for: Body, Paragraph, Action (Large)
+    // Heading line heights
+    "heading-2xl": "3.75rem",
+    // 60px
+    "heading-xl": "3rem",
+    // 48px
+    "heading-lg": "2.625rem",
+    // 42px
+    "heading-md": "2.25rem",
+    // 36px
+    "heading-sm": "1.875rem",
+    // 30px
+    "heading-xs": "1.625rem",
+    // 26px
+    // Display line heights
+    "display-2xl": "9rem",
+    // 144px
+    "display-xl": "5rem",
+    // 80px
+    "display-lg": "4.5rem"
+    // 72px
+  },
+  // Letter spacing for optimal readability
+  letterSpacing: {
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em"
+  }
+};
+export {
+  e as typography
+};