@citron-systems/citron-ds 1.0.0

package/dist/js/inkblot-tokens.js

@@ -0,0 +1,264 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const InkblotBreakpointSm = "640px"; // Small devices
+export const InkblotBreakpointMd = "768px"; // Tablets
+export const InkblotBreakpointLg = "1024px"; // Laptops
+export const InkblotBreakpointXl = "1280px"; // Desktops
+export const InkblotBreakpoint2xl = "1536px"; // Large screens
+export const InkblotColorNeutralWhite = "#ffffff"; // Pure white, floating surfaces
+export const InkblotColorNeutralGray50 = "#fafaf7"; // Warm off-white, body background
+export const InkblotColorNeutralGray100 = "#f5f4f0"; // Warm surface, secondary bg
+export const InkblotColorNeutralGray200 = "#eae9e3"; // Subtle warm border, dividers
+export const InkblotColorNeutralGray300 = "#d4d3cb"; // Medium warm border
+export const InkblotColorNeutralGray400 = "#93928a"; // Placeholder text, muted
+export const InkblotColorNeutralGray500 = "#6b6a63"; // Secondary text
+export const InkblotColorNeutralGray600 = "#4d4c47"; // Emphasized secondary
+export const InkblotColorNeutralGray700 = "#3a3935"; // Strong text
+export const InkblotColorNeutralGray800 = "#2d2c28"; // Deep warm dark
+export const InkblotColorNeutralGray900 = "#1d1c19"; // Primary text — deep slate, never pure black
+export const InkblotColorNeutralGray950 = "#0f0e0c"; // Deepest warm black
+export const InkblotColorAccentCitron50 = "#fdfbf3"; // Barely there citron wash
+export const InkblotColorAccentCitron100 = "#faf4df"; // Soft cream tint
+export const InkblotColorAccentCitron200 = "#f3e6b8"; // Warm wheat
+export const InkblotColorAccentCitron300 = "#e8d38a"; // Light honey
+export const InkblotColorAccentCitron400 = "#d9bc58"; // Citrus glow
+export const InkblotColorAccentCitron500 = "#c4a030"; // Citron primary — the brand tone
+export const InkblotColorAccentCitron600 = "#a38427"; // Deep citron, hover state
+export const InkblotColorAccentCitron700 = "#7f671f"; // Rich amber
+export const InkblotColorAccentCitron800 = "#5c4a18"; // Dark citron
+export const InkblotColorAccentCitron900 = "#3d3111"; // Deepest citron
+export const InkblotColorSemanticSuccessLight = "#3d9e50"; // Warm success green
+export const InkblotColorSemanticSuccessMain = "#358c46"; // Primary success
+export const InkblotColorSemanticSuccessDark = "#2a7538"; // Success hover
+export const InkblotColorSemanticWarningLight = "#e0a020"; // Warm amber warning
+export const InkblotColorSemanticWarningMain = "#c48c1a"; // Primary warning — distinct from citron by saturation
+export const InkblotColorSemanticWarningDark = "#a67515"; // Warning hover
+export const InkblotColorSemanticErrorLight = "#d14940"; // Warm red
+export const InkblotColorSemanticErrorMain = "#be3e35"; // Primary error
+export const InkblotColorSemanticErrorDark = "#a3352d"; // Error hover
+export const InkblotColorSemanticInfoLight = "#6ba3c2"; // Muted warm blue
+export const InkblotColorSemanticInfoMain = "#5790ad"; // Primary info — desaturated, warm
+export const InkblotColorSemanticInfoDark = "#497a94"; // Info hover
+export const InkblotDurationInstant = "0ms"; // No animation
+export const InkblotDurationFast = "120ms"; // Micro-interactions, hovers — fast enough to feel physical
+export const InkblotDurationNormal = "200ms"; // Standard transitions
+export const InkblotDurationSlow = "320ms"; // Complex transitions, enter/exit
+export const InkblotDurationSlower = "500ms"; // Page-level transitions, long reveals
+export const InkblotEasingDefault = [0.25, 0.1, 0.25, 1]; // Standard ease — natural deceleration
+export const InkblotEasingIn = [0.32, 0, 0.67, 0]; // Ease in — for exits, things leaving
+export const InkblotEasingOut = [0.33, 1, 0.68, 1]; // Ease out — for entrances, things arriving
+export const InkblotEasingInOut = [0.65, 0, 0.35, 1]; // Ease in-out — for position changes, transforms
+export const InkblotEasingExpressive = [0.22, 1, 0.36, 1]; // Expressive ease-out — smooth, confident arrival. Replaces bounce.
+export const InkblotGridColumnsMobile = "4rem"; // 4-column grid for < 640px
+export const InkblotGridColumnsTablet = "8rem"; // 8-column grid for 640–1023px
+export const InkblotGridColumnsDesktop = "12rem"; // 12-column grid for 1024–1535px
+export const InkblotGridColumnsWide = "16rem"; // 16-column grid for 1536px+
+export const InkblotGridColumnsMax = "24rem"; // 24-column grid for complex dashboards
+export const InkblotGridGutterSm = "0.5rem"; // 8px - compact mobile gutter
+export const InkblotGridGutterMd = "1rem"; // 16px - standard gutter
+export const InkblotGridGutterLg = "1.5rem"; // 24px - spacious desktop gutter
+export const InkblotGridGutterXl = "2rem"; // 32px - wide layout gutter
+export const InkblotGridMarginMobile = "1rem"; // 16px page margin on mobile
+export const InkblotGridMarginTablet = "2rem"; // 32px page margin on tablet
+export const InkblotGridMarginDesktop = "4rem"; // 64px page margin on desktop
+export const InkblotGridMarginWide = "auto"; // Auto-center on wide screens
+export const InkblotGridMaxWidthContent = "768px"; // Max width for readable content
+export const InkblotGridMaxWidthContainer = "1200px"; // Max width for standard layouts
+export const InkblotGridMaxWidthWide = "1440px"; // Max width for wide layouts
+export const InkblotGridMaxWidthFull = "1920px"; // Max width for full-bleed
+export const InkblotRadiusNone = "0"; // No rounding
+export const InkblotRadiusSm = "6px"; // Subtle rounding, chips
+export const InkblotRadiusMd = "10px"; // Inputs, small cards
+export const InkblotRadiusLg = "14px"; // Buttons, interactive elements
+export const InkblotRadiusXl = "18px"; // Cards, modals
+export const InkblotRadius2xl = "24px"; // Large surfaces, hero cards
+export const InkblotRadiusFull = "9999px"; // Pills, avatars, toggles
+export const InkblotBorderWidthNone = "0"; // No border
+export const InkblotBorderWidthThin = "1px"; // Subtle dividers, the default
+export const InkblotBorderWidthMedium = "2px"; // Focus rings
+export const InkblotBorderWidthThick = "3px"; // Strong emphasis, rarely used
+export const InkblotShadowNone = "none"; // No shadow
+export const InkblotShadowXs = "0 1px 2px 0 rgba(29, 28, 25, 0.04)"; // Barely there lift
+export const InkblotShadowSm =
+  "0 2px 8px -1px rgba(29, 28, 25, 0.06), 0 1px 3px -1px rgba(29, 28, 25, 0.04)"; // Cards — soft, warm, diffused
+export const InkblotShadowMd =
+  "0 4px 16px -2px rgba(29, 28, 25, 0.08), 0 2px 6px -2px rgba(29, 28, 25, 0.04)"; // Elevated cards, dropdowns
+export const InkblotShadowLg =
+  "0 8px 24px -4px rgba(29, 28, 25, 0.10), 0 4px 10px -4px rgba(29, 28, 25, 0.04)"; // Modals, popovers
+export const InkblotShadowXl =
+  "0 16px 40px -8px rgba(29, 28, 25, 0.12), 0 8px 16px -8px rgba(29, 28, 25, 0.04)"; // Maximum elevation — ambient, not harsh
+export const InkblotOpacityDisabled = 0.4; // Disabled elements
+export const InkblotOpacityOverlay = 0.45; // Modal backdrops — not too heavy
+export const InkblotOpacitySubtle = 0.6; // Secondary content
+export const InkblotOpacityDefault = 1; // Full opacity
+export const InkblotSpacing0 = "0"; // No spacing
+export const InkblotSpacing1 = "0.25rem"; // 4px
+export const InkblotSpacing2 = "0.5rem"; // 8px
+export const InkblotSpacing3 = "0.75rem"; // 12px
+export const InkblotSpacing4 = "1rem"; // 16px
+export const InkblotSpacing5 = "1.25rem"; // 20px
+export const InkblotSpacing6 = "1.5rem"; // 24px
+export const InkblotSpacing8 = "2rem"; // 32px
+export const InkblotSpacing10 = "2.5rem"; // 40px
+export const InkblotSpacing12 = "3rem"; // 48px
+export const InkblotSpacing16 = "4rem"; // 64px
+export const InkblotSpacing20 = "5rem"; // 80px
+export const InkblotSpacing24 = "6rem"; // 96px
+export const InkblotSpacing32 = "8rem"; // 128px
+export const InkblotSizeIconXs = "1rem"; // 16px icon
+export const InkblotSizeIconSm = "1.25rem"; // 20px icon
+export const InkblotSizeIconMd = "1.5rem"; // 24px icon
+export const InkblotSizeIconLg = "2rem"; // 32px icon
+export const InkblotSizeIconXl = "2.5rem"; // 40px icon
+export const InkblotSizeTouchTargetMin = "44px"; // Minimum touch target (WCAG)
+export const InkblotSizeTouchTargetComfortable = "48px"; // Comfortable touch target
+export const InkblotTypographyFontFamilySans =
+  "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"; // Primary UI font — humanist, modern, highly legible
+export const InkblotTypographyFontFamilyMono =
+  "'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace"; // Code and data
+export const InkblotTypographyFontFamilyDisplay =
+  "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"; // Headlines — same family, optical size variant
+export const InkblotTypographyFontSizeXs = "0.75rem"; // 12px — captions, meta
+export const InkblotTypographyFontSizeSm = "0.8125rem"; // 13px — secondary text
+export const InkblotTypographyFontSizeBase = "0.9375rem"; // 15px — body text, slightly refined from 16
+export const InkblotTypographyFontSizeMd = "1.0625rem"; // 17px — emphasized body
+export const InkblotTypographyFontSizeLg = "1.25rem"; // 20px — card titles, subheadings
+export const InkblotTypographyFontSizeXl = "1.5rem"; // 24px — section titles
+export const InkblotTypographyFontSize2xl = "1.75rem"; // 28px — page titles
+export const InkblotTypographyFontSize3xl = "2.125rem"; // 34px — hero — composed, not shouting
+export const InkblotTypographyFontSize4xl = "2.75rem"; // 44px — display, rarely used
+export const InkblotTypographyFontSize5xl = "3.25rem"; // 52px — maximum display
+export const InkblotTypographyFontWeightRegular = "400"; // Body text
+export const InkblotTypographyFontWeightMedium = "500"; // Emphasis, labels, card titles
+export const InkblotTypographyFontWeightSemibold = "600"; // Headings, buttons
+export const InkblotTypographyFontWeightBold = "700"; // Strong emphasis, sparingly
+export const InkblotTypographyLineHeightTight = 1.2; // Headlines
+export const InkblotTypographyLineHeightSnug = 1.375; // Subheadings
+export const InkblotTypographyLineHeightNormal = 1.5; // Body text
+export const InkblotTypographyLineHeightRelaxed = 1.65; // Long-form, generous breathing room
+export const InkblotTypographyLineHeightLoose = 1.8; // Very spacious
+export const InkblotTypographyLetterSpacingTighter = "-0.04em"; // Large headlines
+export const InkblotTypographyLetterSpacingTight = "-0.02em"; // Headings
+export const InkblotTypographyLetterSpacingNormal = "0"; // Body
+export const InkblotTypographyLetterSpacingWide = "0.02em"; // Labels
+export const InkblotTypographyLetterSpacingWider = "0.06em"; // Uppercase meta
+export const InkblotZIndexHide = -1; // Hidden below base layer
+export const InkblotZIndexBase = 0; // Default document flow
+export const InkblotZIndexRaised = 1; // Slightly above base (cards on hover)
+export const InkblotZIndexDropdown = 10; // Dropdowns, select menus
+export const InkblotZIndexSticky = 20; // Sticky headers, nav bars
+export const InkblotZIndexOverlay = 30; // Backdrop overlays
+export const InkblotZIndexModal = 40; // Modals, dialogs, sheets
+export const InkblotZIndexPopover = 50; // Popovers, tooltips
+export const InkblotZIndexToast = 60; // Toast notifications
+export const InkblotZIndexMax = 9999; // Emergency override (avoid)
+export const InkblotDarkColorBackgroundPrimary = "#12110e"; // Deep warm black, not pure black
+export const InkblotDarkColorBackgroundSecondary = "#1d1c18"; // Elevated warm surface
+export const InkblotDarkColorBackgroundTertiary = "#2a2924"; // Grouped content, inset
+export const InkblotDarkColorBackgroundInverse = "#fafaf7"; // Inverted to warm off-white
+export const InkblotDarkColorTextPrimary = "#f5f4f0"; // Warm off-white text
+export const InkblotDarkColorTextSecondary = "#93928a"; // Warm muted text
+export const InkblotDarkColorTextTertiary = "#6b6a63"; // Placeholder, hints
+export const InkblotDarkColorTextInverse = "#1d1c19"; // Dark text on light
+export const InkblotDarkColorTextLink = "#d9bc58"; // Citron 400 — bright enough for dark bg
+export const InkblotDarkColorTextLinkHover = "#e8d38a"; // Citron 300 — lighter on hover
+export const InkblotDarkColorBorderDefault = "#38372f"; // Warm subtle border
+export const InkblotDarkColorBorderStrong = "#4d4c44"; // Emphasized warm border
+export const InkblotDarkColorBorderFocus = "#d9bc58"; // Focus ring — bright citron
+export const InkblotDarkColorInteractivePrimary = "#d9bc58"; // Citron 400 — lighter for dark mode contrast
+export const InkblotDarkColorInteractivePrimaryHover = "#e8d38a"; // Citron 300 — warm glow on hover
+export const InkblotDarkColorInteractivePrimaryActive = "#c4a030"; // Citron 500 — anchor on press
+export const InkblotDarkColorInteractiveSecondary = "#2a2924"; // Warm dark secondary
+export const InkblotDarkColorInteractiveSecondaryHover = "#38372f"; // Warm dark hover
+export const InkblotDarkColorStatusSuccess = "#4cb864"; // Bright warm green on dark
+export const InkblotDarkColorStatusWarning = "#e0a020"; // Warm amber on dark
+export const InkblotDarkColorStatusError = "#e05a52"; // Warm red on dark
+export const InkblotDarkColorStatusInfo = "#7ab8d6"; // Soft warm blue on dark
+export const InkblotSemanticColorBackgroundPrimary = "#fafaf7"; // Body background — warm off-white with barely perceptible beige
+export const InkblotSemanticColorBackgroundSecondary = "#ffffff"; // Elevated surfaces — clean white floating above base
+export const InkblotSemanticColorBackgroundTertiary = "#f5f4f0"; // Grouped content, inset areas
+export const InkblotSemanticColorBackgroundInverse = "#1d1c19"; // Inverted surfaces
+export const InkblotSemanticColorTextPrimary = "#1d1c19"; // Primary text — deep warm slate, never pure black
+export const InkblotSemanticColorTextSecondary = "#6b6a63"; // Secondary text
+export const InkblotSemanticColorTextTertiary = "#93928a"; // Placeholder, hints, captions
+export const InkblotSemanticColorTextInverse = "#ffffff"; // Text on dark surfaces
+export const InkblotSemanticColorTextLink = "#a38427"; // Links — deep citron for readability
+export const InkblotSemanticColorTextLinkHover = "#7f671f"; // Link hover
+export const InkblotSemanticColorBorderDefault = "#eae9e3"; // Subtle warm dividers
+export const InkblotSemanticColorBorderStrong = "#d4d3cb"; // Emphasized borders
+export const InkblotSemanticColorBorderFocus = "#c4a030"; // Focus ring — citron accent
+export const InkblotSemanticColorInteractivePrimary = "#c4a030"; // Primary CTA — confident citron
+export const InkblotSemanticColorInteractivePrimaryHover = "#a38427"; // Primary hover — deeper, subtle shift
+export const InkblotSemanticColorInteractivePrimaryActive = "#7f671f"; // Primary pressed
+export const InkblotSemanticColorInteractiveSecondary = "#f5f4f0"; // Secondary surfaces with subtle depth
+export const InkblotSemanticColorInteractiveSecondaryHover = "#eae9e3"; // Secondary hover
+export const InkblotSemanticColorStatusSuccess = "#358c46"; // Success state
+export const InkblotSemanticColorStatusWarning = "#c48c1a"; // Warning state
+export const InkblotSemanticColorStatusError = "#be3e35"; // Error state
+export const InkblotSemanticColorStatusInfo = "#5790ad"; // Info state
+export const InkblotSemanticTypographyHeading1 = {
+  fontFamily:
+    "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  fontSize: "2.125rem",
+  fontWeight: "600",
+  lineHeight: 1.2,
+  letterSpacing: "-0.02em",
+}; // Page title — composed, not dramatic
+export const InkblotSemanticTypographyHeading2 = {
+  fontFamily:
+    "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  fontSize: "1.75rem",
+  fontWeight: "600",
+  lineHeight: 1.2,
+  letterSpacing: "-0.02em",
+}; // Section title
+export const InkblotSemanticTypographyHeading3 = {
+  fontFamily:
+    "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  fontSize: "1.5rem",
+  fontWeight: "500",
+  lineHeight: 1.375,
+  letterSpacing: "0",
+}; // Subsection title
+export const InkblotSemanticTypographyHeading4 = {
+  fontFamily:
+    "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  fontSize: "1.25rem",
+  fontWeight: "500",
+  lineHeight: 1.375,
+  letterSpacing: "0",
+}; // Card title
+export const InkblotSemanticTypographyBodyDefault = {
+  fontFamily:
+    "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  fontSize: "0.9375rem",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  letterSpacing: "0",
+}; // Body text
+export const InkblotSemanticTypographyBodySmall = {
+  fontFamily:
+    "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  fontSize: "0.8125rem",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  letterSpacing: "0",
+}; // Small body, captions
+export const InkblotSemanticTypographyBodyLarge = {
+  fontFamily:
+    "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  fontSize: "1.0625rem",
+  fontWeight: "400",
+  lineHeight: 1.65,
+  letterSpacing: "0",
+}; // Emphasized body
+export const InkblotSemanticTypographyLabelDefault = {
+  fontFamily:
+    "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  fontSize: "0.75rem",
+  fontWeight: "500",
+  lineHeight: 1.5,
+  letterSpacing: "0.02em",
+}; // Form labels, badges

