santycss
Version:
Plain-English utility-first CSS framework — no build step, just classes
668 lines (655 loc) • 67.2 kB
JavaScript
/**
* SantyCSS JIT — Runtime class generation engine
*
* Drop this script instead of (or alongside) santy.css.
* Watches the DOM, generates only the CSS classes actually used.
* Supports arbitrary values: add-padding-137, set-text-19, add-border-7 ...
*
* Usage:
* <script src="santy-jit.js"></script>
*
* Or as ES module:
* import './santy-jit.js'
*
* Config (optional, before the script):
* <script>
* window.SantyJIT = {
* safelist: ['make-hidden', 'animate-spin'], // always generate
* nonce: 'abc123', // CSP nonce
* };
* </script>
*/
(function (root) {
'use strict';
// ─── Color Palette ──────────────────────────────────────────────────────────
var P = {
red: {50:'#fef2f2',100:'#fee2e2',200:'#fecaca',300:'#fca5a5',400:'#f87171',500:'#ef4444',600:'#dc2626',700:'#b91c1c',800:'#991b1b',900:'#7f1d1d'},
orange: {50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c',800:'#9a3412',900:'#7c2d12'},
amber: {50:'#fffbeb',100:'#fef3c7',200:'#fde68a',300:'#fcd34d',400:'#fbbf24',500:'#f59e0b',600:'#d97706',700:'#b45309',800:'#92400e',900:'#78350f'},
yellow: {50:'#fefce8',100:'#fef9c3',200:'#fef08a',300:'#fde047',400:'#facc15',500:'#eab308',600:'#ca8a04',700:'#a16207',800:'#854d0e',900:'#713f12'},
lime: {50:'#f7fee7',100:'#ecfccb',200:'#d9f99d',300:'#bef264',400:'#a3e635',500:'#84cc16',600:'#65a30d',700:'#4d7c0f',800:'#3f6212',900:'#365314'},
green: {50:'#f0fdf4',100:'#dcfce7',200:'#bbf7d0',300:'#86efac',400:'#4ade80',500:'#22c55e',600:'#16a34a',700:'#15803d',800:'#166534',900:'#14532d'},
teal: {50:'#f0fdfa',100:'#ccfbf1',200:'#99f6e4',300:'#5eead4',400:'#2dd4bf',500:'#14b8a6',600:'#0d9488',700:'#0f766e',800:'#115e59',900:'#134e4a'},
cyan: {50:'#ecfeff',100:'#cffafe',200:'#a5f3fc',300:'#67e8f9',400:'#22d3ee',500:'#06b6d4',600:'#0891b2',700:'#0e7490',800:'#155e75',900:'#164e63'},
blue: {50:'#eff6ff',100:'#dbeafe',200:'#bfdbfe',300:'#93c5fd',400:'#60a5fa',500:'#3b82f6',600:'#2563eb',700:'#1d4ed8',800:'#1e40af',900:'#1e3a8a'},
indigo: {50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',800:'#3730a3',900:'#312e81'},
violet: {50:'#f5f3ff',100:'#ede9fe',200:'#ddd6fe',300:'#c4b5fd',400:'#a78bfa',500:'#8b5cf6',600:'#7c3aed',700:'#6d28d9',800:'#5b21b6',900:'#4c1d95'},
purple: {50:'#faf5ff',100:'#f3e8ff',200:'#e9d5ff',300:'#d8b4fe',400:'#c084fc',500:'#a855f7',600:'#9333ea',700:'#7e22ce',800:'#6b21a8',900:'#581c87'},
pink: {50:'#fdf2f8',100:'#fce7f3',200:'#fbcfe8',300:'#f9a8d4',400:'#f472b6',500:'#ec4899',600:'#db2777',700:'#be185d',800:'#9d174d',900:'#831843'},
rose: {50:'#fff1f2',100:'#ffe4e6',200:'#fecdd3',300:'#fda4af',400:'#fb7185',500:'#f43f5e',600:'#e11d48',700:'#be123c',800:'#9f1239',900:'#881337'},
slate: {50:'#f8fafc',100:'#f1f5f9',200:'#e2e8f0',300:'#cbd5e1',400:'#94a3b8',500:'#64748b',600:'#475569',700:'#334155',800:'#1e293b',900:'#0f172a'},
gray: {50:'#f9fafb',100:'#f3f4f6',200:'#e5e7eb',300:'#d1d5db',400:'#9ca3af',500:'#6b7280',600:'#4b5563',700:'#374151',800:'#1f2937',900:'#111827'},
zinc: {50:'#fafafa',100:'#f4f4f5',200:'#e4e4e7',300:'#d4d4d8',400:'#a1a1aa',500:'#71717a',600:'#52525b',700:'#3f3f46',800:'#27272a',900:'#18181b'},
stone: {50:'#fafaf9',100:'#f5f5f4',200:'#e7e5e4',300:'#d6d3d1',400:'#a8a29e',500:'#78716c',600:'#57534e',700:'#44403c',800:'#292524',900:'#1c1917'},
};
var NC = { white:'#fff', black:'#000', transparent:'transparent', current:'currentColor' };
function color(name, shade) {
if (NC[name]) return NC[name];
return P[name] && P[name][shade] ? P[name][shade] : null;
}
// ─── Static (named) class lookup ────────────────────────────────────────────
var STATIC = {
// Display
'make-block':'display:block','make-inline':'display:inline','make-inline-block':'display:inline-block',
'make-flex':'display:flex','make-inline-flex':'display:inline-flex','make-grid':'display:grid',
'make-inline-grid':'display:inline-grid','make-table':'display:table','make-hidden':'display:none',
'make-contents':'display:contents',
// Visibility
'make-visible':'visibility:visible','make-invisible':'visibility:hidden','make-collapse':'visibility:collapse',
// Flex direction
'flex-row':'flex-direction:row','flex-row-reverse':'flex-direction:row-reverse',
'flex-column':'flex-direction:column','flex-column-reverse':'flex-direction:column-reverse',
// Flex wrap
'flex-wrap':'flex-wrap:wrap','flex-wrap-reverse':'flex-wrap:wrap-reverse','flex-nowrap':'flex-wrap:nowrap',
// Flex grow/shrink
'flex-grow':'flex-grow:1','flex-grow-none':'flex-grow:0','flex-shrink':'flex-shrink:1',
'flex-shrink-none':'flex-shrink:0','flex-auto':'flex:1 1 auto','flex-initial':'flex:0 1 auto',
'flex-none':'flex:none','flex-equal':'flex:1',
// Align items
'align-start':'align-items:flex-start','align-end':'align-items:flex-end',
'align-center':'align-items:center','align-stretch':'align-items:stretch','align-baseline':'align-items:baseline',
// Align self
'self-start':'align-self:flex-start','self-end':'align-self:flex-end','self-center':'align-self:center',
'self-stretch':'align-self:stretch','self-baseline':'align-self:baseline','self-auto':'align-self:auto',
// Align content
'content-start':'align-content:flex-start','content-end':'align-content:flex-end',
'content-center':'align-content:center','content-stretch':'align-content:stretch',
'content-between':'align-content:space-between','content-around':'align-content:space-around',
'content-evenly':'align-content:space-evenly',
// Justify
'justify-start':'justify-content:flex-start','justify-end':'justify-content:flex-end',
'justify-center':'justify-content:center','justify-between':'justify-content:space-between',
'justify-around':'justify-content:space-around','justify-evenly':'justify-content:space-evenly',
'justify-items-start':'justify-items:start','justify-items-end':'justify-items:end',
'justify-items-center':'justify-items:center','justify-items-stretch':'justify-items:stretch',
'justify-self-start':'justify-self:start','justify-self-end':'justify-self:end',
'justify-self-center':'justify-self:center','justify-self-stretch':'justify-self:stretch',
'justify-self-auto':'justify-self:auto',
'place-center':'place-items:center;place-content:center',
'place-stretch':'place-items:stretch',
// Order
'order-first':'order:-9999','order-last':'order:9999','order-none':'order:0',
// Grid cols/rows
'grid-cols-none':'grid-template-columns:none',
'grid-flow-row':'grid-auto-flow:row','grid-flow-col':'grid-auto-flow:column','grid-flow-dense':'grid-auto-flow:dense',
'span-col-full':'grid-column:1 / -1','span-row-full':'grid-row:1 / -1',
// Margin auto
'center-margin':'margin:0 auto','add-margin-auto':'margin:auto',
'add-margin-top-auto':'margin-top:auto','add-margin-bottom-auto':'margin-bottom:auto',
'add-margin-left-auto':'margin-left:auto','add-margin-right-auto':'margin-right:auto',
'add-margin-x-auto':'margin-left:auto;margin-right:auto',
'add-margin-y-auto':'margin-top:auto;margin-bottom:auto',
// Border styles
'border-solid':'border-style:solid','border-dashed':'border-style:dashed',
'border-dotted':'border-style:dotted','border-double':'border-style:double',
'border-hidden':'border-style:hidden','border-none':'border-style:none',
// Border radius named
'make-circle':'border-radius:50%','make-pill':'border-radius:9999px',
// Sizing special
'set-width-full':'width:100%','set-width-screen':'width:100vw','set-width-auto':'width:auto',
'set-width-min':'width:min-content','set-width-max':'width:max-content','set-width-fit':'width:fit-content',
'set-height-full':'height:100%','set-height-screen':'height:100vh','set-height-auto':'height:auto',
'set-height-min':'height:min-content','set-height-max':'height:max-content','set-height-fit':'height:fit-content',
'min-width-full':'min-width:100%','max-width-full':'max-width:100%',
'min-width-screen':'min-width:100vw','max-width-screen':'max-width:100vw',
'min-width-none':'min-width:0','max-width-none':'max-width:none',
'min-height-full':'min-height:100%','max-height-full':'max-height:100%',
'min-height-screen':'min-height:100vh','max-height-screen':'max-height:100vh',
// Position
'position-static':'position:static','position-relative':'position:relative',
'position-absolute':'position:absolute','position-fixed':'position:fixed','position-sticky':'position:sticky',
'pin-center':'top:50%;left:50%;transform:translate(-50%,-50%)',
'pin-center-x':'left:50%;transform:translateX(-50%)',
'pin-center-y':'top:50%;transform:translateY(-50%)',
'pin-top-full':'top:100%','pin-bottom-full':'bottom:100%',
'pin-left-full':'left:100%','pin-right-full':'right:100%',
'pin-top-auto':'top:auto','pin-bottom-auto':'bottom:auto',
'pin-left-auto':'left:auto','pin-right-auto':'right:auto',
// Overflow
'overflow-auto':'overflow:auto','overflow-hidden':'overflow:hidden','overflow-scroll':'overflow:scroll',
'overflow-visible':'overflow:visible','overflow-clip':'overflow:clip',
'overflow-x-auto':'overflow-x:auto','overflow-x-hidden':'overflow-x:hidden',
'overflow-x-scroll':'overflow-x:scroll','overflow-x-visible':'overflow-x:visible',
'overflow-y-auto':'overflow-y:auto','overflow-y-hidden':'overflow-y:hidden',
'overflow-y-scroll':'overflow-y:scroll','overflow-y-visible':'overflow-y:visible',
// Z-index auto
'layer-auto':'z-index:auto',
// Text
'text-thin':'font-weight:100','text-extra-light':'font-weight:200','text-light':'font-weight:300',
'text-normal':'font-weight:400','text-medium':'font-weight:500','text-semibold':'font-weight:600',
'text-bold':'font-weight:700','text-extra-bold':'font-weight:800','text-black-weight':'font-weight:900',
'text-italic':'font-style:italic','text-not-italic':'font-style:normal',
'font-sans':"font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif",
'font-serif':"font-family:ui-serif,Georgia,Cambria,'Times New Roman',Times,serif",
'font-mono':"font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace",
'text-left':'text-align:left','text-center':'text-align:center','text-right':'text-align:right',
'text-justify':'text-align:justify','text-start':'text-align:start','text-end':'text-align:end',
'text-underline':'text-decoration:underline','text-overline':'text-decoration:overline',
'text-strikethrough':'text-decoration:line-through','text-no-decoration':'text-decoration:none',
'text-uppercase':'text-transform:uppercase','text-lowercase':'text-transform:lowercase',
'text-capitalize':'text-transform:capitalize','text-no-transform':'text-transform:none',
'text-truncate':'overflow:hidden;text-overflow:ellipsis;white-space:nowrap',
'text-clip':'text-overflow:clip','text-ellipsis':'text-overflow:ellipsis',
'text-wrap':'white-space:normal','text-nowrap':'white-space:nowrap',
'text-pre':'white-space:pre','text-pre-wrap':'white-space:pre-wrap','text-pre-line':'white-space:pre-line',
'text-break-word':'word-break:break-word;overflow-wrap:break-word','text-break-all':'word-break:break-all',
'line-height-none':'line-height:1','line-height-tight':'line-height:1.25',
'line-height-snug':'line-height:1.375','line-height-normal':'line-height:1.5',
'line-height-relaxed':'line-height:1.625','line-height-loose':'line-height:2',
'letter-space-tight':'letter-spacing:-0.05em','letter-space-snug':'letter-spacing:-0.025em',
'letter-space-normal':'letter-spacing:0em','letter-space-wide':'letter-spacing:0.025em',
'letter-space-wider':'letter-spacing:0.05em','letter-space-widest':'letter-spacing:0.1em',
// Transforms
'flip-horizontal':'transform:scaleX(-1)','flip-vertical':'transform:scaleY(-1)',
'rotate-45':'transform:rotate(45deg)','rotate-90':'transform:rotate(90deg)',
'rotate-135':'transform:rotate(135deg)','rotate-180':'transform:rotate(180deg)',
'rotate-270':'transform:rotate(270deg)','rotate-minus-45':'transform:rotate(-45deg)',
'rotate-minus-90':'transform:rotate(-90deg)',
'scale-75':'transform:scale(0.75)','scale-90':'transform:scale(0.90)',
'scale-95':'transform:scale(0.95)','scale-100':'transform:scale(1)',
'scale-105':'transform:scale(1.05)','scale-110':'transform:scale(1.10)',
'scale-125':'transform:scale(1.25)','scale-150':'transform:scale(1.50)',
'skew-x-3':'transform:skewX(3deg)','skew-x-6':'transform:skewX(6deg)','skew-x-12':'transform:skewX(12deg)',
'skew-y-3':'transform:skewY(3deg)','skew-y-6':'transform:skewY(6deg)','skew-y-12':'transform:skewY(12deg)',
// Transitions
'transition-fast':'transition:all 0.15s ease','transition-normal':'transition:all 0.3s ease',
'transition-slow':'transition:all 0.5s ease','transition-none':'transition:none',
'transition-colors':'transition:color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease',
'transition-opacity':'transition:opacity 0.3s ease','transition-transform':'transition:transform 0.3s ease',
// Animations
// Core animations
'animate-spin':'animation:santy-spin 1s linear infinite',
'animate-ping':'animation:santy-ping 1s cubic-bezier(0,0,.2,1) infinite',
'animate-pulse':'animation:santy-pulse 2s cubic-bezier(.4,0,.6,1) infinite',
'animate-bounce':'animation:santy-bounce 1s infinite',
// Attention seekers
'animate-flash':'animation:santy-flash 1s ease both',
'animate-rubber-band':'animation:santy-rubber-band 1s ease both',
'animate-shake-x':'animation:santy-shake-x 1s ease both',
'animate-shake-y':'animation:santy-shake-y 1s ease both',
'animate-shake-head':'animation:santy-shake-head 1s ease-in-out both',
'animate-swing':'animation:santy-swing 1s ease both;transform-origin:top center',
'animate-tada':'animation:santy-tada 1s ease both',
'animate-wobble':'animation:santy-wobble 1s ease both',
'animate-jelly':'animation:santy-jelly 1s ease both',
'animate-heartbeat':'animation:santy-heartbeat 1.3s ease-in-out both',
// Fade in
'animate-fade-in':'animation:santy-fade-in 0.5s ease both',
'animate-fade-in-from-top':'animation:santy-fade-in-from-top 0.5s ease both',
'animate-fade-in-from-bottom':'animation:santy-fade-in-from-bottom 0.5s ease both',
'animate-fade-in-from-left':'animation:santy-fade-in-from-left 0.5s ease both',
'animate-fade-in-from-right':'animation:santy-fade-in-from-right 0.5s ease both',
'animate-fade-in-top-left':'animation:santy-fade-in-top-left 0.5s ease both',
'animate-fade-in-top-right':'animation:santy-fade-in-top-right 0.5s ease both',
'animate-fade-in-bottom-left':'animation:santy-fade-in-bottom-left 0.5s ease both',
'animate-fade-in-bottom-right':'animation:santy-fade-in-bottom-right 0.5s ease both',
// Fade out
'animate-fade-out':'animation:santy-fade-out 0.5s ease both',
'animate-fade-out-to-top':'animation:santy-fade-out-to-top 0.5s ease both',
'animate-fade-out-to-bottom':'animation:santy-fade-out-to-bottom 0.5s ease both',
'animate-fade-out-to-left':'animation:santy-fade-out-to-left 0.5s ease both',
'animate-fade-out-to-right':'animation:santy-fade-out-to-right 0.5s ease both',
'animate-fade-out-top-left':'animation:santy-fade-out-top-left 0.5s ease both',
'animate-fade-out-top-right':'animation:santy-fade-out-top-right 0.5s ease both',
'animate-fade-out-bottom-left':'animation:santy-fade-out-bottom-left 0.5s ease both',
'animate-fade-out-bottom-right':'animation:santy-fade-out-bottom-right 0.5s ease both',
// Bounce in
'animate-bounce-in':'animation:santy-bounce-in 0.75s ease both',
'animate-bounce-in-from-top':'animation:santy-bounce-in-from-top 0.75s ease both',
'animate-bounce-in-from-bottom':'animation:santy-bounce-in-from-bottom 0.75s ease both',
'animate-bounce-in-from-left':'animation:santy-bounce-in-from-left 0.75s ease both',
'animate-bounce-in-from-right':'animation:santy-bounce-in-from-right 0.75s ease both',
// Bounce out
'animate-bounce-out':'animation:santy-bounce-out 0.75s ease both',
'animate-bounce-out-to-top':'animation:santy-bounce-out-to-top 0.75s ease both',
'animate-bounce-out-to-bottom':'animation:santy-bounce-out-to-bottom 0.75s ease both',
'animate-bounce-out-to-left':'animation:santy-bounce-out-to-left 0.75s ease both',
'animate-bounce-out-to-right':'animation:santy-bounce-out-to-right 0.75s ease both',
// Slide in
'animate-slide-in-from-top':'animation:santy-slide-in-from-top 0.4s ease both',
'animate-slide-in-from-bottom':'animation:santy-slide-in-from-bottom 0.4s ease both',
'animate-slide-in-from-left':'animation:santy-slide-in-from-left 0.4s ease both',
'animate-slide-in-from-right':'animation:santy-slide-in-from-right 0.4s ease both',
// Slide out
'animate-slide-out-to-top':'animation:santy-slide-out-to-top 0.4s ease both',
'animate-slide-out-to-bottom':'animation:santy-slide-out-to-bottom 0.4s ease both',
'animate-slide-out-to-left':'animation:santy-slide-out-to-left 0.4s ease both',
'animate-slide-out-to-right':'animation:santy-slide-out-to-right 0.4s ease both',
// Zoom in
'animate-zoom-in':'animation:santy-zoom-in 0.3s ease both',
'animate-zoom-in-from-top':'animation:santy-zoom-in-from-top 0.5s ease both',
'animate-zoom-in-from-bottom':'animation:santy-zoom-in-from-bottom 0.5s ease both',
'animate-zoom-in-from-left':'animation:santy-zoom-in-from-left 0.5s ease both',
'animate-zoom-in-from-right':'animation:santy-zoom-in-from-right 0.5s ease both',
// Zoom out
'animate-zoom-out':'animation:santy-zoom-out 0.3s ease both',
'animate-zoom-out-to-top':'animation:santy-zoom-out-to-top 0.5s ease both',
'animate-zoom-out-to-bottom':'animation:santy-zoom-out-to-bottom 0.5s ease both',
'animate-zoom-out-to-left':'animation:santy-zoom-out-to-left 0.5s ease both',
'animate-zoom-out-to-right':'animation:santy-zoom-out-to-right 0.5s ease both',
// Flip
'animate-flip':'animation:santy-flip 1s ease both;backface-visibility:visible',
'animate-flip-in-x':'animation:santy-flip-in-x 0.75s ease both;backface-visibility:visible',
'animate-flip-in-y':'animation:santy-flip-in-y 0.75s ease both;backface-visibility:visible',
'animate-flip-out-x':'animation:santy-flip-out-x 0.75s ease both;backface-visibility:visible',
'animate-flip-out-y':'animation:santy-flip-out-y 0.75s ease both;backface-visibility:visible',
// Rotate in
'animate-rotate-in':'animation:santy-rotate-in 0.6s ease both',
'animate-rotate-in-from-top-left':'animation:santy-rotate-in-from-top-left 0.6s ease both;transform-origin:left top',
'animate-rotate-in-from-top-right':'animation:santy-rotate-in-from-top-right 0.6s ease both;transform-origin:right top',
'animate-rotate-in-from-bottom-left':'animation:santy-rotate-in-from-bottom-left 0.6s ease both;transform-origin:left bottom',
'animate-rotate-in-from-bottom-right':'animation:santy-rotate-in-from-bottom-right 0.6s ease both;transform-origin:right bottom',
// Rotate out
'animate-rotate-out':'animation:santy-rotate-out 0.6s ease both',
'animate-rotate-out-to-top-left':'animation:santy-rotate-out-to-top-left 0.6s ease both;transform-origin:left top',
'animate-rotate-out-to-top-right':'animation:santy-rotate-out-to-top-right 0.6s ease both;transform-origin:right top',
'animate-rotate-out-to-bottom-left':'animation:santy-rotate-out-to-bottom-left 0.6s ease both;transform-origin:left bottom',
'animate-rotate-out-to-bottom-right':'animation:santy-rotate-out-to-bottom-right 0.6s ease both;transform-origin:right bottom',
// Back in
'animate-back-in-from-top':'animation:santy-back-in-from-top 0.7s ease both',
'animate-back-in-from-bottom':'animation:santy-back-in-from-bottom 0.7s ease both',
'animate-back-in-from-left':'animation:santy-back-in-from-left 0.7s ease both',
'animate-back-in-from-right':'animation:santy-back-in-from-right 0.7s ease both',
// Back out
'animate-back-out-to-top':'animation:santy-back-out-to-top 0.7s ease both',
'animate-back-out-to-bottom':'animation:santy-back-out-to-bottom 0.7s ease both',
'animate-back-out-to-left':'animation:santy-back-out-to-left 0.7s ease both',
'animate-back-out-to-right':'animation:santy-back-out-to-right 0.7s ease both',
// Light speed
'animate-speed-in-from-left':'animation:santy-speed-in-from-left 0.5s ease-out both',
'animate-speed-in-from-right':'animation:santy-speed-in-from-right 0.5s ease-out both',
'animate-speed-out-to-left':'animation:santy-speed-out-to-left 0.5s ease-in both',
'animate-speed-out-to-right':'animation:santy-speed-out-to-right 0.5s ease-in both',
// Specials
'animate-hinge':'animation:santy-hinge 2s ease both;transform-origin:top left',
'animate-jack-in-box':'animation:santy-jack-in-box 1s ease both;transform-origin:center bottom',
'animate-roll-in':'animation:santy-roll-in 0.6s ease both',
'animate-roll-out':'animation:santy-roll-out 0.6s ease both',
// Backwards compat aliases
'animate-slide-up':'animation:santy-slide-in-from-bottom 0.4s ease both',
'animate-slide-down':'animation:santy-slide-in-from-top 0.4s ease both',
// Animation helpers
'animation-speed-fastest':'animation-duration:0.3s',
'animation-speed-fast':'animation-duration:0.5s',
'animation-speed-normal':'animation-duration:1s',
'animation-speed-slow':'animation-duration:1.5s',
'animation-speed-slowest':'animation-duration:2s',
'animation-speed-glacial':'animation-duration:3s',
'animation-delay-100':'animation-delay:0.1s',
'animation-delay-200':'animation-delay:0.2s',
'animation-delay-300':'animation-delay:0.3s',
'animation-delay-400':'animation-delay:0.4s',
'animation-delay-500':'animation-delay:0.5s',
'animation-delay-600':'animation-delay:0.6s',
'animation-delay-700':'animation-delay:0.7s',
'animation-delay-800':'animation-delay:0.8s',
'animation-delay-900':'animation-delay:0.9s',
'animation-delay-1000':'animation-delay:1s',
'animation-delay-1500':'animation-delay:1.5s',
'animation-delay-2000':'animation-delay:2s',
'animation-delay-3000':'animation-delay:3s',
'animation-loop-1':'animation-iteration-count:1',
'animation-loop-2':'animation-iteration-count:2',
'animation-loop-3':'animation-iteration-count:3',
'animation-loop-4':'animation-iteration-count:4',
'animation-loop-5':'animation-iteration-count:5',
'animation-loop-forever':'animation-iteration-count:infinite',
'animation-fill-none':'animation-fill-mode:none',
'animation-fill-forwards':'animation-fill-mode:forwards',
'animation-fill-backwards':'animation-fill-mode:backwards',
'animation-fill-both':'animation-fill-mode:both',
'animation-ease':'animation-timing-function:ease',
'animation-ease-in':'animation-timing-function:ease-in',
'animation-ease-out':'animation-timing-function:ease-out',
'animation-ease-in-out':'animation-timing-function:ease-in-out',
'animation-linear':'animation-timing-function:linear',
'animation-running':'animation-play-state:running',
'animation-paused':'animation-play-state:paused','animation-none':'animation:none',
// Filters
'blur-sm':'filter:blur(4px)','blur':'filter:blur(8px)','blur-md':'filter:blur(12px)',
'blur-lg':'filter:blur(16px)','blur-xl':'filter:blur(24px)','blur-none':'filter:blur(0)',
'grayscale':'filter:grayscale(100%)','grayscale-0':'filter:grayscale(0)',
'sepia':'filter:sepia(100%)','sepia-0':'filter:sepia(0)',
'invert':'filter:invert(100%)','invert-0':'filter:invert(0)',
// Shadows
'add-shadow-sm':'box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)',
'add-shadow':'box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)',
'add-shadow-md':'box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)',
'add-shadow-lg':'box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)',
'add-shadow-xl':'box-shadow:0 25px 50px -12px rgba(0,0,0,.25)',
'add-shadow-inner':'box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.06)',
'add-shadow-none':'box-shadow:none','no-shadow':'box-shadow:none',
'drop-shadow-sm':'filter:drop-shadow(0 1px 1px rgba(0,0,0,.05))',
'drop-shadow':'filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))',
'drop-shadow-md':'filter:drop-shadow(0 4px 3px rgba(0,0,0,.07))',
'drop-shadow-lg':'filter:drop-shadow(0 10px 8px rgba(0,0,0,.04))',
'drop-shadow-none':'filter:drop-shadow(0 0 #0000)',
'text-shadow-sm':'text-shadow:0 1px 2px rgba(0,0,0,.2)',
'text-shadow':'text-shadow:0 2px 4px rgba(0,0,0,.3)',
'text-shadow-lg':'text-shadow:0 4px 8px rgba(0,0,0,.4)',
'text-shadow-none':'text-shadow:none',
// Cursor
'cursor-auto':'cursor:auto','cursor-default':'cursor:default','cursor-pointer':'cursor:pointer',
'cursor-wait':'cursor:wait','cursor-text':'cursor:text','cursor-move':'cursor:move',
'cursor-not-allowed':'cursor:not-allowed','cursor-crosshair':'cursor:crosshair',
'cursor-grab':'cursor:grab','cursor-grabbing':'cursor:grabbing',
'cursor-zoom-in':'cursor:zoom-in','cursor-zoom-out':'cursor:zoom-out',
'cursor-help':'cursor:help','cursor-none':'cursor:none',
// Object fit
'fit-cover':'object-fit:cover','fit-contain':'object-fit:contain',
'fit-fill':'object-fit:fill','fit-none':'object-fit:none','fit-scale':'object-fit:scale-down',
// Aspect ratio
'ratio-square':'aspect-ratio:1/1','ratio-video':'aspect-ratio:16/9',
'ratio-portrait':'aspect-ratio:9/16','ratio-4-3':'aspect-ratio:4/3',
'ratio-3-2':'aspect-ratio:3/2','ratio-21-9':'aspect-ratio:21/9','ratio-auto':'aspect-ratio:auto',
// Misc
'pointer-none':'pointer-events:none','pointer-auto':'pointer-events:auto','pointer-all':'pointer-events:all',
'select-none':'user-select:none','select-text':'user-select:text',
'select-all':'user-select:all','select-auto':'user-select:auto',
'resize-none':'resize:none','resize':'resize:both','resize-x':'resize:horizontal','resize-y':'resize:vertical',
'appearance-none':'appearance:none;-webkit-appearance:none','appearance-auto':'appearance:auto',
'outline-none':'outline:none','outline':'outline:2px solid currentColor',
'outline-dashed':'outline:2px dashed currentColor',
'outline-offset-2':'outline-offset:2px','outline-offset-4':'outline-offset:4px',
'list-none':'list-style-type:none;padding-left:0','list-disc':'list-style-type:disc',
'list-decimal':'list-style-type:decimal','list-inside':'list-style-position:inside',
'list-outside':'list-style-position:outside',
'table-auto':'table-layout:auto','table-fixed':'table-layout:fixed',
'border-collapse':'border-collapse:collapse','border-separate':'border-collapse:separate',
'sr-only':'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0',
'not-sr-only':'position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal',
'isolate':'isolation:isolate','isolation-auto':'isolation:auto',
'will-change-auto':'will-change:auto','will-change-scroll':'will-change:scroll-position',
'will-change-contents':'will-change:contents','will-change-transform':'will-change:transform',
// bg
'bg-top':'background-position:top','bg-bottom':'background-position:bottom',
'bg-left':'background-position:left','bg-right':'background-position:right',
'bg-center':'background-position:center','bg-cover':'background-size:cover',
'bg-contain':'background-size:contain','bg-auto':'background-size:auto',
'bg-repeat':'background-repeat:repeat','bg-no-repeat':'background-repeat:no-repeat',
'bg-fixed':'background-attachment:fixed','bg-local':'background-attachment:local',
'bg-clip-text':'background-clip:text;-webkit-background-clip:text',
// Named colors
'color-white':'color:#fff','color-black':'color:#000',
'color-transparent':'color:transparent','color-current':'color:currentColor',
'background-white':'background-color:#fff','background-black':'background-color:#000',
'background-transparent':'background-color:transparent',
'border-color-white':'border-color:#fff','border-color-black':'border-color:#000',
'border-color-transparent':'border-color:transparent',
// Blend modes
'blend-normal':'mix-blend-mode:normal','blend-multiply':'mix-blend-mode:multiply',
'blend-screen':'mix-blend-mode:screen','blend-overlay':'mix-blend-mode:overlay',
'blend-darken':'mix-blend-mode:darken','blend-lighten':'mix-blend-mode:lighten',
'blend-difference':'mix-blend-mode:difference','blend-exclusion':'mix-blend-mode:exclusion',
'blend-hue':'mix-blend-mode:hue','blend-saturation':'mix-blend-mode:saturation',
'blend-color':'mix-blend-mode:color','blend-luminosity':'mix-blend-mode:luminosity',
};
// ─── Numeric pattern rules ────────────────────────────────────────────────
// Each rule: [regex, (matches...) => css_props_string | null]
var RULES = [
// Padding
[/^add-padding-(\d+(?:\.\d+)?)$/, function(n){ return 'padding:'+n+'px'; }],
[/^add-padding-top-(\d+(?:\.\d+)?)$/, function(n){ return 'padding-top:'+n+'px'; }],
[/^add-padding-bottom-(\d+(?:\.\d+)?)$/, function(n){ return 'padding-bottom:'+n+'px'; }],
[/^add-padding-left-(\d+(?:\.\d+)?)$/, function(n){ return 'padding-left:'+n+'px'; }],
[/^add-padding-right-(\d+(?:\.\d+)?)$/, function(n){ return 'padding-right:'+n+'px'; }],
[/^add-padding-x-(\d+(?:\.\d+)?)$/, function(n){ return 'padding-left:'+n+'px;padding-right:'+n+'px'; }],
[/^add-padding-y-(\d+(?:\.\d+)?)$/, function(n){ return 'padding-top:'+n+'px;padding-bottom:'+n+'px'; }],
// Margin
[/^add-margin-(\d+(?:\.\d+)?)$/, function(n){ return 'margin:'+n+'px'; }],
[/^add-margin-top-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-top:'+n+'px'; }],
[/^add-margin-bottom-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-bottom:'+n+'px'; }],
[/^add-margin-left-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-left:'+n+'px'; }],
[/^add-margin-right-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-right:'+n+'px'; }],
[/^add-margin-x-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-left:'+n+'px;margin-right:'+n+'px'; }],
[/^add-margin-y-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-top:'+n+'px;margin-bottom:'+n+'px'; }],
// Negative margin
[/^subtract-margin-(\d+(?:\.\d+)?)$/, function(n){ return 'margin:-'+n+'px'; }],
[/^subtract-margin-top-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-top:-'+n+'px'; }],
[/^subtract-margin-bottom-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-bottom:-'+n+'px'; }],
[/^subtract-margin-left-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-left:-'+n+'px'; }],
[/^subtract-margin-right-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-right:-'+n+'px'; }],
[/^subtract-margin-x-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-left:-'+n+'px;margin-right:-'+n+'px'; }],
[/^subtract-margin-y-(\d+(?:\.\d+)?)$/, function(n){ return 'margin-top:-'+n+'px;margin-bottom:-'+n+'px'; }],
// Gap
[/^gap-(\d+(?:\.\d+)?)$/, function(n){ return 'gap:'+n+'px'; }],
[/^gap-x-(\d+(?:\.\d+)?)$/, function(n){ return 'column-gap:'+n+'px'; }],
[/^gap-y-(\d+(?:\.\d+)?)$/, function(n){ return 'row-gap:'+n+'px'; }],
// Border width
[/^add-border-(\d+(?:\.\d+)?)$/, function(n){ return 'border:'+n+'px solid'; }],
[/^add-border-top-(\d+(?:\.\d+)?)$/, function(n){ return 'border-top:'+n+'px solid'; }],
[/^add-border-bottom-(\d+(?:\.\d+)?)$/, function(n){ return 'border-bottom:'+n+'px solid'; }],
[/^add-border-left-(\d+(?:\.\d+)?)$/, function(n){ return 'border-left:'+n+'px solid'; }],
[/^add-border-right-(\d+(?:\.\d+)?)$/, function(n){ return 'border-right:'+n+'px solid'; }],
[/^add-border-x-(\d+(?:\.\d+)?)$/, function(n){ return 'border-left:'+n+'px solid;border-right:'+n+'px solid'; }],
[/^add-border-y-(\d+(?:\.\d+)?)$/, function(n){ return 'border-top:'+n+'px solid;border-bottom:'+n+'px solid'; }],
// Border radius
[/^round-corners-(\d+(?:\.\d+)?)$/, function(n){ return 'border-radius:'+n+'px'; }],
[/^round-top-(\d+(?:\.\d+)?)$/, function(n){ return 'border-top-left-radius:'+n+'px;border-top-right-radius:'+n+'px'; }],
[/^round-bottom-(\d+(?:\.\d+)?)$/, function(n){ return 'border-bottom-left-radius:'+n+'px;border-bottom-right-radius:'+n+'px'; }],
[/^round-left-(\d+(?:\.\d+)?)$/, function(n){ return 'border-top-left-radius:'+n+'px;border-bottom-left-radius:'+n+'px'; }],
[/^round-right-(\d+(?:\.\d+)?)$/, function(n){ return 'border-top-right-radius:'+n+'px;border-bottom-right-radius:'+n+'px'; }],
// Sizing
[/^set-width-(\d+(?:\.\d+)?)$/, function(n){ return 'width:'+n+'px'; }],
[/^set-height-(\d+(?:\.\d+)?)$/, function(n){ return 'height:'+n+'px'; }],
[/^min-width-(\d+(?:\.\d+)?)$/, function(n){ return 'min-width:'+n+'px'; }],
[/^max-width-(\d+(?:\.\d+)?)$/, function(n){ return 'max-width:'+n+'px'; }],
[/^min-height-(\d+(?:\.\d+)?)$/, function(n){ return 'min-height:'+n+'px'; }],
[/^max-height-(\d+(?:\.\d+)?)$/, function(n){ return 'max-height:'+n+'px'; }],
// Fractional widths set-width-1-of-3
[/^set-width-(\d+)-of-(\d+)$/, function(n,d){
var pct = (parseInt(n,10)/parseInt(d,10)*100).toFixed(6).replace(/\.?0+$/,'');
return 'width:'+pct+'%';
}],
[/^set-height-(\d+)-of-(\d+)$/, function(n,d){
var pct = (parseInt(n,10)/parseInt(d,10)*100).toFixed(6).replace(/\.?0+$/,'');
return 'height:'+pct+'%';
}],
// Font size
[/^set-text-(\d+(?:\.\d+)?)$/, function(n){ return 'font-size:'+n+'px'; }],
// Opacity
[/^opacity-(\d+(?:\.\d+)?)$/, function(n){ return 'opacity:'+parseFloat(n)/100; }],
// Z-index (layer)
[/^layer-(-?\d+)$/, function(n){ return 'z-index:'+n; }],
// Positioning
[/^pin-top-(\d+(?:\.\d+)?)$/, function(n){ return 'top:'+n+'px'; }],
[/^pin-bottom-(\d+(?:\.\d+)?)$/, function(n){ return 'bottom:'+n+'px'; }],
[/^pin-left-(\d+(?:\.\d+)?)$/, function(n){ return 'left:'+n+'px'; }],
[/^pin-right-(\d+(?:\.\d+)?)$/, function(n){ return 'right:'+n+'px'; }],
[/^pin-all-(\d+(?:\.\d+)?)$/, function(n){ return 'top:'+n+'px;right:'+n+'px;bottom:'+n+'px;left:'+n+'px'; }],
// Letter spacing
[/^add-letter-space-(\d+(?:\.\d+)?)$/, function(n){ return 'letter-spacing:'+n+'px'; }],
[/^subtract-letter-space-(\d+(?:\.\d+)?)$/, function(n){ return 'letter-spacing:-'+n+'px'; }],
// Grid
[/^grid-cols-(\d+)$/, function(n){ return 'grid-template-columns:repeat('+n+',minmax(0,1fr))'; }],
[/^grid-rows-(\d+)$/, function(n){ return 'grid-template-rows:repeat('+n+',minmax(0,1fr))'; }],
[/^span-col-(\d+)$/, function(n){ return 'grid-column:span '+n+' / span '+n; }],
[/^span-row-(\d+)$/, function(n){ return 'grid-row:span '+n+' / span '+n; }],
[/^order-(\d+)$/, function(n){ return 'order:'+n; }],
[/^columns-(\d+)$/, function(n){ return 'columns:'+n; }],
// Colors
[/^color-([a-z]+)-(\d+)$/, function(name,shade){
var c = color(name, parseInt(shade,10));
return c ? 'color:'+c : null;
}],
[/^background-([a-z]+)-(\d+)$/, function(name,shade){
var c = color(name, parseInt(shade,10));
return c ? 'background-color:'+c : null;
}],
[/^border-color-([a-z]+)-(\d+)$/, function(name,shade){
var c = color(name, parseInt(shade,10));
return c ? 'border-color:'+c : null;
}],
[/^fill-([a-z]+)-(\d+)$/, function(name,shade){
var c = color(name, parseInt(shade,10));
return c ? 'fill:'+c : null;
}],
[/^stroke-([a-z]+)-(\d+)$/, function(name,shade){
var c = color(name, parseInt(shade,10));
return c ? 'stroke:'+c : null;
}],
// Filter shorthands
[/^brightness-(\d+)$/, function(n){ return 'filter:brightness('+parseFloat(n)/100+')'; }],
[/^contrast-(\d+)$/, function(n){ return 'filter:contrast('+parseFloat(n)/100+')'; }],
[/^saturate-(\d+)$/, function(n){ return 'filter:saturate('+parseFloat(n)/100+')'; }],
[/^hue-rotate-(\d+)$/, function(n){ return 'filter:hue-rotate('+n+'deg)'; }],
// Scale (arbitrary)
[/^scale-(\d+)$/, function(n){ return 'transform:scale('+parseFloat(n)/100+')'; }],
// Rotate (arbitrary)
[/^rotate-(\d+)$/, function(n){ return 'transform:rotate('+n+'deg)'; }],
// Line height (numeric)
[/^line-height-(\d+(?:-\d+)?)$/, function(n){ return 'line-height:'+n.replace('-','.'); }],
];
// ─── State variant map ────────────────────────────────────────────────────
var STATES = {
'on-hover': function(sel,props){ return '.'+sel+':hover{'+props+'}'; },
'on-focus': function(sel,props){ return '.'+sel+':focus{'+props+'}'; },
'on-active': function(sel,props){ return '.'+sel+':active{'+props+'}'; },
'on-disabled': function(sel,props){ return '.'+sel+':disabled{'+props+'}'; },
'on-checked': function(sel,props){ return '.'+sel+':checked{'+props+'}'; },
'on-first': function(sel,props){ return '.'+sel+':first-child{'+props+'}'; },
'on-last': function(sel,props){ return '.'+sel+':last-child{'+props+'}'; },
'on-odd': function(sel,props){ return '.'+sel+':nth-child(odd){'+props+'}'; },
'on-even': function(sel,props){ return '.'+sel+':nth-child(even){'+props+'}'; },
'on-placeholder': function(sel,props){ return '.'+sel+'::placeholder{'+props+'}'; },
'on-focus-within': function(sel,props){ return '.'+sel+':focus-within{'+props+'}'; },
'on-focus-visible':function(sel,props){ return '.'+sel+':focus-visible{'+props+'}'; },
'group-hover': function(sel,props){ return '.group:hover .'+sel+'{'+props+'}'; },
};
// ─── Responsive variant map ───────────────────────────────────────────────
var RESPONSIVE = {
'on-mobile': '@media (max-width:639px)',
'on-tablet': '@media (min-width:640px) and (max-width:1023px)',
'on-desktop': '@media (min-width:1024px)',
'on-wide': '@media (min-width:1280px)',
'on-ultra': '@media (min-width:1536px)',
'sm': '@media (min-width:640px)',
'md': '@media (min-width:768px)',
'lg': '@media (min-width:1024px)',
'xl': '@media (min-width:1280px)',
'xxl': '@media (min-width:1536px)',
};
// ─── Escape CSS selector ──────────────────────────────────────────────────
function esc(cls) {
return cls.replace(/[:\[\]\/%.]/g, function(c){ return '\\'+c; });
}
// ─── Generate CSS props for a base class ─────────────────────────────────
function baseProps(cls) {
if (STATIC[cls]) return STATIC[cls];
for (var i = 0; i < RULES.length; i++) {
var m = cls.match(RULES[i][0]);
if (m) {
var result = RULES[i][1].apply(null, m.slice(1));
if (result) return result;
}
}
return null;
}
// ─── Generate a full CSS rule string for a class name ────────────────────
function generateRule(cls) {
// Dark mode
if (cls.startsWith('dark:')) {
var inner = cls.slice(5);
var props = baseProps(inner);
if (!props) return null;
return '@media (prefers-color-scheme:dark){.'+esc(cls)+'{'+props+'}}';
}
// State variants (on-hover:, on-focus:, group-hover:, etc.)
for (var state in STATES) {
if (cls.startsWith(state+':')) {
var inner = cls.slice(state.length+1);
var props = baseProps(inner);
if (!props) return null;
return STATES[state](esc(cls), props);
}
}
// Responsive variants
for (var bp in RESPONSIVE) {
if (cls.startsWith(bp+':')) {
var inner = cls.slice(bp.length+1);
var props = baseProps(inner);
if (!props) return null;
return RESPONSIVE[bp]+'{.'+esc(cls)+'{'+props+'}}';
}
}
// Base class
var props = baseProps(cls);
if (!props) return null;
return '.'+esc(cls)+'{'+props+'}';
}
// ─── Keyframes (injected once) ────────────────────────────────────────────
var KEYFRAMES =
// Core
'@keyframes santy-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}'+
'@keyframes santy-ping{75%,100%{transform:scale(2);opacity:0}}'+
'@keyframes santy-pulse{0%,100%{opacity:1}50%{opacity:.5}}'+
'@keyframes santy-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}'+
'@keyframes santy-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}'+
// Attention seekers
'@keyframes santy-flash{from,50%,to{opacity:1}25%,75%{opacity:0}}'+
'@keyframes santy-rubber-band{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}'+
'@keyframes santy-shake-x{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}'+
'@keyframes santy-shake-y{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(0,-10px,0)}20%,40%,60%,80%{transform:translate3d(0,10px,0)}}'+
'@keyframes santy-shake-head{0%{transform:rotateY(0)}6.5%{transform:rotateY(-9deg)}18.5%{transform:rotateY(7deg)}31.5%{transform:rotateY(-5deg)}43.5%{transform:rotateY(3deg)}50%{transform:rotateY(0)}}'+
'@keyframes santy-swing{20%{transform:rotate3d(0,0,1,15deg)}40%{transform:rotate3d(0,0,1,-10deg)}60%{transform:rotate3d(0,0,1,5deg)}80%{transform:rotate3d(0,0,1,-5deg)}to{transform:rotate3d(0,0,1,0deg)}}'+
'@keyframes santy-tada{from{transform:scale3d(1,1,1)}10%,20%{transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}to{transform:scale3d(1,1,1)}}'+
'@keyframes santy-wobble{from{transform:translate3d(0,0,0)}15%{transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}to{transform:translate3d(0,0,0)}}'+
'@keyframes santy-jelly{from,11.1%,to{transform:translate3d(0,0,0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}'+
'@keyframes santy-heartbeat{from{transform:scale(1);animation-timing-function:ease-out}10%{transform:scale(1.12);animation-timing-function:ease-in}17%{transform:scale(1.08);animation-timing-function:ease-out}33%{transform:scale(1.18);animation-timing-function:ease-in}45%{transform:scale(1);animation-timing-function:ease-out}}'+
// Fade in
'@keyframes santy-fade-in{from{opacity:0}to{opacity:1}}'+
'@keyframes santy-fade-in-from-top{from{opacity:0;transform:translate3d(0,-30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}'+
'@keyframes santy-fade-in-from-bottom{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}'+
'@keyframes santy-fade-in-from-left{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}'+
'@keyframes santy-fade-in-from-right{from{opacity:0;transform:translate3d(30px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}'+
'@keyframes santy-fade-in-top-left{from{opacity:0;transform:translate3d(-30px,-30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}'+
'@keyframes santy-fade-in-top-right{from{opacity:0;transform:translate3d(30px,-30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}'+
'@keyframes santy-fade-in-bottom-left{from{opacity:0;transform:translate3d(-30px,30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}'+
'@keyframes santy-fade-in-bottom-right{from{opacity:0;transform:translate3d(30px,30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}'+
// Fade out
'@keyframes santy-fade-out{from{opacity:1}to{opacity:0}}'+
'@keyframes santy-fade-out-to-top{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-30px,0)}}'+
'@keyframes santy-fade-out-to-bottom{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,30px,0)}}'+
'@keyframes santy-fade-out-to-left{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(-30px,0,0)}}'+
'@keyframes santy-fade-out-to-right{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(30px,0,0)}}'+
'@keyframes santy-fade-out-top-left{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(-30px,-30px,0)}}'+
'@keyframes santy-fade-out-top-right{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(30px,-30px,0)}}'+
'@keyframes santy-fade-out-bottom-left{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(-30px,30px,0)}}'+
'@keyframes santy-fade-out-bottom-right{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(30px,30px,0)}}'+
// Bounce in
'@keyframes santy-bounce-in{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scale3d(1,1,1)}}'+
'@keyframes santy-bounce-in-from-top{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;transform:translate3d(0,25px,0) scaleY(.9)}75%{transform:translate3d(0,-10px,0) scaleY(.95)}90%{transform:translate3d(0,5px,0) scaleY(.985)}to{transform:translate3d(0,0,0)}}'+
'@keyframes santy-bounce-in-from-bottom{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;transform:translate3d(0,-20px,0) scaleY(.9)}75%{transform:translate3d(0,10px,0) scaleY(.95)}90%{transform:translate3d(0,-5px,0) scaleY(.985)}to{transform:translate3d(0,0,0)}}'+
'@keyframes santy-bounce-in-from-left{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;transform:translate3d(25px,0,0) scaleX(1)}75%{transform:translate3d(-10px,0,0) scaleX(.98)}90%{transform:translate3d(5px,0,0) scaleX(.995)}to{transform:translate3d(0,0,0)}}'+
'@keyframes santy-bounce-in-from-right{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px,0,0) scaleX(1)}75%{transform:translate3d(10px,0,0) scaleX(.98)}90%{transform:translate3d(-5px,0,0) scaleX(.995)}to{transform:translate3d(0,0,0)}}'+
// Bounce out
'@keyframes santy-bounce-out{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}'+
'@keyframes santy-bounce-out-to-top{20%{transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;transform:translate3d(0,-2000px,0) scaleY(3)}}'+
'@keyframes santy-bounce-out-to-bottom{20%{transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;transform:translate3d(0,2000px,0) scaleY(5)}}'+
'@keyframes santy-bounce-out-to-left{20%{opacity:1;transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;transform:translate3d(-2000px,0,0) scaleX(2)}}'+
'@keyframes santy-bounce-out-to-right{20%{opacity:1;transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;transform:translate3d(2000px,0,0) scaleX(2)}}'+
// Slide in / out
'@keyframes santy-slide-in-from-top{from{visibility:visible;transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}}'+
'@keyframes santy-slide-in-from-bottom{from{visibility:visible;transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}'+
'@keyframes santy-slide-in-from-left{from{visibility:visible;transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}'+
'@keyframes santy-slide-in-from-right{from{visibility:visible;transform:translat