// ******************************************************************* // Borders // ******************************************************************* $rounded-none: 0; $rounded-sm: 0.125rem; $rounded: 0.25rem; $rounded-md: 0.375rem; $rounded-lg: 0.5rem; $rounded-xl: 0.75rem; $rounded-2xl: 1rem; $rounded-3xl: 1.5rem; $rounded-full: 9999px; $border-0: 0; $border: 1px; $border-2: 2px; $border-4: 4px; $border-8: 8px; // ******************************************************************* // Breakpoints // ******************************************************************* $breakpoint-sm: 640px; $breakpoint-md: 768px; $breakpoint-lg: 1024px; $breakpoint-xl: 1280px; $breakpoint-2xl: 1536px; // ******************************************************************* // Colors // ******************************************************************* $transparent: transparent; $current: currentColor; $black: #000; $white: #fff; $rose-50: #fff1f2; $rose-100: #ffe4e6; $rose-200: #fecdd3; $rose-300: #fda4af; $rose-400: #fb7185; $rose-500: #f43f5e; $rose-600: #e11d48; $rose-700: #be123c; $rose-800: #9f1239; $rose-900: #881337; $pink-50: #fdf2f8; $pink-100: #fce7f3; $pink-200: #fbcfe8; $pink-300: #f9a8d4; $pink-400: #f472b6; $pink-500: #ec4899; $pink-600: #db2777; $pink-700: #be185d; $pink-800: #9d174d; $pink-900: #831843; $fuchsia-50: #fdf4ff; $fuchsia-100: #fae8ff; $fuchsia-200: #f5d0fe; $fuchsia-300: #f0abfc; $fuchsia-400: #e879f9; $fuchsia-500: #d946ef; $fuchsia-600: #c026d3; $fuchsia-700: #a21caf; $fuchsia-800: #86198f; $fuchsia-900: #701a75; $purple-50: #faf5ff; $purple-100: #f3e8ff; $purple-200: #e9d5ff; $purple-300: #d8b4fe; $purple-400: #c084fc; $purple-500: #a855f7; $purple-600: #9333ea; $purple-700: #7e22ce; $purple-800: #6b21a8; $purple-900: #581c87; $violet-50: #f5f3ff; $violet-100: #ede9fe; $violet-200: #ddd6fe; $violet-300: #c4b5fd; $violet-400: #a78bfa; $violet-500: #8b5cf6; $violet-600: #7c3aed; $violet-700: #6d28d9; $violet-800: #5b21b6; $violet-900: #4c1d95; $indigo-50: #eef2ff; $indigo-100: #e0e7ff; $indigo-200: #c7d2fe; $indigo-300: #a5b4fc; $indigo-400: #818cf8; $indigo-500: #6366f1; $indigo-600: #4f46e5; $indigo-700: #4338ca; $indigo-800: #3730a3; $indigo-900: #312e81; $blue-50: #eff6ff; $blue-100: #dbeafe; $blue-200: #bfdbfe; $blue-300: #93c5fd; $blue-400: #60a5fa; $blue-500: #3b82f6; $blue-600: #2563eb; $blue-700: #1d4ed8; $blue-800: #1e40af; $blue-900: #1e3a8a; $sky-50: #f0f9ff; $sky-100: #e0f2fe; $sky-200: #bae6fd; $sky-300: #7dd3fc; $sky-400: #38bdf8; $sky-500: #0ea5e9; $sky-600: #0284c7; $sky-700: #0369a1; $sky-800: #075985; $sky-900: #0c4a6e; $cyan-50: #ecfeff; $cyan-100: #cffafe; $cyan-200: #a5f3fc; $cyan-300: #67e8f9; $cyan-400: #22d3ee; $cyan-500: #06b6d4; $cyan-600: #0891b2; $cyan-700: #0e7490; $cyan-800: #155e75; $cyan-900: #164e63; $teal-50: #f0fdfa; $teal-100: #ccfbf1; $teal-200: #99f6e4; $teal-300: #5eead4; $teal-400: #2dd4bf; $teal-500: #14b8a6; $teal-600: #0d9488; $teal-700: #0f766e; $teal-800: #115e59; $teal-900: #134e4a; $emerald-50: #ecfdf5; $emerald-100: #d1fae5; $emerald-200: #a7f3d0; $emerald-300: #6ee7b7; $emerald-400: #34d399; $emerald-500: #10b981; $emerald-600: #059669; $emerald-700: #047857; $emerald-800: #065f46; $emerald-900: #064e3b; $green-50: #f0fdf4; $green-100: #dcfce7; $green-200: #bbf7d0; $green-300: #86efac; $green-400: #4ade80; $green-500: #22c55e; $green-600: #16a34a; $green-700: #15803d; $green-800: #166534; $green-900: #14532d; $lime-50: #f7fee7; $lime-100: #ecfccb; $lime-200: #d9f99d; $lime-300: #bef264; $lime-400: #a3e635; $lime-500: #84cc16; $lime-600: #65a30d; $lime-700: #4d7c0f; $lime-800: #3f6212; $lime-900: #365314; $yellow-50: #fefce8; $yellow-100: #fef9c3; $yellow-200: #fef08a; $yellow-300: #fde047; $yellow-400: #facc15; $yellow-500: #eab308; $yellow-600: #ca8a04; $yellow-700: #a16207; $yellow-800: #854d0e; $yellow-900: #713f12; $amber-50: #fffbeb; $amber-100: #fef3c7; $amber-200: #fde68a; $amber-300: #fcd34d; $amber-400: #fbbf24; $amber-500: #f59e0b; $amber-600: #d97706; $amber-700: #b45309; $amber-800: #92400e; $amber-900: #78350f; $orange-50: #fff7ed; $orange-100: #ffedd5; $orange-200: #fed7aa; $orange-300: #fdba74; $orange-400: #fb923c; $orange-500: #f97316; $orange-600: #ea580c; $orange-700: #c2410c; $orange-800: #9a3412; $orange-900: #7c2d12; $red-50: #fef2f2; $red-100: #fee2e2; $red-200: #fecaca; $red-300: #fca5a5; $red-400: #f87171; $red-500: #ef4444; $red-600: #dc2626; $red-700: #b91c1c; $red-800: #991b1b; $red-900: #7f1d1d; $warm-gray-50: #fafaf9; $warm-gray-100: #f5f5f4; $warm-gray-200: #e7e5e4; $warm-gray-300: #d6d3d1; $warm-gray-400: #a8a29e; $warm-gray-500: #78716c; $warm-gray-600: #57534e; $warm-gray-700: #44403c; $warm-gray-800: #292524; $warm-gray-900: #1c1917; $true-gray-50: #fafafa; $true-gray-100: #f5f5f5; $true-gray-200: #e5e5e5; $true-gray-300: #d4d4d4; $true-gray-400: #a3a3a3; $true-gray-500: #737373; $true-gray-600: #525252; $true-gray-700: #404040; $true-gray-800: #262626; $true-gray-900: #171717; $gray-50: #fafafa; $gray-100: #f4f4f5; $gray-200: #e4e4e7; $gray-300: #d4d4d8; $gray-400: #a1a1aa; $gray-500: #71717a; $gray-600: #52525b; $gray-700: #3f3f46; $gray-800: #27272a; $gray-900: #18181b; $cool-gray-50: #f9fafb; $cool-gray-100: #f3f4f6; $cool-gray-200: #e5e7eb; $cool-gray-300: #d1d5db; $cool-gray-400: #9ca3af; $cool-gray-500: #6b7280; $cool-gray-600: #4b5563; $cool-gray-700: #374151; $cool-gray-800: #1f2937; $cool-gray-900: #111827; $blue-gray-50: #f8fafc; $blue-gray-100: #f1f5f9; $blue-gray-200: #e2e8f0; $blue-gray-300: #cbd5e1; $blue-gray-400: #94a3b8; $blue-gray-500: #64748b; $blue-gray-600: #475569; $blue-gray-700: #334155; $blue-gray-800: #1e293b; $blue-gray-900: #0f172a; @function gradient($direction, $from, $to: transparent, $via: null) {} // ******************************************************************* // Effects // ******************************************************************* $shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); $shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); $shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); $shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); $shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); $shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); $shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); $shadow-none: none; $opacity-0: 0; $opacity-5: 0.05; $opacity-10: 0.1; $opacity-20: 0.2; $opacity-25: 0.25; $opacity-30: 0.3; $opacity-40: 0.4; $opacity-50: 0.5; $opacity-60: 0.6; $opacity-70: 0.7; $opacity-75: 0.75; $opacity-80: 0.8; $opacity-90: 0.9; $opacity-95: 0.95; $opacity-100: 1; // ******************************************************************* // Filters // ******************************************************************* $blur-none: blur(0); $blur-sm: blur(4px); $blur: blur(8px); $blur-md: blur(12px); $blur-lg: blur(16px); $blur-xl: blur(24px); $blur-2xl: blur(40px); $blur-3xl: blur(64px); $brightness-0: brightness(0); $brightness-50: brightness(0.5); $brightness-75: brightness(0.75); $brightness-90: brightness(0.9); $brightness-95: brightness(0.95); $brightness-100: brightness(1); $brightness-105: brightness(1.05); $brightness-110: brightness(1.1); $brightness-125: brightness(1.25); $brightness-150: brightness(1.5); $brightness-200: brightness(2); $contrast-0: contrast(0); $contrast-50: contrast(0.5); $contrast-75: contrast(0.75); $contrast-100: contrast(1); $contrast-125: contrast(1.25); $contrast-150: contrast(1.5); $contrast-200: contrast(2); $drop-shadow-none: drop-shadow(0 0 #0000); $drop-shadow-sm: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); $drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); $drop-shadow-md: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); $drop-shadow-lg: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)); $drop-shadow-xl: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)); $drop-shadow-2xl: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); $grayscale-0: grayscale(0); $grayscale: grayscale(100%); $hue-rotate-0: hue-rotate(0deg); $hue-rotate-15: hue-rotate(15deg); $hue-rotate-30: hue-rotate(30deg); $hue-rotate-60: hue-rotate(60deg); $hue-rotate-90: hue-rotate(90deg); $hue-rotate-180: hue-rotate(180deg); $invert-0: invert(0); $invert: invert(100%); $saturate-0: saturate(0); $saturate-50: saturate(0.5); $saturate-100: saturate(1); $saturate-150: saturate(1.5); $saturate-200: saturate(2); $sepia-0: sepia(0); $sepia: sepia(100%); // ******************************************************************* // Flex // ******************************************************************* $flex-1: 1 1 0%; // Allow grow and shrink, ignoring its initial size. $flex-auto: 1 1 auto; // Allow grow and shrink, considering its initial size. $flex-initial: 0 1 auto; // Allow shrink but not grow, considering its initial size. $flex-none: none; // Prevent grow or shrink. $flex-grow-0: 0; $flex-grow: 1; $flex-shrink-0: 0; $flex-shrink: 1; // ******************************************************************* // Grid // ******************************************************************* $grid-cols-1: repeat(1, minmax(0, 1fr)); $grid-cols-2: repeat(2, minmax(0, 1fr)); $grid-cols-3: repeat(3, minmax(0, 1fr)); $grid-cols-4: repeat(4, minmax(0, 1fr)); $grid-cols-5: repeat(5, minmax(0, 1fr)); $grid-cols-6: repeat(6, minmax(0, 1fr)); $grid-cols-7: repeat(7, minmax(0, 1fr)); $grid-cols-8: repeat(8, minmax(0, 1fr)); $grid-cols-9: repeat(9, minmax(0, 1fr)); $grid-cols-10: repeat(10, minmax(0, 1fr)); $grid-cols-11: repeat(11, minmax(0, 1fr)); $grid-cols-12: repeat(12, minmax(0, 1fr)); $grid-cols-none: none; $col-auto: auto; $col-span-1: span 1 / span 1; $col-span-2: span 2 / span 2; $col-span-3: span 3 / span 3; $col-span-4: span 4 / span 4; $col-span-5: span 5 / span 5; $col-span-6: span 6 / span 6; $col-span-7: span 7 / span 7; $col-span-8: span 8 / span 8; $col-span-9: span 9 / span 9; $col-span-10: span 10 / span 10; $col-span-11: span 11 / span 11; $col-span-12: span 12 / span 12; $col-span-full: calc(1 / -1); $grid-rows-1: repeat(1, minmax(0, 1fr)); $grid-rows-2: repeat(2, minmax(0, 1fr)); $grid-rows-3: repeat(3, minmax(0, 1fr)); $grid-rows-4: repeat(4, minmax(0, 1fr)); $grid-rows-5: repeat(5, minmax(0, 1fr)); $grid-rows-6: repeat(6, minmax(0, 1fr)); $grid-rows-none: none; $row-auto: auto; $row-span-1: span 1 / span 1; $row-span-2: span 2 / span 2; $row-span-3: span 3 / span 3; $row-span-4: span 4 / span 4; $row-span-5: span 5 / span 5; $row-span-6: span 6 / span 6; $row-span-full: calc(1 / -1); // ******************************************************************* // Height // ******************************************************************* $h-auto: auto; $h-1-2: 50%; $h-1-3: 33.333333%; $h-2-3: 66.666667%; $h-1-4: 25%; $h-2-4: 50%; $h-3-4: 75%; $h-1-5: 20%; $h-2-5: 40%; $h-3-5: 60%; $h-4-5: 80%; $h-1-6: 16.666667%; $h-2-6: 33.333333%; $h-3-6: 50%; $h-4-6: 66.666667%; $h-5-6: 83.333333%; $h-full: 100%; $h-screen: 100vh; $h-min: min-content; $h-max: max-content; $h-fit: fit-content; $min-h-0: 0px; $min-h-full: 100%; $min-h-screen: 100vh; $min-h-min: min-content; $min-h-max: max-content; $min-h-fit: fit-content; $max-h-full: 100%; $max-h-screen: 100vh; $max-h-min: min-content; $max-h-max: max-content; $max-h-fit: fit-content; // ******************************************************************* // Sizing // ******************************************************************* $size-px: 1px; $size-0: 0; $size-1: 0.25rem; $size-2: 0.5rem; $size-3: 0.75rem; $size-4: 1rem; $size-5: 1.25rem; $size-6: 1.5rem; $size-7: 1.75rem; $size-8: 2rem; $size-9: 2.25rem; $size-10: 2.5rem; $size-11: 2.75rem; $size-12: 3rem; $size-14: 3.5rem; $size-16: 4rem; $size-20: 5rem; $size-24: 6rem; $size-28: 7rem; $size-32: 8rem; $size-36: 9rem; $size-40: 10rem; $size-44: 11rem; $size-48: 12rem; $size-52: 13rem; $size-56: 14rem; $size-60: 15rem; $size-64: 16rem; $size-72: 18rem; $size-80: 20rem; $size-96: 24rem; // ******************************************************************* // Transform // ******************************************************************* $scale-0: 0; $scale-50: 0.50; $scale-75: 0.75; $scale-90: 0.90; $scale-95: 0.95; $scale-100: 1; $scale-105: 1.05; $scale-110: 1.10; $scale-125: 1.25; $scale-150: 1.50; $rotate-0: 0deg; $rotate-1: 1deg; $rotate-2: 2deg; $rotate-3: 3deg; $rotate-6: 6deg; $rotate-12: 12deg; $rotate-45: 45deg; $rotate-90: 90deg; $rotate-180: 180deg; $translate-1-2: 50%; $translate-1-3: 33.333333%; $translate-2-3: 66.666667%; $translate-1-4: 25%; $translate-2-4: 50%; $translate-3-4: 75%; $translate-full: 100%; $skew-0: 0deg; $skew-1: 1deg; $skew-2: 2deg; $skew-3: 3deg; $skew-6: 6deg; $skew-12: 12deg; // ******************************************************************* // Transition // ******************************************************************* $transition-none: none; $transition-all: all; $transition: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; $transition-colors: background-color, border-color, color, fill, stroke; $transition-opacity: opacity; $transition-shadow: box-shadow; $transition-transform: transform; $duration-75: 75ms; $duration-100: 100ms; $duration-150: 150ms; $duration-200: 200ms; $duration-300: 300ms; $duration-500: 500ms; $duration-700: 700ms; $duration-1000: 1000ms; $delay-75: 75ms; $delay-100: 100ms; $delay-150: 150ms; $delay-200: 200ms; $delay-300: 300ms; $delay-500: 500ms; $delay-700: 700ms; $delay-1000: 1000ms; $ease-linear: linear; $ease-in: cubic-bezier(0.4, 0, 1, 1); $ease-out: cubic-bezier(0, 0, 0.2, 1); $ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); // ******************************************************************* // Typography // ******************************************************************* $font-sans: 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"; $font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; $font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; $text-xs: 0.75rem; $text-sm: 0.875rem; $text-base: 1rem; $text-lg: 1.125rem; $text-xl: 1.25rem; $text-2xl: 1.5rem; $text-3xl: 1.875rem; $text-4xl: 2.25rem; $text-5xl: 3rem; $text-6xl: 3.75rem; $text-7xl: 4.5rem; $text-8xl: 6rem; $text-9xl: 8rem; $font-thin: 100; $font-extralight: 200; $font-light: 300; $font-normal: 400; $font-medium: 500; $font-semibold: 600; $font-bold: 700; $font-extrabold: 800; $font-black: 900; $leading-none: 1; $leading-tight: 1.25; $leading-snug: 1.375; $leading-normal: 1.5; $leading-relaxed: 1.625; $leading-loose: 2; $leading-3: .75rem; $leading-4: 1rem; $leading-5: 1.25rem; $leading-6: 1.5rem; $leading-7: 1.75rem; $leading-8: 2rem; $leading-9: 2.25rem; $leading-10: 2.5rem; $tracking-tighter: -0.05em; $tracking-tight: -0.025em; $tracking-normal: 0em; $tracking-wide: 0.025em; $tracking-wider: 0.05em; $tracking-widest: 0.1em; // ******************************************************************* // Width // ******************************************************************* $w-auto: auto; $w-1-2: 50%; $w-1-3: 33.333333%; $w-2-3: 66.666667%; $w-1-4: 25%; $w-2-4: 50%; $w-3-4: 75%; $w-1-5: 20%; $w-2-5: 40%; $w-3-5: 60%; $w-4-5: 80%; $w-1-6: 16.666667%; $w-2-6: 33.333333%; $w-3-6: 50%; $w-4-6: 66.666667%; $w-5-6: 83.333333%; $w-1-12: 8.333333%; $w-2-12: 16.666667%; $w-3-12: 25%; $w-4-12: 33.333333%; $w-5-12: 41.666667%; $w-6-12: 50%; $w-7-12: 58.333333%; $w-8-12: 66.666667%; $w-9-12: 75%; $w-10-12: 83.333333%; $w-11-12: 91.666667%; $w-full: 100%; $w-screen: 100vw; $w-min: min-content; $w-max: max-content; $w-fit: fit-content; $min-w-0: 0px; $min-w-full: 100%; $min-w-min: min-content; $min-w-max: max-content; $min-w-fit: fit-content; $max-w-none: none; $max-w-0: 0rem; $max-w-xs: 20rem; $max-w-sm: 24rem; $max-w-md: 28rem; $max-w-lg: 32rem; $max-w-xl: 36rem; $max-w-2xl: 42rem; $max-w-3xl: 48rem; $max-w-4xl: 56rem; $max-w-5xl: 64rem; $max-w-6xl: 72rem; $max-w-7xl: 80rem; $max-w-full: 100%; $max-w-min: min-content; $max-w-max: max-content; $max-w-fit: fit-content; // ******************************************************************* // Zindex // ******************************************************************* $z-auto: auto; $z-0: 0; $z-10: 10; $z-20: 20; $z-30: 30; $z-40: 40; $z-50: 50; // ******************************************************************* // Mixins // ******************************************************************* @mixin make-container($padding-x: $size-4) {} @mixin ellipsis {} @mixin antialiased {} @mixin subpixel-antialiased {} @mixin progress-bar {} // ******************************************************************* // Animations // ******************************************************************* @mixin animate-spin {} @mixin animate-ping {} @mixin animate-pulse {} @mixin animate-bounce {} @mixin animate-pop-open {} @mixin animate-appear {} @mixin animate-fade-out {} @mixin animate-fade-in-out {} @mixin animate-appear-then-fade {} @mixin animate-appear-then-fade-extended {} @mixin animate-slide-up-then-down {} @mixin animate-wiggle {} @mixin animate-fade-in-up {} @mixin animate-fade-in-down {} @mixin animate-fade-out-up {} @mixin animate-fade-out-down {} @mixin animate-flip-up {} @mixin animate-slide-right {} @mixin animate-slide-left {} @mixin animate-slide-in-from-left {} @mixin animate-slide-in-from-bottom {} @mixin animate-slide-in-from-bottom-no-fade {} @mixin animate-slide-in-from-bottom-no-bounce {} @mixin animate-slide-in-tilt-left {} @mixin animate-slide-in-tilt-right {} @mixin animate-pop {} @mixin animate-burst {} @mixin animate-bubble-burst {} @mixin animate-shake {}