eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity
Files
main
trackgo-fe/packages/ui/src/theme.css
T
shancheas 5287da918c feat: introduce employees and logistics management modules 
- Added new modules for managing employees and logistics, including routes for creating, editing, and viewing employee details and logistics cycles.
- Implemented UI components for employee forms and detail views, with validation schemas for employee data.
- Integrated language support for English and Indonesian in the new modules.
- Developed unit tests for employee remote data services and transformers to ensure functionality and reliability.

This commit enhances the application by providing structured management for employees and logistics, improving user experience and data handling.
2026-08-26 07:34:03 +07:00

313 lines
10 KiB
CSS
Raw Permalink Blame History

/* =========================================
1. CORE IMPORTS & TAILWIND CONFIG
========================================= */
/* Import Mantine core and TipTap extensions */
@import '@mantine/core/styles.css';
@import '@mantine/tiptap/styles.css';
@import '@mantine/notifications/styles.css';
@import '@mantine/dates/styles.css';
/* Initialize Tailwind CSS v4 engine */
@import 'tailwindcss';
/* Instruct Tailwind to scan the src directory for utility class usage */
@source "../src";
@theme {
/* =========================================
2. FONT FAMILY MAPPING
Synchronizes Tailwind's typography utilities
with Mantine's global font configurations.
========================================= */
--base-font-size: 13px;
--font-sans: var(--mantine-font-family);
--font-mono: var(--mantine-font-family-monospace);
/* =========================================
3. COLOR SYSTEM (Mantine to Tailwind Sync)
Maps Tailwind's 50-900 scale directly to
Mantine's 0-9 scale for seamless theming.
Usage: `bg-brand-500`, `text-error-700`
========================================= */
/* Brand Colors */
--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);
/* Error Colors (Red/Danger) */
--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);
/* Warning Colors (Yellow/Orange) */
--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);
/* Success Colors (Green) */
--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);
/* Info Colors (Blue/Cyan) */
--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);
/* =========================================
4. SPACING, BREAKPOINTS & CONTAINERS
Aligns Tailwind's padding/margin scale
with Mantine's layout engine.
========================================= */
--spacing: 0.25rem; /* Base Tailwind unit (1 = 0.25rem) */
/* Map core layout spacing 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);
/* Standard Tailwind responsive breakpoints and container sizes */
--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;
/* =========================================
5. TYPOGRAPHY SCALES
Base sizes (xs to xl) inherit from Mantine.
Extended sizes (2xl to 9xl) use static rems.
========================================= */
/* text-xs -> 12px */
--text-xs: var(--mantine-font-size-xs);
--text-xs--line-height: var(--mantine-line-height-xs, 1.4);
/* text-sm -> 13px (Default Component Size) */
--text-sm: var(--mantine-font-size-sm);
--text-sm--line-height: var(--mantine-line-height-sm, 1.45);
/* text-base -> 14px (Mantine's 'md' maps to Tailwind's 'base') */
--text-base: var(--mantine-font-size-md);
--text-base--line-height: var(--mantine-line-height-md, 1.55);
/* text-lg -> 16px */
--text-lg: var(--mantine-font-size-lg);
--text-lg--line-height: var(--mantine-line-height-lg, 1.6);
/* text-xl -> 18px */
--text-xl: var(--mantine-font-size-xl);
--text-xl--line-height: var(--mantine-line-height-xl, 1.65);
/* --- Extended Tailwind Sizes --- */
--text-2xl: 1.5rem;
--text-2xl--line-height: 2rem;
--text-3xl: 1.875rem;
--text-3xl--line-height: 2.25rem;
--text-4xl: 2.25rem;
--text-4xl--line-height: 2.5rem;
--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 Weights */
--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;
/* Letter Spacing (Tracking) */
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0em;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* Line Height (Leading) */
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* =========================================
6. BORDER RADIUS
Inherits exact corner rounding from Mantine.
========================================= */
--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;
/* =========================================
7. SHADOWS & BLURS
Ensures popovers, modals, and dropdowns
share identical elevation depths.
========================================= */
--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;
/* =========================================
8. MISCELLANEOUS & ANIMATIONS
========================================= */
--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);
/* Standard Tailwind Animations */
--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);
}
}
}
/* =========================================
9. BASE RESETS
Applies global typography smoothing and
sets the root font size.
========================================= */
@layer base {
body {
font-size: var(--base-font-size);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
Reference in New Issue View Git Blame Copy Permalink