@dbs-portal/core-theme/dist/breakpoints-CER8zEdl.js

Theme management, styling utilities, and design tokens for DBS Portal

const r = {
  // Primary brand colors
  primary: {
    50: "#f0f9ff",
    100: "#e0f2fe",
    200: "#bae6fd",
    300: "#7dd3fc",
    400: "#38bdf8",
    500: "#0ea5e9",
    // Main primary color
    600: "#0284c7",
    700: "#0369a1",
    800: "#075985",
    900: "#0c4a6e",
    950: "#082f49"
  },
  // Secondary colors
  secondary: {
    50: "#f8fafc",
    100: "#f1f5f9",
    200: "#e2e8f0",
    300: "#cbd5e1",
    400: "#94a3b8",
    500: "#64748b",
    // Main secondary color
    600: "#475569",
    700: "#334155",
    800: "#1e293b",
    900: "#0f172a",
    950: "#020617"
  },
  // Success colors
  success: {
    50: "#f0fdf4",
    100: "#dcfce7",
    200: "#bbf7d0",
    300: "#86efac",
    400: "#4ade80",
    500: "#22c55e",
    // Main success color
    600: "#16a34a",
    700: "#15803d",
    800: "#166534",
    900: "#14532d",
    950: "#052e16"
  },
  // Warning colors
  warning: {
    50: "#fffbeb",
    100: "#fef3c7",
    200: "#fde68a",
    300: "#fcd34d",
    400: "#fbbf24",
    500: "#f59e0b",
    // Main warning color
    600: "#d97706",
    700: "#b45309",
    800: "#92400e",
    900: "#78350f",
    950: "#451a03"
  },
  // Error colors
  error: {
    50: "#fef2f2",
    100: "#fee2e2",
    200: "#fecaca",
    300: "#fca5a5",
    400: "#f87171",
    500: "#ef4444",
    // Main error color
    600: "#dc2626",
    700: "#b91c1c",
    800: "#991b1b",
    900: "#7f1d1d",
    950: "#450a0a"
  },
  // Info colors
  info: {
    50: "#eff6ff",
    100: "#dbeafe",
    200: "#bfdbfe",
    300: "#93c5fd",
    400: "#60a5fa",
    500: "#3b82f6",
    // Main info color
    600: "#2563eb",
    700: "#1d4ed8",
    800: "#1e40af",
    900: "#1e3a8a",
    950: "#172554"
  },
  // Neutral colors
  neutral: {
    50: "#fafafa",
    100: "#f5f5f5",
    200: "#e5e5e5",
    300: "#d4d4d4",
    400: "#a3a3a3",
    500: "#737373",
    600: "#525252",
    700: "#404040",
    800: "#262626",
    900: "#171717",
    950: "#0a0a0a"
  },
  // Semantic colors
  white: "#ffffff",
  black: "#000000",
  transparent: "transparent",
  current: "currentColor"
}, l = {
  sans: [
    "Inter",
    "-apple-system",
    "BlinkMacSystemFont",
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    "sans-serif"
  ],
  serif: [
    "Georgia",
    "Cambria",
    "Times New Roman",
    "Times",
    "serif"
  ],
  mono: [
    "JetBrains Mono",
    "Fira Code",
    "Monaco",
    "Consolas",
    "Liberation Mono",
    "Courier New",
    "monospace"
  ]
}, m = {
  xs: ["0.75rem", { lineHeight: "1rem" }],
  // 12px
  sm: ["0.875rem", { lineHeight: "1.25rem" }],
  // 14px
  base: ["1rem", { lineHeight: "1.5rem" }],
  // 16px
  lg: ["1.125rem", { lineHeight: "1.75rem" }],
  // 18px
  xl: ["1.25rem", { lineHeight: "1.75rem" }],
  // 20px
  "2xl": ["1.5rem", { lineHeight: "2rem" }],
  // 24px
  "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
  // 30px
  "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
  // 36px
  "5xl": ["3rem", { lineHeight: "1" }],
  // 48px
  "6xl": ["3.75rem", { lineHeight: "1" }],
  // 60px
  "7xl": ["4.5rem", { lineHeight: "1" }],
  // 72px
  "8xl": ["6rem", { lineHeight: "1" }],
  // 96px
  "9xl": ["8rem", { lineHeight: "1" }]
  // 128px
}, a = {
  thin: "100",
  extralight: "200",
  light: "300",
  normal: "400",
  medium: "500",
  semibold: "600",
  bold: "700",
  extrabold: "800",
  black: "900"
}, n = {
  none: "1",
  tight: "1.25",
  snug: "1.375",
  normal: "1.5",
  relaxed: "1.625",
  loose: "2",
  3: ".75rem",
  4: "1rem",
  5: "1.25rem",
  6: "1.5rem",
  7: "1.75rem",
  8: "2rem",
  9: "2.25rem",
  10: "2.5rem"
}, t = {
  tighter: "-0.05em",
  tight: "-0.025em",
  normal: "0em",
  wide: "0.025em",
  wider: "0.05em",
  widest: "0.1em"
}, d = {
  h1: {
    fontSize: m["4xl"],
    fontWeight: a.bold,
    lineHeight: n.tight,
    letterSpacing: t.tight
  },
  h2: {
    fontSize: m["3xl"],
    fontWeight: a.bold,
    lineHeight: n.tight,
    letterSpacing: t.tight
  },
  h3: {
    fontSize: m["2xl"],
    fontWeight: a.semibold,
    lineHeight: n.snug,
    letterSpacing: t.normal
  },
  h4: {
    fontSize: m.xl,
    fontWeight: a.semibold,
    lineHeight: n.snug,
    letterSpacing: t.normal
  },
  h5: {
    fontSize: m.lg,
    fontWeight: a.medium,
    lineHeight: n.normal,
    letterSpacing: t.normal
  },
  h6: {
    fontSize: m.base,
    fontWeight: a.medium,
    lineHeight: n.normal,
    letterSpacing: t.normal
  },
  body1: {
    fontSize: m.base,
    fontWeight: a.normal,
    lineHeight: n.relaxed,
    letterSpacing: t.normal
  },
  body2: {
    fontSize: m.sm,
    fontWeight: a.normal,
    lineHeight: n.normal,
    letterSpacing: t.normal
  },
  caption: {
    fontSize: m.xs,
    fontWeight: a.normal,
    lineHeight: n.normal,
    letterSpacing: t.wide
  },
  overline: {
    fontSize: m.xs,
    fontWeight: a.medium,
    lineHeight: n.normal,
    letterSpacing: t.widest,
    textTransform: "uppercase"
  }
}, e = {
  0: "0px",
  px: "1px",
  0.5: "0.125rem",
  // 2px
  1: "0.25rem",
  // 4px
  1.5: "0.375rem",
  // 6px
  2: "0.5rem",
  // 8px
  2.5: "0.625rem",
  // 10px
  3: "0.75rem",
  // 12px
  3.5: "0.875rem",
  // 14px
  4: "1rem",
  // 16px
  5: "1.25rem",
  // 20px
  6: "1.5rem",
  // 24px
  7: "1.75rem",
  // 28px
  8: "2rem",
  // 32px
  9: "2.25rem",
  // 36px
  10: "2.5rem",
  // 40px
  11: "2.75rem",
  // 44px
  12: "3rem",
  // 48px
  14: "3.5rem",
  // 56px
  16: "4rem",
  // 64px
  20: "5rem",
  // 80px
  24: "6rem",
  // 96px
  28: "7rem",
  // 112px
  32: "8rem",
  // 128px
  36: "9rem",
  // 144px
  40: "10rem",
  // 160px
  44: "11rem",
  // 176px
  48: "12rem",
  // 192px
  52: "13rem",
  // 208px
  56: "14rem",
  // 224px
  60: "15rem",
  // 240px
  64: "16rem",
  // 256px
  72: "18rem",
  // 288px
  80: "20rem",
  // 320px
  96: "24rem"
  // 384px
}, o = {
  // Button spacing
  button: {
    paddingX: {
      xs: e[2],
      sm: e[3],
      md: e[4],
      lg: e[6],
      xl: e[8]
    },
    paddingY: {
      xs: e[1],
      sm: e[1.5],
      md: e[2],
      lg: e[2.5],
      xl: e[3]
    },
    gap: e[2]
  },
  // Input spacing
  input: {
    paddingX: {
      sm: e[2.5],
      md: e[3],
      lg: e[4]
    },
    paddingY: {
      sm: e[1.5],
      md: e[2],
      lg: e[2.5]
    }
  },
  // Card spacing
  card: {
    padding: {
      sm: e[4],
      md: e[6],
      lg: e[8]
    },
    gap: e[4]
  },
  // Modal spacing
  modal: {
    padding: e[6],
    gap: e[4]
  },
  // Layout spacing
  layout: {
    containerPadding: {
      sm: e[4],
      md: e[6],
      lg: e[8]
    },
    sectionGap: {
      sm: e[8],
      md: e[12],
      lg: e[16]
    },
    contentGap: {
      sm: e[4],
      md: e[6],
      lg: e[8]
    }
  }
}, x = {
  none: "0px",
  sm: "0.125rem",
  // 2px
  base: "0.25rem",
  // 4px
  md: "0.375rem",
  // 6px
  lg: "0.5rem",
  // 8px
  xl: "0.75rem",
  // 12px
  "2xl": "1rem",
  // 16px
  "3xl": "1.5rem",
  // 24px
  full: "9999px"
}, s = {
  none: "none",
  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
  base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
}, i = {
  xs: "0px",
  // Extra small devices (phones)
  sm: "576px",
  // Small devices (landscape phones)
  md: "768px",
  // Medium devices (tablets)
  lg: "992px",
  // Large devices (desktops)
  xl: "1200px",
  // Extra large devices (large desktops)
  "2xl": "1400px"
  // Extra extra large devices
}, p = {
  xs: "100%",
  sm: "540px",
  md: "720px",
  lg: "960px",
  xl: "1140px",
  "2xl": "1320px"
}, g = {
  columns: 12,
  gutter: {
    xs: "16px",
    sm: "16px",
    md: "24px",
    lg: "24px",
    xl: "32px",
    "2xl": "32px"
  }
}, f = {
  xs: `@media (min-width: ${i.xs})`,
  sm: `@media (min-width: ${i.sm})`,
  md: `@media (min-width: ${i.md})`,
  lg: `@media (min-width: ${i.lg})`,
  xl: `@media (min-width: ${i.xl})`,
  "2xl": `@media (min-width: ${i["2xl"]})`,
  // Max width queries
  "max-xs": `@media (max-width: ${parseInt(i.sm) - 1}px)`,
  "max-sm": `@media (max-width: ${parseInt(i.md) - 1}px)`,
  "max-md": `@media (max-width: ${parseInt(i.lg) - 1}px)`,
  "max-lg": `@media (max-width: ${parseInt(i.xl) - 1}px)`,
  "max-xl": `@media (max-width: ${parseInt(i["2xl"]) - 1}px)`,
  // Range queries
  "sm-only": `@media (min-width: ${i.sm}) and (max-width: ${parseInt(i.md) - 1}px)`,
  "md-only": `@media (min-width: ${i.md}) and (max-width: ${parseInt(i.lg) - 1}px)`,
  "lg-only": `@media (min-width: ${i.lg}) and (max-width: ${parseInt(i.xl) - 1}px)`,
  "xl-only": `@media (min-width: ${i.xl}) and (max-width: ${parseInt(i["2xl"]) - 1}px)`
}, h = {
  // Navigation
  navigation: {
    mobileBreakpoint: i.md,
    collapsedWidth: "80px",
    expandedWidth: "256px"
  },
  // Tables
  table: {
    scrollBreakpoint: i.md,
    stackBreakpoint: i.sm
  },
  // Forms
  form: {
    stackBreakpoint: i.sm,
    inlineBreakpoint: i.md
  },
  // Cards
  card: {
    stackBreakpoint: i.sm,
    gridBreakpoints: {
      1: i.xs,
      2: i.sm,
      3: i.md,
      4: i.lg
    }
  }
};
export {
  m as a,
  a as b,
  r as c,
  t as d,
  o as e,
  l as f,
  x as g,
  s as h,
  i,
  p as j,
  g as k,
  n as l,
  f as m,
  h as r,
  e as s,
  d as t
};
//# sourceMappingURL=breakpoints-CER8zEdl.js.map