@brycks/core-front 0.2.7 → 0.2.9

package/dist/tokens.js

@@ -1,627 +1,41 @@
-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)" }
-  }
-};
+import { accent as e, colors as s, error as t, info as i, neutrals as n, primary as a, success as f, warning as m } from "./design-system/tokens/colors.js";
+import { semanticSpacing as c, spacing as x } from "./design-system/tokens/spacing.js";
+import { fontFamilies as d, fontSizes as l, fontWeights as u, letterSpacings as S, lineHeights as h, textStyles as b } from "./design-system/tokens/typography.js";
+import { focusRings as y, glows as z, shadows as W } from "./design-system/tokens/shadows.js";
+import { borderStyles as F, borderWidths as H, radii as I } from "./design-system/tokens/borders.js";
+import { breakpoints as R, containers as j, mediaQueries as q } from "./design-system/tokens/breakpoints.js";
+import { zIndex as A } from "./design-system/tokens/zIndex.js";
+import { animations as C, durations as D, easings as E, transitions as G } from "./design-system/tokens/motion.js";
 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
+  e as accent,
+  C as animations,
+  F as borderStyles,
+  H as borderWidths,
+  R as breakpoints,
+  s as colors,
+  j as containers,
+  D as durations,
+  E as easings,
+  t as error,
+  y as focusRings,
+  d as fontFamilies,
+  l as fontSizes,
+  u as fontWeights,
+  z as glows,
+  i as info,
+  S as letterSpacings,
+  h as lineHeights,
+  q as mediaQueries,
+  n as neutrals,
+  a as primary,
+  I as radii,
+  c as semanticSpacing,
+  W as shadows,
+  x as spacing,
+  f as success,
+  b as textStyles,
+  G as transitions,
+  m as warning,
+  A as zIndex
 };
 //# sourceMappingURL=tokens.js.map