UNPKG

@cerberus-design/styled-system

Version:

Cerberus Design System Panda-CSS styled-system.

702 lines (688 loc) 16.9 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/index.ts var src_exports = {}; __export(src_exports, { default: () => src_default, preset: () => preset }); module.exports = __toCommonJS(src_exports); // src/breakpoints.ts var breakpoints = { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" }; // src/containers.ts var containerSizes = { xs: "320px", sm: "384px", md: "448px", lg: "512px", xl: "576px", "2xl": "672px", "3xl": "768px", "4xl": "896px", "5xl": "1024px", "6xl": "1152px", "7xl": "1280px", "8xl": "1440px" }; // src/keyframes.ts var keyframes = { spin: { to: { transform: "rotate(360deg)" } }, ping: { "75%, 100%": { transform: "scale(2)", opacity: "0" } }, pulse: { "50%": { opacity: ".5" } }, bounce: { "0%, 100%": { transform: "translateY(-25%)", animationTimingFunction: "cubic-bezier(0.8,0,1,1)" }, "50%": { transform: "none", animationTimingFunction: "cubic-bezier(0,0,0.2,1)" } } }; var animations = { spin: { value: "spin 1s linear infinite" }, ping: { value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" }, pulse: { value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" }, bounce: { value: "bounce 1s infinite" } }; // src/aspect-ratios.ts var aspectRatios = { square: { value: "1 / 1" }, landscape: { value: "4 / 3" }, portrait: { value: "3 / 4" }, wide: { value: "16 / 9" }, ultrawide: { value: "18 / 5" }, golden: { value: "1.618 / 1" } }; // src/borders.ts var borders = { none: { value: "none" } }; // src/colors.ts var colors = { current: { value: "currentColor" }, black: { value: "#000" }, white: { value: "#fff" }, transparent: { value: "rgb(0 0 0 / 0)" }, rose: { 50: { value: "#fff1f2" }, 100: { value: "#ffe4e6" }, 200: { value: "#fecdd3" }, 300: { value: "#fda4af" }, 400: { value: "#fb7185" }, 500: { value: "#f43f5e" }, 600: { value: "#e11d48" }, 700: { value: "#be123c" }, 800: { value: "#9f1239" }, 900: { value: "#881337" }, 950: { value: "#4c0519" } }, pink: { 50: { value: "#fdf2f8" }, 100: { value: "#fce7f3" }, 200: { value: "#fbcfe8" }, 300: { value: "#f9a8d4" }, 400: { value: "#f472b6" }, 500: { value: "#ec4899" }, 600: { value: "#db2777" }, 700: { value: "#be185d" }, 800: { value: "#9d174d" }, 900: { value: "#831843" }, 950: { value: "#500724" } }, fuchsia: { 50: { value: "#fdf4ff" }, 100: { value: "#fae8ff" }, 200: { value: "#f5d0fe" }, 300: { value: "#f0abfc" }, 400: { value: "#e879f9" }, 500: { value: "#d946ef" }, 600: { value: "#c026d3" }, 700: { value: "#a21caf" }, 800: { value: "#86198f" }, 900: { value: "#701a75" }, 950: { value: "#4a044e" } }, purple: { 50: { value: "#faf5ff" }, 100: { value: "#f3e8ff" }, 200: { value: "#e9d5ff" }, 300: { value: "#d8b4fe" }, 400: { value: "#c084fc" }, 500: { value: "#a855f7" }, 600: { value: "#9333ea" }, 700: { value: "#7e22ce" }, 800: { value: "#6b21a8" }, 900: { value: "#581c87" }, 950: { value: "#3b0764" } }, violet: { 50: { value: "#f5f3ff" }, 100: { value: "#ede9fe" }, 200: { value: "#ddd6fe" }, 300: { value: "#c4b5fd" }, 400: { value: "#a78bfa" }, 500: { value: "#8b5cf6" }, 600: { value: "#7c3aed" }, 700: { value: "#6d28d9" }, 800: { value: "#5b21b6" }, 900: { value: "#4c1d95" }, 950: { value: "#2e1065" } }, indigo: { 50: { value: "#eef2ff" }, 100: { value: "#e0e7ff" }, 200: { value: "#c7d2fe" }, 300: { value: "#a5b4fc" }, 400: { value: "#818cf8" }, 500: { value: "#6366f1" }, 600: { value: "#4f46e5" }, 700: { value: "#4338ca" }, 800: { value: "#3730a3" }, 900: { value: "#312e81" }, 950: { value: "#1e1b4b" } }, blue: { 50: { value: "#eff6ff" }, 100: { value: "#dbeafe" }, 200: { value: "#bfdbfe" }, 300: { value: "#93c5fd" }, 400: { value: "#60a5fa" }, 500: { value: "#3b82f6" }, 600: { value: "#2563eb" }, 700: { value: "#1d4ed8" }, 800: { value: "#1e40af" }, 900: { value: "#1e3a8a" }, 950: { value: "#172554" } }, sky: { 50: { value: "#f0f9ff" }, 100: { value: "#e0f2fe" }, 200: { value: "#bae6fd" }, 300: { value: "#7dd3fc" }, 400: { value: "#38bdf8" }, 500: { value: "#0ea5e9" }, 600: { value: "#0284c7" }, 700: { value: "#0369a1" }, 800: { value: "#075985" }, 900: { value: "#0c4a6e" }, 950: { value: "#082f49" } }, cyan: { 50: { value: "#ecfeff" }, 100: { value: "#cffafe" }, 200: { value: "#a5f3fc" }, 300: { value: "#67e8f9" }, 400: { value: "#22d3ee" }, 500: { value: "#06b6d4" }, 600: { value: "#0891b2" }, 700: { value: "#0e7490" }, 800: { value: "#155e75" }, 900: { value: "#164e63" }, 950: { value: "#083344" } }, teal: { 50: { value: "#f0fdfa" }, 100: { value: "#ccfbf1" }, 200: { value: "#99f6e4" }, 300: { value: "#5eead4" }, 400: { value: "#2dd4bf" }, 500: { value: "#14b8a6" }, 600: { value: "#0d9488" }, 700: { value: "#0f766e" }, 800: { value: "#115e59" }, 900: { value: "#134e4a" }, 950: { value: "#042f2e" } }, emerald: { 50: { value: "#ecfdf5" }, 100: { value: "#d1fae5" }, 200: { value: "#a7f3d0" }, 300: { value: "#6ee7b7" }, 400: { value: "#34d399" }, 500: { value: "#10b981" }, 600: { value: "#059669" }, 700: { value: "#047857" }, 800: { value: "#065f46" }, 900: { value: "#064e3b" }, 950: { value: "#022c22" } }, green: { 50: { value: "#f0fdf4" }, 100: { value: "#dcfce7" }, 200: { value: "#bbf7d0" }, 300: { value: "#86efac" }, 400: { value: "#4ade80" }, 500: { value: "#22c55e" }, 600: { value: "#16a34a" }, 700: { value: "#15803d" }, 800: { value: "#166534" }, 900: { value: "#14532d" }, 950: { value: "#052e16" } }, lime: { 50: { value: "#f7fee7" }, 100: { value: "#ecfccb" }, 200: { value: "#d9f99d" }, 300: { value: "#bef264" }, 400: { value: "#a3e635" }, 500: { value: "#84cc16" }, 600: { value: "#65a30d" }, 700: { value: "#4d7c0f" }, 800: { value: "#3f6212" }, 900: { value: "#365314" }, 950: { value: "#1a2e05" } }, yellow: { 50: { value: "#fefce8" }, 100: { value: "#fef9c3" }, 200: { value: "#fef08a" }, 300: { value: "#fde047" }, 400: { value: "#facc15" }, 500: { value: "#eab308" }, 600: { value: "#ca8a04" }, 700: { value: "#a16207" }, 800: { value: "#854d0e" }, 900: { value: "#713f12" }, 950: { value: "#422006" } }, amber: { 50: { value: "#fffbeb" }, 100: { value: "#fef3c7" }, 200: { value: "#fde68a" }, 300: { value: "#fcd34d" }, 400: { value: "#fbbf24" }, 500: { value: "#f59e0b" }, 600: { value: "#d97706" }, 700: { value: "#b45309" }, 800: { value: "#92400e" }, 900: { value: "#78350f" }, 950: { value: "#451a03" } }, orange: { 50: { value: "#fff7ed" }, 100: { value: "#ffedd5" }, 200: { value: "#fed7aa" }, 300: { value: "#fdba74" }, 400: { value: "#fb923c" }, 500: { value: "#f97316" }, 600: { value: "#ea580c" }, 700: { value: "#c2410c" }, 800: { value: "#9a3412" }, 900: { value: "#7c2d12" }, 950: { value: "#431407" } }, red: { 50: { value: "#fef2f2" }, 100: { value: "#fee2e2" }, 200: { value: "#fecaca" }, 300: { value: "#fca5a5" }, 400: { value: "#f87171" }, 500: { value: "#ef4444" }, 600: { value: "#dc2626" }, 700: { value: "#b91c1c" }, 800: { value: "#991b1b" }, 900: { value: "#7f1d1d" }, 950: { value: "#450a0a" } }, neutral: { 50: { value: "#fafafa" }, 100: { value: "#f5f5f5" }, 200: { value: "#e5e5e5" }, 300: { value: "#d4d4d4" }, 400: { value: "#a3a3a3" }, 500: { value: "#737373" }, 600: { value: "#525252" }, 700: { value: "#404040" }, 800: { value: "#262626" }, 900: { value: "#171717" }, 950: { value: "#0a0a0a" } }, stone: { 50: { value: "#fafaf9" }, 100: { value: "#f5f5f4" }, 200: { value: "#e7e5e4" }, 300: { value: "#d6d3d1" }, 400: { value: "#a8a29e" }, 500: { value: "#78716c" }, 600: { value: "#57534e" }, 700: { value: "#44403c" }, 800: { value: "#292524" }, 900: { value: "#1c1917" }, 950: { value: "#0c0a09" } }, zinc: { 50: { value: "#fafafa" }, 100: { value: "#f4f4f5" }, 200: { value: "#e4e4e7" }, 300: { value: "#d4d4d8" }, 400: { value: "#a1a1aa" }, 500: { value: "#71717a" }, 600: { value: "#52525b" }, 700: { value: "#3f3f46" }, 800: { value: "#27272a" }, 900: { value: "#18181b" }, 950: { value: "#09090b" } }, gray: { 50: { value: "#f9fafb" }, 100: { value: "#f3f4f6" }, 200: { value: "#e5e7eb" }, 300: { value: "#d1d5db" }, 400: { value: "#9ca3af" }, 500: { value: "#6b7280" }, 600: { value: "#4b5563" }, 700: { value: "#374151" }, 800: { value: "#1f2937" }, 900: { value: "#111827" }, 950: { value: "#030712" } }, slate: { 50: { value: "#f8fafc" }, 100: { value: "#f1f5f9" }, 200: { value: "#e2e8f0" }, 300: { value: "#cbd5e1" }, 400: { value: "#94a3b8" }, 500: { value: "#64748b" }, 600: { value: "#475569" }, 700: { value: "#334155" }, 800: { value: "#1e293b" }, 900: { value: "#0f172a" }, 950: { value: "#020617" } } }; // src/shadows.ts var shadows = { xs: { value: "0 1px 2px 0 rgb(0 0 0 / 0.05)" }, sm: { value: ["0 1px 3px 0 rgb(0 0 0 / 0.1)", "0 1px 2px -1px rgb(0 0 0 / 0.1)"] }, md: { value: ["0 4px 6px -1px rgb(0 0 0 / 0.1)", "0 2px 4px -2px rgb(0 0 0 / 0.1)"] }, lg: { value: ["0 10px 15px -3px rgb(0 0 0 / 0.1)", "0 4px 6px -4px rgb(0 0 0 / 0.1)"] }, xl: { value: ["0 20px 25px -5px rgb(0 0 0 / 0.1)", "0 8px 10px -6px rgb(0 0 0 / 0.1)"] }, "2xl": { value: "0 25px 50px -12px rgb(0 0 0 / 0.25)" }, inner: { value: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)" } }; // src/spacing.ts var spacing = { 0: { value: "0rem" }, 0.5: { value: "0.125rem" }, 1: { value: "0.25rem" }, 1.5: { value: "0.375rem" }, 2: { value: "0.5rem" }, 2.5: { value: "0.625rem" }, 3: { value: "0.75rem" }, 3.5: { value: "0.875rem" }, 4: { value: "1rem" }, 5: { value: "1.25rem" }, 6: { value: "1.5rem" }, 7: { value: "1.75rem" }, 8: { value: "2rem" }, 9: { value: "2.25rem" }, 10: { value: "2.5rem" }, 11: { value: "2.75rem" }, 12: { value: "3rem" }, 14: { value: "3.5rem" }, 16: { value: "4rem" }, 20: { value: "5rem" }, 24: { value: "6rem" }, 28: { value: "7rem" }, 32: { value: "8rem" }, 36: { value: "9rem" }, 40: { value: "10rem" }, 44: { value: "11rem" }, 48: { value: "12rem" }, 52: { value: "13rem" }, 56: { value: "14rem" }, 60: { value: "15rem" }, 64: { value: "16rem" }, 72: { value: "18rem" }, 80: { value: "20rem" }, 96: { value: "24rem" } }; // src/sizes.ts var largeSizes = { xs: { value: "20rem" }, sm: { value: "24rem" }, md: { value: "28rem" }, lg: { value: "32rem" }, xl: { value: "36rem" }, "2xl": { value: "42rem" }, "3xl": { value: "48rem" }, "4xl": { value: "56rem" }, "5xl": { value: "64rem" }, "6xl": { value: "72rem" }, "7xl": { value: "80rem" }, "8xl": { value: "90rem" }, prose: { value: "65ch" } }; var sizes = { ...spacing, ...largeSizes, full: { value: "100%" }, min: { value: "min-content" }, max: { value: "max-content" }, fit: { value: "fit-content" } }; // src/typography.ts var fontSizes = { "2xs": { value: "0.5rem" }, xs: { value: "0.75rem" }, sm: { value: "0.875rem" }, md: { value: "1rem" }, lg: { value: "1.125rem" }, xl: { value: "1.25rem" }, "2xl": { value: "1.5rem" }, "3xl": { value: "1.875rem" }, "4xl": { value: "2.25rem" }, "5xl": { value: "3rem" }, "6xl": { value: "3.75rem" }, "7xl": { value: "4.5rem" }, "8xl": { value: "6rem" }, "9xl": { value: "8rem" } }; var fontWeights = { thin: { value: "100" }, extralight: { value: "200" }, light: { value: "300" }, normal: { value: "400" }, medium: { value: "500" }, semibold: { value: "600" }, bold: { value: "700" }, extrabold: { value: "800" }, black: { value: "900" } }; var letterSpacings = { tighter: { value: "-0.05em" }, tight: { value: "-0.025em" }, normal: { value: "0em" }, wide: { value: "0.025em" }, wider: { value: "0.05em" }, widest: { value: "0.1em" } }; var lineHeights = { none: { value: "1" }, tight: { value: "1.25" }, snug: { value: "1.375" }, normal: { value: "1.5" }, relaxed: { value: "1.625" }, loose: { value: "2" } }; var fonts = { sans: { value: [ "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", '"Segoe UI"', "Roboto", '"Helvetica Neue"', "Arial", '"Noto Sans"', "sans-serif", '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"' ] }, serif: { value: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"] }, mono: { value: [ "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", '"Liberation Mono"', '"Courier New"', "monospace" ] } }; var textStyles = { xs: { value: { fontSize: "0.75rem", lineHeight: "1rem" } }, sm: { value: { fontSize: "0.875rem", lineHeight: "1.25rem" } }, md: { value: { fontSize: "1rem", lineHeight: "1.5rem" } }, lg: { value: { fontSize: "1.125rem", lineHeight: "1.75rem" } }, xl: { value: { fontSize: "1.25rem", lineHeight: "1.75rem" } }, "2xl": { value: { fontSize: "1.5rem", lineHeight: "2rem" } }, "3xl": { value: { fontSize: "1.875rem", lineHeight: "2.25rem" } }, "4xl": { value: { fontSize: "2.25rem", lineHeight: "2.5rem" } }, "5xl": { value: { fontSize: "3rem", lineHeight: "1" } }, "6xl": { value: { fontSize: "3.75rem", lineHeight: "1" } }, "7xl": { value: { fontSize: "4.5rem", lineHeight: "1" } }, "8xl": { value: { fontSize: "6rem", lineHeight: "1" } }, "9xl": { value: { fontSize: "8rem", lineHeight: "1" } } }; // src/tokens.ts var defineTokens = (v) => v; var tokens = defineTokens({ aspectRatios, borders, easings: { default: { value: "cubic-bezier(0.4, 0, 0.2, 1)" }, linear: { value: "linear" }, in: { value: "cubic-bezier(0.4, 0, 1, 1)" }, out: { value: "cubic-bezier(0, 0, 0.2, 1)" }, "in-out": { value: "cubic-bezier(0.4, 0, 0.2, 1)" } }, durations: { fastest: { value: "50ms" }, faster: { value: "100ms" }, fast: { value: "150ms" }, normal: { value: "200ms" }, slow: { value: "300ms" }, slower: { value: "400ms" }, slowest: { value: "500ms" } }, radii: { xs: { value: "0.125rem" }, sm: { value: "0.25rem" }, md: { value: "0.375rem" }, lg: { value: "0.5rem" }, xl: { value: "0.75rem" }, "2xl": { value: "1rem" }, "3xl": { value: "1.5rem" }, "4xl": { value: "2rem" }, full: { value: "9999px" } }, fontWeights, lineHeights, fonts, letterSpacings, fontSizes, shadows, colors, blurs: { sm: { value: "4px" }, base: { value: "8px" }, md: { value: "12px" }, lg: { value: "16px" }, xl: { value: "24px" }, "2xl": { value: "40px" }, "3xl": { value: "64px" } }, spacing, sizes, animations }); // src/index.ts var definePreset = (config) => config; var preset = definePreset({ name: "@pandacss/preset-panda", theme: { keyframes, breakpoints, tokens, textStyles, containerSizes } }); var src_default = preset; // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { preset });