266 lines
8.7 KiB
CSS
266 lines
8.7 KiB
CSS
@import '@mantine/core/styles.css';
|
|
@import 'tailwindcss';
|
|
@source "../src";
|
|
|
|
@theme {
|
|
/* =========================================
|
|
FONT FAMILY MAPPING (Mantine -> Tailwind)
|
|
========================================= */
|
|
--base-font-size: 13px;
|
|
--font-sans: var(--mantine-font-family);
|
|
--font-mono: var(--mantine-font-family-monospace);
|
|
|
|
/* =========================================
|
|
1. COLORS (Strictly mapped to Mantine 0-9)
|
|
========================================= */
|
|
--color-brand-50: var(--mantine-color-brand-0);
|
|
--color-brand-100: var(--mantine-color-brand-1);
|
|
--color-brand-200: var(--mantine-color-brand-2);
|
|
--color-brand-300: var(--mantine-color-brand-3);
|
|
--color-brand-400: var(--mantine-color-brand-4);
|
|
--color-brand-500: var(--mantine-color-brand-5);
|
|
--color-brand-600: var(--mantine-color-brand-6);
|
|
--color-brand-700: var(--mantine-color-brand-7);
|
|
--color-brand-800: var(--mantine-color-brand-8);
|
|
--color-brand-900: var(--mantine-color-brand-9);
|
|
|
|
--color-error-50: var(--mantine-color-error-0);
|
|
--color-error-100: var(--mantine-color-error-1);
|
|
--color-error-200: var(--mantine-color-error-2);
|
|
--color-error-300: var(--mantine-color-error-3);
|
|
--color-error-400: var(--mantine-color-error-4);
|
|
--color-error-500: var(--mantine-color-error-5);
|
|
--color-error-600: var(--mantine-color-error-6);
|
|
--color-error-700: var(--mantine-color-error-7);
|
|
--color-error-800: var(--mantine-color-error-8);
|
|
--color-error-900: var(--mantine-color-error-9);
|
|
|
|
--color-warning-50: var(--mantine-color-warning-0);
|
|
--color-warning-100: var(--mantine-color-warning-1);
|
|
--color-warning-200: var(--mantine-color-warning-2);
|
|
--color-warning-300: var(--mantine-color-warning-3);
|
|
--color-warning-400: var(--mantine-color-warning-4);
|
|
--color-warning-500: var(--mantine-color-warning-5);
|
|
--color-warning-600: var(--mantine-color-warning-6);
|
|
--color-warning-700: var(--mantine-color-warning-7);
|
|
--color-warning-800: var(--mantine-color-warning-8);
|
|
--color-warning-900: var(--mantine-color-warning-9);
|
|
|
|
--color-success-50: var(--mantine-color-success-0);
|
|
--color-success-100: var(--mantine-color-success-1);
|
|
--color-success-200: var(--mantine-color-success-2);
|
|
--color-success-300: var(--mantine-color-success-3);
|
|
--color-success-400: var(--mantine-color-success-4);
|
|
--color-success-500: var(--mantine-color-success-5);
|
|
--color-success-600: var(--mantine-color-success-6);
|
|
--color-success-700: var(--mantine-color-success-7);
|
|
--color-success-800: var(--mantine-color-success-8);
|
|
--color-success-900: var(--mantine-color-success-9);
|
|
|
|
--color-info-50: var(--mantine-color-info-0);
|
|
--color-info-100: var(--mantine-color-info-1);
|
|
--color-info-200: var(--mantine-color-info-2);
|
|
--color-info-300: var(--mantine-color-info-3);
|
|
--color-info-400: var(--mantine-color-info-4);
|
|
--color-info-500: var(--mantine-color-info-5);
|
|
--color-info-600: var(--mantine-color-info-6);
|
|
--color-info-700: var(--mantine-color-info-7);
|
|
--color-info-800: var(--mantine-color-info-8);
|
|
--color-info-900: var(--mantine-color-info-9);
|
|
|
|
/* =========================================
|
|
2. SPACING & CONTAINERS
|
|
========================================= */
|
|
--spacing: 0.25rem;
|
|
|
|
/* Core mapped to Mantine */
|
|
--spacing-xs: var(--mantine-spacing-xs);
|
|
--spacing-sm: var(--mantine-spacing-sm);
|
|
--spacing-md: var(--mantine-spacing-md);
|
|
--spacing-lg: var(--mantine-spacing-lg);
|
|
--spacing-xl: var(--mantine-spacing-xl);
|
|
|
|
--breakpoint-sm: 40rem;
|
|
--breakpoint-md: 48rem;
|
|
--breakpoint-lg: 64rem;
|
|
--breakpoint-xl: 80rem;
|
|
--breakpoint-2xl: 96rem;
|
|
--container-3xs: 16rem;
|
|
--container-2xs: 18rem;
|
|
--container-xs: 20rem;
|
|
--container-sm: 24rem;
|
|
--container-md: 28rem;
|
|
--container-lg: 32rem;
|
|
--container-xl: 36rem;
|
|
--container-2xl: 42rem;
|
|
--container-3xl: 48rem;
|
|
--container-4xl: 56rem;
|
|
--container-5xl: 64rem;
|
|
--container-6xl: 72rem;
|
|
--container-7xl: 80rem;
|
|
|
|
/* =========================================
|
|
3. TYPOGRAPHY
|
|
========================================= */
|
|
/* Core text sizes mapped to Mantine, extended kept static */
|
|
--text-xs: var(--mantine-font-size-xs);
|
|
--text-xs--line-height: calc(1 / 0.75);
|
|
--text-sm: var(--mantine-font-size-sm);
|
|
--text-sm--line-height: calc(1.25 / 0.875);
|
|
--text-base: var(--mantine-font-size-md);
|
|
--text-base--line-height: calc(1.5 / 1);
|
|
--text-lg: var(--mantine-font-size-lg);
|
|
--text-lg--line-height: calc(1.75 / 1.125);
|
|
--text-xl: var(--mantine-font-size-xl);
|
|
--text-xl--line-height: calc(1.75 / 1.25);
|
|
|
|
--text-2xl: 1.5rem;
|
|
--text-2xl--line-height: calc(2 / 1.5);
|
|
--text-3xl: 1.875rem;
|
|
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
--text-4xl: 2.25rem;
|
|
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
--text-5xl: 3rem;
|
|
--text-5xl--line-height: 1;
|
|
--text-6xl: 3.75rem;
|
|
--text-6xl--line-height: 1;
|
|
--text-7xl: 4.5rem;
|
|
--text-7xl--line-height: 1;
|
|
--text-8xl: 6rem;
|
|
--text-8xl--line-height: 1;
|
|
--text-9xl: 8rem;
|
|
--text-9xl--line-height: 1;
|
|
|
|
--font-weight-thin: 100;
|
|
--font-weight-extralight: 200;
|
|
--font-weight-light: 300;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--font-weight-extrabold: 800;
|
|
--font-weight-black: 900;
|
|
|
|
--tracking-tighter: -0.05em;
|
|
--tracking-tight: -0.025em;
|
|
--tracking-normal: 0em;
|
|
--tracking-wide: 0.025em;
|
|
--tracking-wider: 0.05em;
|
|
--tracking-widest: 0.1em;
|
|
|
|
--leading-tight: 1.25;
|
|
--leading-snug: 1.375;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.625;
|
|
--leading-loose: 2;
|
|
|
|
/* =========================================
|
|
4. RADIUS
|
|
========================================= */
|
|
--radius-xs: var(--mantine-radius-xs);
|
|
--radius-sm: var(--mantine-radius-sm);
|
|
--radius-md: var(--mantine-radius-md);
|
|
--radius-lg: var(--mantine-radius-lg);
|
|
--radius-xl: var(--mantine-radius-xl);
|
|
--radius-2xl: 1rem;
|
|
--radius-3xl: 1.5rem;
|
|
--radius-4xl: 2rem;
|
|
|
|
/* =========================================
|
|
5. SHADOWS & BLURS
|
|
========================================= */
|
|
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
|
|
--shadow-xs: var(--mantine-shadow-xs);
|
|
--shadow-sm: var(--mantine-shadow-sm);
|
|
--shadow-md: var(--mantine-shadow-md);
|
|
--shadow-lg: var(--mantine-shadow-lg);
|
|
--shadow-xl: var(--mantine-shadow-xl);
|
|
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
|
|
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
|
|
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
|
|
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
|
|
|
|
--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
|
|
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
|
|
--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
|
|
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
|
|
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
|
|
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
|
|
|
|
--text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
|
|
--text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
|
|
--text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
|
|
--text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
|
|
--text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
|
|
|
|
--blur-xs: 4px;
|
|
--blur-sm: 8px;
|
|
--blur-md: 12px;
|
|
--blur-lg: 16px;
|
|
--blur-xl: 24px;
|
|
--blur-2xl: 40px;
|
|
--blur-3xl: 64px;
|
|
|
|
/* =========================================
|
|
6. MISCELLANEOUS (Aspect, Anim, Perspective)
|
|
========================================= */
|
|
--perspective-dramatic: 100px;
|
|
--perspective-near: 300px;
|
|
--perspective-normal: 500px;
|
|
--perspective-midrange: 800px;
|
|
--perspective-distant: 1200px;
|
|
|
|
--aspect-video: 16 / 9;
|
|
|
|
--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);
|
|
|
|
--animate-spin: spin 1s linear infinite;
|
|
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
--animate-bounce: bounce 1s infinite;
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes ping {
|
|
75%,
|
|
100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes pulse {
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
@keyframes bounce {
|
|
0%,
|
|
100% {
|
|
transform: translateY(-25%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
50% {
|
|
transform: none;
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* =========================================
|
|
BASE RESETS
|
|
========================================= */
|
|
|
|
@layer base {
|
|
body {
|
|
font-size: var(--base-font-size);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|