@brycks/core-front 0.1.0

package/dist/tokens.js

@@ -0,0 +1,627 @@
+import { a as H, c as k, e as L, i as W, n as M, p as O, s as X, w as G } from "./colors-B_8a3coi.js";
+const e = 4, t = {
+  /** 0px */
+  0: 0,
+  /** 1px - hairline */
+  px: 1,
+  /** 2px - micro */
+  0.5: e * 0.5,
+  /** 4px - tiny */
+  1: e,
+  /** 6px */
+  1.5: e * 1.5,
+  /** 8px - extra small */
+  2: e * 2,
+  /** 10px */
+  2.5: e * 2.5,
+  /** 12px - small */
+  3: e * 3,
+  /** 14px */
+  3.5: e * 3.5,
+  /** 16px - medium (base) */
+  4: e * 4,
+  /** 20px */
+  5: e * 5,
+  /** 24px - large */
+  6: e * 6,
+  /** 28px */
+  7: e * 7,
+  /** 32px - extra large */
+  8: e * 8,
+  /** 36px */
+  9: e * 9,
+  /** 40px */
+  10: e * 10,
+  /** 44px */
+  11: e * 11,
+  /** 48px - 2x large */
+  12: e * 12,
+  /** 56px */
+  14: e * 14,
+  /** 64px - 3x large */
+  16: e * 16,
+  /** 80px */
+  20: e * 20,
+  /** 96px - 4x large */
+  24: e * 24,
+  /** 112px */
+  28: e * 28,
+  /** 128px */
+  32: e * 32,
+  /** 160px */
+  40: e * 40,
+  /** 192px */
+  48: e * 48,
+  /** 224px */
+  56: e * 56,
+  /** 256px */
+  64: e * 64,
+  /** 320px */
+  80: e * 80,
+  /** 384px */
+  96: e * 96
+}, x = {
+  /** Component internal padding - tight */
+  componentPaddingXs: t[2],
+  /** Component internal padding - default */
+  componentPaddingSm: t[3],
+  /** Component internal padding - comfortable */
+  componentPaddingMd: t[4],
+  /** Component internal padding - spacious */
+  componentPaddingLg: t[6],
+  /** Gap between inline elements */
+  inlineGapXs: t[1],
+  inlineGapSm: t[2],
+  inlineGapMd: t[3],
+  inlineGapLg: t[4],
+  /** Gap between stacked elements */
+  stackGapXs: t[2],
+  stackGapSm: t[3],
+  stackGapMd: t[4],
+  stackGapLg: t[6],
+  stackGapXl: t[8],
+  /** Page/section margins */
+  sectionGapSm: t[8],
+  sectionGapMd: t[12],
+  sectionGapLg: t[16],
+  sectionGapXl: t[24],
+  /** Container padding */
+  containerPaddingSm: t[4],
+  containerPaddingMd: t[6],
+  containerPaddingLg: t[8]
+}, a = {
+  /** Primary font - clean, modern sans-serif */
+  sans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  /** Monospace for code */
+  mono: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  /** Display font for large headings (optional) */
+  display: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
+}, o = {
+  /** 400 - Regular body text */
+  regular: 400,
+  /** 500 - Medium emphasis */
+  medium: 500,
+  /** 600 - Semi-bold for subheadings */
+  semibold: 600,
+  /** 700 - Bold for headings */
+  bold: 700
+}, i = {
+  /** 11px - Micro text, labels */
+  xs: 11,
+  /** 12px - Small text, captions */
+  sm: 12,
+  /** 14px - Body small, secondary text */
+  base: 14,
+  /** 16px - Body default */
+  md: 16,
+  /** 18px - Body large, lead text */
+  lg: 18,
+  /** 20px - Heading 6 */
+  xl: 20,
+  /** 24px - Heading 5 */
+  "2xl": 24,
+  /** 28px - Heading 4 */
+  "3xl": 28,
+  /** 32px - Heading 3 */
+  "4xl": 32,
+  /** 40px - Heading 2 */
+  "5xl": 40,
+  /** 48px - Heading 1 */
+  "6xl": 48,
+  /** 60px - Display small */
+  "7xl": 60,
+  /** 72px - Display medium */
+  "8xl": 72,
+  /** 96px - Display large */
+  "9xl": 96
+}, n = {
+  /** Tight - for large headings */
+  none: 1,
+  tight: 1.15,
+  /** Snug - for medium headings */
+  snug: 1.25,
+  /** Normal - for body text */
+  normal: 1.5,
+  /** Relaxed - for small text, better readability */
+  relaxed: 1.625,
+  /** Loose - for captions, labels */
+  loose: 1.75
+}, s = {
+  /** Tighter - for large display text */
+  tighter: "-0.05em",
+  /** Tight - for headings */
+  tight: "-0.025em",
+  /** Normal - default */
+  normal: "0em",
+  /** Wide - for small caps, labels */
+  wide: "0.025em",
+  /** Wider - for all caps text */
+  wider: "0.05em",
+  /** Widest - for very small text */
+  widest: "0.1em"
+}, c = {
+  /** Display styles - for hero sections */
+  displayLarge: {
+    fontFamily: a.display,
+    fontSize: i["9xl"],
+    fontWeight: o.bold,
+    lineHeight: n.none,
+    letterSpacing: s.tighter
+  },
+  displayMedium: {
+    fontFamily: a.display,
+    fontSize: i["8xl"],
+    fontWeight: o.bold,
+    lineHeight: n.none,
+    letterSpacing: s.tighter
+  },
+  displaySmall: {
+    fontFamily: a.display,
+    fontSize: i["7xl"],
+    fontWeight: o.bold,
+    lineHeight: n.tight,
+    letterSpacing: s.tight
+  },
+  /** Heading styles */
+  h1: {
+    fontFamily: a.sans,
+    fontSize: i["6xl"],
+    fontWeight: o.bold,
+    lineHeight: n.tight,
+    letterSpacing: s.tight
+  },
+  h2: {
+    fontFamily: a.sans,
+    fontSize: i["5xl"],
+    fontWeight: o.bold,
+    lineHeight: n.tight,
+    letterSpacing: s.tight
+  },
+  h3: {
+    fontFamily: a.sans,
+    fontSize: i["4xl"],
+    fontWeight: o.semibold,
+    lineHeight: n.snug,
+    letterSpacing: s.tight
+  },
+  h4: {
+    fontFamily: a.sans,
+    fontSize: i["3xl"],
+    fontWeight: o.semibold,
+    lineHeight: n.snug,
+    letterSpacing: s.normal
+  },
+  h5: {
+    fontFamily: a.sans,
+    fontSize: i["2xl"],
+    fontWeight: o.semibold,
+    lineHeight: n.snug,
+    letterSpacing: s.normal
+  },
+  h6: {
+    fontFamily: a.sans,
+    fontSize: i.xl,
+    fontWeight: o.semibold,
+    lineHeight: n.snug,
+    letterSpacing: s.normal
+  },
+  /** Body text styles */
+  bodyLarge: {
+    fontFamily: a.sans,
+    fontSize: i.lg,
+    fontWeight: o.regular,
+    lineHeight: n.normal,
+    letterSpacing: s.normal
+  },
+  bodyDefault: {
+    fontFamily: a.sans,
+    fontSize: i.md,
+    fontWeight: o.regular,
+    lineHeight: n.normal,
+    letterSpacing: s.normal
+  },
+  bodySmall: {
+    fontFamily: a.sans,
+    fontSize: i.base,
+    fontWeight: o.regular,
+    lineHeight: n.normal,
+    letterSpacing: s.normal
+  },
+  /** Utility text styles */
+  label: {
+    fontFamily: a.sans,
+    fontSize: i.sm,
+    fontWeight: o.medium,
+    lineHeight: n.normal,
+    letterSpacing: s.wide
+  },
+  caption: {
+    fontFamily: a.sans,
+    fontSize: i.xs,
+    fontWeight: o.regular,
+    lineHeight: n.relaxed,
+    letterSpacing: s.wide
+  },
+  overline: {
+    fontFamily: a.sans,
+    fontSize: i.xs,
+    fontWeight: o.semibold,
+    lineHeight: n.normal,
+    letterSpacing: s.widest,
+    textTransform: "uppercase"
+  },
+  /** Code styles */
+  code: {
+    fontFamily: a.mono,
+    fontSize: i.sm,
+    fontWeight: o.regular,
+    lineHeight: n.relaxed,
+    letterSpacing: s.normal
+  }
+}, g = {
+  /** No shadow */
+  none: "none",
+  /** Extra small - subtle lift, perfect for cards on hover */
+  xs: "0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 3px 0 rgba(0, 0, 0, 0.06)",
+  /** Small - light elevation for cards, inputs */
+  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 2px 6px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.04)",
+  /** Medium - default card shadow */
+  md: "0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 4px 8px -1px rgba(0, 0, 0, 0.06), 0 8px 16px -2px rgba(0, 0, 0, 0.06)",
+  /** Large - dropdown, popover shadows */
+  lg: "0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 16px 32px -8px rgba(0, 0, 0, 0.08)",
+  /** Extra large - modal shadows */
+  xl: "0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 16px 32px -8px rgba(0, 0, 0, 0.08), 0 32px 64px -16px rgba(0, 0, 0, 0.12)",
+  /** 2XL - floating panels, notifications */
+  "2xl": "0 12px 24px -6px rgba(0, 0, 0, 0.05), 0 24px 48px -12px rgba(0, 0, 0, 0.1), 0 48px 96px -24px rgba(0, 0, 0, 0.15)",
+  /** Inner shadow - for inset effects */
+  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)",
+  /** Inner shadow - stronger, for pressed states */
+  innerStrong: "inset 0 2px 6px 0 rgba(0, 0, 0, 0.1)"
+}, d = {
+  /** Default focus ring - primary color */
+  default: "0 0 0 3px rgba(85, 120, 244, 0.35)",
+  /** Strong focus ring - higher visibility */
+  strong: "0 0 0 4px rgba(85, 120, 244, 0.45)",
+  /** Error focus ring */
+  error: "0 0 0 3px rgba(239, 68, 68, 0.35)",
+  /** Success focus ring */
+  success: "0 0 0 3px rgba(16, 185, 129, 0.35)",
+  /** Focus within container */
+  within: "0 0 0 2px rgba(85, 120, 244, 0.2)"
+}, f = {
+  /** Subtle primary glow */
+  primary: "0 0 20px rgba(85, 120, 244, 0.15), 0 0 40px rgba(85, 120, 244, 0.1)",
+  /** Subtle accent glow */
+  accent: "0 0 20px rgba(248, 101, 69, 0.15), 0 0 40px rgba(248, 101, 69, 0.1)",
+  /** Success glow */
+  success: "0 0 20px rgba(16, 185, 129, 0.15), 0 0 40px rgba(16, 185, 129, 0.1)",
+  /** Soft white glow - for dark mode highlights */
+  white: "0 0 30px rgba(255, 255, 255, 0.1)"
+}, h = {
+  /** No radius - sharp corners */
+  none: 0,
+  /** 2px - very subtle rounding */
+  xs: 2,
+  /** 4px - subtle rounding */
+  sm: 4,
+  /** 6px - slight rounding */
+  md: 6,
+  /** 8px - default rounding */
+  DEFAULT: 8,
+  /** 10px - medium rounding */
+  lg: 10,
+  /** 12px - noticeable rounding */
+  xl: 12,
+  /** 16px - prominent rounding */
+  "2xl": 16,
+  /** 20px - heavy rounding */
+  "3xl": 20,
+  /** 24px - very heavy rounding */
+  "4xl": 24,
+  /** 9999px - full/pill shape */
+  full: 9999
+}, p = {
+  /** No border */
+  0: 0,
+  /** 1px - hairline border */
+  DEFAULT: 1,
+  /** 2px - medium border */
+  2: 2,
+  /** 3px - thick border */
+  3: 3,
+  /** 4px - heavy border */
+  4: 4
+}, b = {
+  /** Subtle divider */
+  subtle: {
+    width: p.DEFAULT,
+    style: "solid",
+    color: "rgba(0, 0, 0, 0.06)"
+  },
+  /** Default border */
+  default: {
+    width: p.DEFAULT,
+    style: "solid",
+    color: "rgba(0, 0, 0, 0.1)"
+  },
+  /** Strong border - more visible */
+  strong: {
+    width: p.DEFAULT,
+    style: "solid",
+    color: "rgba(0, 0, 0, 0.15)"
+  },
+  /** Focus border */
+  focus: {
+    width: p[2],
+    style: "solid",
+    color: "rgba(85, 120, 244, 0.5)"
+  },
+  /** Error border */
+  error: {
+    width: p.DEFAULT,
+    style: "solid",
+    color: "rgba(239, 68, 68, 0.5)"
+  },
+  /** Success border */
+  success: {
+    width: p.DEFAULT,
+    style: "solid",
+    color: "rgba(16, 185, 129, 0.5)"
+  }
+}, r = {
+  /** Mobile portrait - 320px+ */
+  xs: 320,
+  /** Mobile landscape - 480px+ */
+  sm: 480,
+  /** Tablet portrait - 640px+ */
+  md: 640,
+  /** Tablet landscape - 768px+ */
+  lg: 768,
+  /** Desktop - 1024px+ */
+  xl: 1024,
+  /** Large desktop - 1280px+ */
+  "2xl": 1280,
+  /** Extra large screens - 1536px+ */
+  "3xl": 1536,
+  /** Ultra wide - 1920px+ */
+  "4xl": 1920
+}, u = {
+  xs: `@media (min-width: ${r.xs}px)`,
+  sm: `@media (min-width: ${r.sm}px)`,
+  md: `@media (min-width: ${r.md}px)`,
+  lg: `@media (min-width: ${r.lg}px)`,
+  xl: `@media (min-width: ${r.xl}px)`,
+  "2xl": `@media (min-width: ${r["2xl"]}px)`,
+  "3xl": `@media (min-width: ${r["3xl"]}px)`,
+  "4xl": `@media (min-width: ${r["4xl"]}px)`,
+  /** Max-width queries (mobile-first overrides) */
+  maxXs: `@media (max-width: ${r.xs - 1}px)`,
+  maxSm: `@media (max-width: ${r.sm - 1}px)`,
+  maxMd: `@media (max-width: ${r.md - 1}px)`,
+  maxLg: `@media (max-width: ${r.lg - 1}px)`,
+  maxXl: `@media (max-width: ${r.xl - 1}px)`,
+  max2xl: `@media (max-width: ${r["2xl"] - 1}px)`,
+  /** Preference queries */
+  prefersReducedMotion: "@media (prefers-reduced-motion: reduce)",
+  prefersDark: "@media (prefers-color-scheme: dark)",
+  prefersLight: "@media (prefers-color-scheme: light)",
+  prefersHighContrast: "@media (prefers-contrast: high)",
+  /** Device specific */
+  hover: "@media (hover: hover)",
+  touch: "@media (hover: none) and (pointer: coarse)",
+  fine: "@media (pointer: fine)"
+}, y = {
+  xs: 320,
+  sm: 480,
+  md: 640,
+  lg: 768,
+  xl: 1024,
+  "2xl": 1280,
+  "3xl": 1440,
+  full: "100%"
+}, S = {
+  /** Hidden - below everything */
+  hide: -1,
+  /** Auto - default stacking */
+  auto: "auto",
+  /** Base - normal content */
+  base: 0,
+  /** Docked - sticky elements */
+  docked: 10,
+  /** Dropdown - menus, selects */
+  dropdown: 1e3,
+  /** Sticky - sticky headers */
+  sticky: 1100,
+  /** Banner - notification banners */
+  banner: 1200,
+  /** Overlay - backdrop overlays */
+  overlay: 1300,
+  /** Modal - dialog windows */
+  modal: 1400,
+  /** Popover - popovers, tooltips */
+  popover: 1500,
+  /** Skiplink - accessibility skip links */
+  skipLink: 1600,
+  /** Toast - notification toasts */
+  toast: 1700,
+  /** Tooltip - tooltips (highest) */
+  tooltip: 1800
+}, l = {
+  /** Instant - for micro-interactions */
+  instant: 0,
+  /** 50ms - nearly instant */
+  faster: 50,
+  /** 100ms - very fast, state changes */
+  fast: 100,
+  /** 150ms - quick, hover states */
+  quick: 150,
+  /** 200ms - default transitions */
+  normal: 200,
+  /** 300ms - medium, focus changes */
+  relaxed: 300,
+  /** 400ms - slow, content reveals */
+  slow: 400,
+  /** 500ms - slower, modal openings */
+  slower: 500,
+  /** 700ms - very slow, page transitions */
+  lazy: 700,
+  /** 1000ms - dramatic reveals */
+  dramatic: 1e3
+}, m = {
+  /** Linear - constant speed */
+  linear: "linear",
+  /** Ease - subtle acceleration/deceleration */
+  ease: "ease",
+  /** Ease in - slow start */
+  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+  /** Ease out - slow end (most common) */
+  easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+  /** Ease in-out - slow start and end */
+  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+  /** Apple-style spring - bouncy, natural feel */
+  spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  /** Soft spring - subtle bounce */
+  softSpring: "cubic-bezier(0.22, 1, 0.36, 1)",
+  /** Smooth - very smooth deceleration */
+  smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+  /** Snappy - quick with soft landing */
+  snappy: "cubic-bezier(0.2, 0, 0, 1)",
+  /** Expressive - dramatic entrance */
+  expressive: "cubic-bezier(0.19, 1, 0.22, 1)",
+  /** Bounce - playful */
+  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+}, w = {
+  /** No transition */
+  none: "none",
+  /** Default - for most interactions */
+  default: `all ${l.normal}ms ${m.easeOut}`,
+  /** Fast - for hover states, micro-interactions */
+  fast: `all ${l.fast}ms ${m.easeOut}`,
+  /** Quick - for quick feedback */
+  quick: `all ${l.quick}ms ${m.easeOut}`,
+  /** Smooth - for focus states */
+  smooth: `all ${l.relaxed}ms ${m.smooth}`,
+  /** Spring - for interactive elements */
+  spring: `all ${l.relaxed}ms ${m.softSpring}`,
+  /** Slow - for reveals, modals */
+  slow: `all ${l.slow}ms ${m.easeOut}`,
+  /** Transform only */
+  transform: `transform ${l.normal}ms ${m.easeOut}`,
+  /** Opacity only */
+  opacity: `opacity ${l.normal}ms ${m.easeOut}`,
+  /** Colors only */
+  colors: `color ${l.fast}ms ${m.easeOut}, background-color ${l.fast}ms ${m.easeOut}, border-color ${l.fast}ms ${m.easeOut}`,
+  /** Shadow only */
+  shadow: `box-shadow ${l.normal}ms ${m.easeOut}`
+}, $ = {
+  /** Fade in */
+  fadeIn: {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  /** Fade out */
+  fadeOut: {
+    from: { opacity: 1 },
+    to: { opacity: 0 }
+  },
+  /** Scale up */
+  scaleIn: {
+    from: { opacity: 0, transform: "scale(0.95)" },
+    to: { opacity: 1, transform: "scale(1)" }
+  },
+  /** Scale down */
+  scaleOut: {
+    from: { opacity: 1, transform: "scale(1)" },
+    to: { opacity: 0, transform: "scale(0.95)" }
+  },
+  /** Slide up */
+  slideUp: {
+    from: { opacity: 0, transform: "translateY(10px)" },
+    to: { opacity: 1, transform: "translateY(0)" }
+  },
+  /** Slide down */
+  slideDown: {
+    from: { opacity: 0, transform: "translateY(-10px)" },
+    to: { opacity: 1, transform: "translateY(0)" }
+  },
+  /** Slide left */
+  slideLeft: {
+    from: { opacity: 0, transform: "translateX(10px)" },
+    to: { opacity: 1, transform: "translateX(0)" }
+  },
+  /** Slide right */
+  slideRight: {
+    from: { opacity: 0, transform: "translateX(-10px)" },
+    to: { opacity: 1, transform: "translateX(0)" }
+  },
+  /** Spin */
+  spin: {
+    from: { transform: "rotate(0deg)" },
+    to: { transform: "rotate(360deg)" }
+  },
+  /** Pulse */
+  pulse: {
+    "0%": { opacity: 1 },
+    "50%": { opacity: 0.5 },
+    "100%": { opacity: 1 }
+  },
+  /** Shake - for errors */
+  shake: {
+    "0%, 100%": { transform: "translateX(0)" },
+    "10%, 30%, 50%, 70%, 90%": { transform: "translateX(-4px)" },
+    "20%, 40%, 60%, 80%": { transform: "translateX(4px)" }
+  }
+};
+export {
+  H as accent,
+  $ as animations,
+  b as borderStyles,
+  p as borderWidths,
+  r as breakpoints,
+  k as colors,
+  y as containers,
+  l as durations,
+  m as easings,
+  L as error,
+  d as focusRings,
+  a as fontFamilies,
+  i as fontSizes,
+  o as fontWeights,
+  f as glows,
+  W as info,
+  s as letterSpacings,
+  n as lineHeights,
+  u as mediaQueries,
+  M as neutrals,
+  O as primary,
+  h as radii,
+  x as semanticSpacing,
+  g as shadows,
+  t as spacing,
+  X as success,
+  c as textStyles,
+  w as transitions,
+  G as warning,
+  S as zIndex
+};
+//# sourceMappingURL=tokens.js.map