package/dist/js/inkblot-tokens.json

@@ -0,0 +1,199 @@
+{
+  "InkblotBreakpointSm": "640px",
+  "InkblotBreakpointMd": "768px",
+  "InkblotBreakpointLg": "1024px",
+  "InkblotBreakpointXl": "1280px",
+  "InkblotBreakpoint2xl": "1536px",
+  "InkblotColorNeutralWhite": "#ffffff",
+  "InkblotColorNeutralGray50": "#fafaf7",
+  "InkblotColorNeutralGray100": "#f5f4f0",
+  "InkblotColorNeutralGray200": "#eae9e3",
+  "InkblotColorNeutralGray300": "#d4d3cb",
+  "InkblotColorNeutralGray400": "#93928a",
+  "InkblotColorNeutralGray500": "#6b6a63",
+  "InkblotColorNeutralGray600": "#4d4c47",
+  "InkblotColorNeutralGray700": "#3a3935",
+  "InkblotColorNeutralGray800": "#2d2c28",
+  "InkblotColorNeutralGray900": "#1d1c19",
+  "InkblotColorNeutralGray950": "#0f0e0c",
+  "InkblotColorAccentCitron50": "#fdfbf3",
+  "InkblotColorAccentCitron100": "#faf4df",
+  "InkblotColorAccentCitron200": "#f3e6b8",
+  "InkblotColorAccentCitron300": "#e8d38a",
+  "InkblotColorAccentCitron400": "#d9bc58",
+  "InkblotColorAccentCitron500": "#c4a030",
+  "InkblotColorAccentCitron600": "#a38427",
+  "InkblotColorAccentCitron700": "#7f671f",
+  "InkblotColorAccentCitron800": "#5c4a18",
+  "InkblotColorAccentCitron900": "#3d3111",
+  "InkblotColorSemanticSuccessLight": "#3d9e50",
+  "InkblotColorSemanticSuccessMain": "#358c46",
+  "InkblotColorSemanticSuccessDark": "#2a7538",
+  "InkblotColorSemanticWarningLight": "#e0a020",
+  "InkblotColorSemanticWarningMain": "#c48c1a",
+  "InkblotColorSemanticWarningDark": "#a67515",
+  "InkblotColorSemanticErrorLight": "#d14940",
+  "InkblotColorSemanticErrorMain": "#be3e35",
+  "InkblotColorSemanticErrorDark": "#a3352d",
+  "InkblotColorSemanticInfoLight": "#6ba3c2",
+  "InkblotColorSemanticInfoMain": "#5790ad",
+  "InkblotColorSemanticInfoDark": "#497a94",
+  "InkblotDurationInstant": "0ms",
+  "InkblotDurationFast": "120ms",
+  "InkblotDurationNormal": "200ms",
+  "InkblotDurationSlow": "320ms",
+  "InkblotDurationSlower": "500ms",
+  "InkblotEasingDefault": [0.25,0.1,0.25,1],
+  "InkblotEasingIn": [0.32,0,0.67,0],
+  "InkblotEasingOut": [0.33,1,0.68,1],
+  "InkblotEasingInOut": [0.65,0,0.35,1],
+  "InkblotEasingExpressive": [0.22,1,0.36,1],
+  "InkblotGridColumnsMobile": "4rem",
+  "InkblotGridColumnsTablet": "8rem",
+  "InkblotGridColumnsDesktop": "12rem",
+  "InkblotGridColumnsWide": "16rem",
+  "InkblotGridColumnsMax": "24rem",
+  "InkblotGridGutterSm": "0.5rem",
+  "InkblotGridGutterMd": "1rem",
+  "InkblotGridGutterLg": "1.5rem",
+  "InkblotGridGutterXl": "2rem",
+  "InkblotGridMarginMobile": "1rem",
+  "InkblotGridMarginTablet": "2rem",
+  "InkblotGridMarginDesktop": "4rem",
+  "InkblotGridMarginWide": "auto",
+  "InkblotGridMaxWidthContent": "768px",
+  "InkblotGridMaxWidthContainer": "1200px",
+  "InkblotGridMaxWidthWide": "1440px",
+  "InkblotGridMaxWidthFull": "1920px",
+  "InkblotRadiusNone": "0",
+  "InkblotRadiusSm": "6px",
+  "InkblotRadiusMd": "10px",
+  "InkblotRadiusLg": "14px",
+  "InkblotRadiusXl": "18px",
+  "InkblotRadius2xl": "24px",
+  "InkblotRadiusFull": "9999px",
+  "InkblotBorderWidthNone": "0",
+  "InkblotBorderWidthThin": "1px",
+  "InkblotBorderWidthMedium": "2px",
+  "InkblotBorderWidthThick": "3px",
+  "InkblotShadowNone": "none",
+  "InkblotShadowXs": "0 1px 2px 0 rgba(29, 28, 25, 0.04)",
+  "InkblotShadowSm": "0 2px 8px -1px rgba(29, 28, 25, 0.06), 0 1px 3px -1px rgba(29, 28, 25, 0.04)",
+  "InkblotShadowMd": "0 4px 16px -2px rgba(29, 28, 25, 0.08), 0 2px 6px -2px rgba(29, 28, 25, 0.04)",
+  "InkblotShadowLg": "0 8px 24px -4px rgba(29, 28, 25, 0.10), 0 4px 10px -4px rgba(29, 28, 25, 0.04)",
+  "InkblotShadowXl": "0 16px 40px -8px rgba(29, 28, 25, 0.12), 0 8px 16px -8px rgba(29, 28, 25, 0.04)",
+  "InkblotOpacityDisabled": 0.4,
+  "InkblotOpacityOverlay": 0.45,
+  "InkblotOpacitySubtle": 0.6,
+  "InkblotOpacityDefault": 1,
+  "InkblotSpacing0": "0",
+  "InkblotSpacing1": "0.25rem",
+  "InkblotSpacing2": "0.5rem",
+  "InkblotSpacing3": "0.75rem",
+  "InkblotSpacing4": "1rem",
+  "InkblotSpacing5": "1.25rem",
+  "InkblotSpacing6": "1.5rem",
+  "InkblotSpacing8": "2rem",
+  "InkblotSpacing10": "2.5rem",
+  "InkblotSpacing12": "3rem",
+  "InkblotSpacing16": "4rem",
+  "InkblotSpacing20": "5rem",
+  "InkblotSpacing24": "6rem",
+  "InkblotSpacing32": "8rem",
+  "InkblotSizeIconXs": "1rem",
+  "InkblotSizeIconSm": "1.25rem",
+  "InkblotSizeIconMd": "1.5rem",
+  "InkblotSizeIconLg": "2rem",
+  "InkblotSizeIconXl": "2.5rem",
+  "InkblotSizeTouchTargetMin": "44px",
+  "InkblotSizeTouchTargetComfortable": "48px",
+  "InkblotTypographyFontFamilySans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  "InkblotTypographyFontFamilyMono": "'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace",
+  "InkblotTypographyFontFamilyDisplay": "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  "InkblotTypographyFontSizeXs": "0.75rem",
+  "InkblotTypographyFontSizeSm": "0.8125rem",
+  "InkblotTypographyFontSizeBase": "0.9375rem",
+  "InkblotTypographyFontSizeMd": "1.0625rem",
+  "InkblotTypographyFontSizeLg": "1.25rem",
+  "InkblotTypographyFontSizeXl": "1.5rem",
+  "InkblotTypographyFontSize2xl": "1.75rem",
+  "InkblotTypographyFontSize3xl": "2.125rem",
+  "InkblotTypographyFontSize4xl": "2.75rem",
+  "InkblotTypographyFontSize5xl": "3.25rem",
+  "InkblotTypographyFontWeightRegular": "400",
+  "InkblotTypographyFontWeightMedium": "500",
+  "InkblotTypographyFontWeightSemibold": "600",
+  "InkblotTypographyFontWeightBold": "700",
+  "InkblotTypographyLineHeightTight": 1.2,
+  "InkblotTypographyLineHeightSnug": 1.375,
+  "InkblotTypographyLineHeightNormal": 1.5,
+  "InkblotTypographyLineHeightRelaxed": 1.65,
+  "InkblotTypographyLineHeightLoose": 1.8,
+  "InkblotTypographyLetterSpacingTighter": "-0.04em",
+  "InkblotTypographyLetterSpacingTight": "-0.02em",
+  "InkblotTypographyLetterSpacingNormal": "0",
+  "InkblotTypographyLetterSpacingWide": "0.02em",
+  "InkblotTypographyLetterSpacingWider": "0.06em",
+  "InkblotZIndexHide": -1,
+  "InkblotZIndexBase": 0,
+  "InkblotZIndexRaised": 1,
+  "InkblotZIndexDropdown": 10,
+  "InkblotZIndexSticky": 20,
+  "InkblotZIndexOverlay": 30,
+  "InkblotZIndexModal": 40,
+  "InkblotZIndexPopover": 50,
+  "InkblotZIndexToast": 60,
+  "InkblotZIndexMax": 9999,
+  "InkblotDarkColorBackgroundPrimary": "#12110e",
+  "InkblotDarkColorBackgroundSecondary": "#1d1c18",
+  "InkblotDarkColorBackgroundTertiary": "#2a2924",
+  "InkblotDarkColorBackgroundInverse": "#fafaf7",
+  "InkblotDarkColorTextPrimary": "#f5f4f0",
+  "InkblotDarkColorTextSecondary": "#93928a",
+  "InkblotDarkColorTextTertiary": "#6b6a63",
+  "InkblotDarkColorTextInverse": "#1d1c19",
+  "InkblotDarkColorTextLink": "#d9bc58",
+  "InkblotDarkColorTextLinkHover": "#e8d38a",
+  "InkblotDarkColorBorderDefault": "#38372f",
+  "InkblotDarkColorBorderStrong": "#4d4c44",
+  "InkblotDarkColorBorderFocus": "#d9bc58",
+  "InkblotDarkColorInteractivePrimary": "#d9bc58",
+  "InkblotDarkColorInteractivePrimaryHover": "#e8d38a",
+  "InkblotDarkColorInteractivePrimaryActive": "#c4a030",
+  "InkblotDarkColorInteractiveSecondary": "#2a2924",
+  "InkblotDarkColorInteractiveSecondaryHover": "#38372f",
+  "InkblotDarkColorStatusSuccess": "#4cb864",
+  "InkblotDarkColorStatusWarning": "#e0a020",
+  "InkblotDarkColorStatusError": "#e05a52",
+  "InkblotDarkColorStatusInfo": "#7ab8d6",
+  "InkblotSemanticColorBackgroundPrimary": "#fafaf7",
+  "InkblotSemanticColorBackgroundSecondary": "#ffffff",
+  "InkblotSemanticColorBackgroundTertiary": "#f5f4f0",
+  "InkblotSemanticColorBackgroundInverse": "#1d1c19",
+  "InkblotSemanticColorTextPrimary": "#1d1c19",
+  "InkblotSemanticColorTextSecondary": "#6b6a63",
+  "InkblotSemanticColorTextTertiary": "#93928a",
+  "InkblotSemanticColorTextInverse": "#ffffff",
+  "InkblotSemanticColorTextLink": "#a38427",
+  "InkblotSemanticColorTextLinkHover": "#7f671f",
+  "InkblotSemanticColorBorderDefault": "#eae9e3",
+  "InkblotSemanticColorBorderStrong": "#d4d3cb",
+  "InkblotSemanticColorBorderFocus": "#c4a030",
+  "InkblotSemanticColorInteractivePrimary": "#c4a030",
+  "InkblotSemanticColorInteractivePrimaryHover": "#a38427",
+  "InkblotSemanticColorInteractivePrimaryActive": "#7f671f",
+  "InkblotSemanticColorInteractiveSecondary": "#f5f4f0",
+  "InkblotSemanticColorInteractiveSecondaryHover": "#eae9e3",
+  "InkblotSemanticColorStatusSuccess": "#358c46",
+  "InkblotSemanticColorStatusWarning": "#c48c1a",
+  "InkblotSemanticColorStatusError": "#be3e35",
+  "InkblotSemanticColorStatusInfo": "#5790ad",
+  "InkblotSemanticTypographyHeading1": {"fontFamily":"'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"2.125rem","fontWeight":"600","lineHeight":1.2,"letterSpacing":"-0.02em"},
+  "InkblotSemanticTypographyHeading2": {"fontFamily":"'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.75rem","fontWeight":"600","lineHeight":1.2,"letterSpacing":"-0.02em"},
+  "InkblotSemanticTypographyHeading3": {"fontFamily":"'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.5rem","fontWeight":"500","lineHeight":1.375,"letterSpacing":"0"},
+  "InkblotSemanticTypographyHeading4": {"fontFamily":"'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.25rem","fontWeight":"500","lineHeight":1.375,"letterSpacing":"0"},
+  "InkblotSemanticTypographyBodyDefault": {"fontFamily":"'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"0.9375rem","fontWeight":"400","lineHeight":1.5,"letterSpacing":"0"},
+  "InkblotSemanticTypographyBodySmall": {"fontFamily":"'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"0.8125rem","fontWeight":"400","lineHeight":1.5,"letterSpacing":"0"},
+  "InkblotSemanticTypographyBodyLarge": {"fontFamily":"'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.0625rem","fontWeight":"400","lineHeight":1.65,"letterSpacing":"0"},
+  "InkblotSemanticTypographyLabelDefault": {"fontFamily":"'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"0.75rem","fontWeight":"500","lineHeight":1.5,"letterSpacing":"0.02em"}
+}