@mastra/playground-ui/dist/tokens.es.js

Mastra Playground components

const Animations = {
  // Durations
  durationNormal: "200ms",
  durationSlow: "300ms",
  // Easings
  easeOut: "cubic-bezier(0.33, 1, 0.68, 1)"
};

const BorderRadius = {
  none: "0px",
  sm: "2px",
  md: "4px",
  lg: "6px",
  xl: "12px"
};

const Colors = {
  surface1: "var(--surface1)",
  surface2: "var(--surface2)",
  surface3: "var(--surface3)",
  surface4: "var(--surface4)",
  surface5: "var(--surface5)",
  surface6: "var(--surface6)",
  accent1: "var(--accent1)",
  accent2: "var(--accent2)",
  accent3: "var(--accent3)",
  accent5: "var(--accent5)",
  accent6: "var(--accent6)",
  accent1Dark: "var(--accent1Dark)",
  accent2Dark: "var(--accent2Dark)",
  accent3Dark: "var(--accent3Dark)",
  accent5Dark: "var(--accent5Dark)",
  accent6Dark: "var(--accent6Dark)",
  accent1Darker: "var(--accent1Darker)",
  accent2Darker: "var(--accent2Darker)",
  accent3Darker: "var(--accent3Darker)",
  accent5Darker: "var(--accent5Darker)",
  accent6Darker: "var(--accent6Darker)",
  neutral1: "var(--neutral1)",
  neutral2: "var(--neutral2)",
  neutral3: "var(--neutral3)",
  neutral4: "var(--neutral4)",
  neutral5: "var(--neutral5)",
  neutral6: "var(--neutral6)",
  // Semantic state colors
  error: "var(--error)",
  // Overlay colors
  overlay: "var(--overlay)"
};
const BorderColors = {
  border1: "var(--border1)",
  border2: "var(--border2)"
};

const FontSizes = {
  // UI text sizes
  "ui-xs": "0.625rem",
  // 10px - small labels, badges
  "ui-sm": "0.75rem",
  // 12px - secondary text
  "ui-smd": "0.8125rem",
  // 13px - special font size for e.g. form field labels
  "ui-md": "0.875rem",
  // 14px - default text
  "ui-lg": "1rem",
  // 16px - emphasized text
  // Header sizes
  "header-xs": "1rem",
  // 16px
  "header-sm": "1.125rem",
  // 18px
  "header-md": "1.25rem",
  // 20px
  "header-lg": "1.5rem",
  // 24px
  "header-xl": "1.75rem"
  // 28px
};
const LineHeights = {
  "ui-xs": "160%",
  // 16px
  "ui-sm": "150%",
  // 18px
  "ui-smd": "150%",
  // 20px
  "ui-md": "143%",
  // 20px
  "ui-lg": "150%",
  // 24px
  "header-xs": "137%",
  // 22px
  "header-sm": "133%",
  // 24px
  "header-md": "140%",
  // 28px
  "header-lg": "133%",
  // 32px
  "header-xl": "129%"
  // 36px
};

const Shadows = {
  // Elevation shadows
  sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
  md: "0 4px 6px rgba(0, 0, 0, 0.3)",
  lg: "0 10px 15px rgba(0, 0, 0, 0.4)",
  // Inner shadow for pressed states
  inner: "inset 0 2px 4px rgba(0, 0, 0, 0.3)",
  // Card/elevated surface shadows
  card: "0 2px 8px rgba(0, 0, 0, 0.4)",
  elevated: "0 8px 24px rgba(0, 0, 0, 0.5)",
  // Dialog/modal shadows
  dialog: "0 16px 48px rgba(0, 0, 0, 0.6)"
};
const Glows = {
  accent1: "0 0 20px rgba(34, 197, 94, 0.25)",
  accent2: "0 0 20px rgba(239, 68, 68, 0.25)",
  // Subtle glow for focus rings
  focusRing: "0 0 0 3px rgba(34, 197, 94, 0.12)"
};

const Sizes = {
  "icon-default": "16px",
  "icon-lg": "20px",
  "icon-sm": "12px",
  "form-sm": "1.75rem",
  "form-md": "2rem",
  "form-default": "2.25rem",
  "form-lg": "2.5rem",
  "header-default": "48px",
  "table-header": "28px",
  "table-row": "56px",
  "table-row-small": "40px",
  "badge-default": "28px",
  "avatar-sm": "24px",
  "avatar-md": "32px",
  "avatar-lg": "40px",
  "dropdown-max-height": "300px"
};

const Spacings = {
  // Base scale (REM-based, matching Tailwind convention)
  "0": "0rem",
  px: "0.0625rem",
  // 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
};

export { Animations, BorderColors, BorderRadius, Colors, FontSizes, Glows, LineHeights, Shadows, Sizes, Spacings };
//# sourceMappingURL=tokens.es.js.map