509 lines
14 KiB
CSS
509 lines
14 KiB
CSS
/* ============================================================
|
|
KRISHNA SALES — global stylesheet
|
|
Tailwind v4 + design tokens. The @theme inline block wires
|
|
Tailwind's utility namespaces to the CSS-variable tokens, so
|
|
`bg-navy-900`, `rounded-lg`, `shadow-md`, `font-numeric` etc.
|
|
resolve to the design system with zero duplication.
|
|
(Referenced from the lead-to-policy console.)
|
|
============================================================ */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Inter+Tight:wght@500;600;700;800&display=swap');
|
|
@import 'tailwindcss';
|
|
@import './tokens/colors.css';
|
|
@import './tokens/typography.css';
|
|
@import './tokens/spacing.css';
|
|
|
|
@theme inline {
|
|
/* ---- Brand: Navy ---- */
|
|
--color-navy-950: var(--navy-950);
|
|
--color-navy-900: var(--navy-900);
|
|
--color-navy-800: var(--navy-800);
|
|
--color-navy-700: var(--navy-700);
|
|
--color-navy-600: var(--navy-600);
|
|
--color-navy-500: var(--navy-500);
|
|
--color-navy-400: var(--navy-400);
|
|
|
|
/* ---- Brand: Sunrise ---- */
|
|
--color-sunrise-600: var(--sunrise-600);
|
|
--color-sunrise-500: var(--sunrise-500);
|
|
--color-sunrise-400: var(--sunrise-400);
|
|
--color-sunrise-300: var(--sunrise-300);
|
|
--color-sunrise-200: var(--sunrise-200);
|
|
--color-sunrise-100: var(--sunrise-100);
|
|
|
|
/* ---- Semantic: Emerald / Amber / Ruby / Sky ---- */
|
|
--color-emerald-700: var(--emerald-700);
|
|
--color-emerald-600: var(--emerald-600);
|
|
--color-emerald-500: var(--emerald-500);
|
|
--color-emerald-300: var(--emerald-300);
|
|
--color-emerald-100: var(--emerald-100);
|
|
--color-amber-700: var(--amber-700);
|
|
--color-amber-600: var(--amber-600);
|
|
--color-amber-500: var(--amber-500);
|
|
--color-amber-300: var(--amber-300);
|
|
--color-amber-100: var(--amber-100);
|
|
--color-ruby-700: var(--ruby-700);
|
|
--color-ruby-600: var(--ruby-600);
|
|
--color-ruby-500: var(--ruby-500);
|
|
--color-ruby-100: var(--ruby-100);
|
|
--color-sky-700: var(--sky-700);
|
|
--color-sky-600: var(--sky-600);
|
|
--color-sky-500: var(--sky-500);
|
|
--color-sky-100: var(--sky-100);
|
|
|
|
/* ---- Neutral: Slate ---- */
|
|
--color-slate-950: var(--slate-950);
|
|
--color-slate-900: var(--slate-900);
|
|
--color-slate-800: var(--slate-800);
|
|
--color-slate-700: var(--slate-700);
|
|
--color-slate-600: var(--slate-600);
|
|
--color-slate-500: var(--slate-500);
|
|
--color-slate-400: var(--slate-400);
|
|
--color-slate-300: var(--slate-300);
|
|
--color-slate-200: var(--slate-200);
|
|
--color-slate-150: var(--slate-150);
|
|
--color-slate-100: var(--slate-100);
|
|
--color-slate-50: var(--slate-50);
|
|
|
|
/* ---- Semantic aliases (short, readable utility names) ---- */
|
|
--color-app: var(--z-body-bg);
|
|
--color-card: var(--z-block-bg);
|
|
--color-sunk: var(--z-bg-plain);
|
|
--color-strong: var(--z-text-default);
|
|
--color-body: var(--z-text-default);
|
|
--color-muted: var(--z-text-muted);
|
|
--color-faint: var(--z-text-secondary);
|
|
--color-on-navy: var(--z-text-inverse);
|
|
--color-on-navy-muted: var(--z-text-secondary);
|
|
--color-accent: var(--z-text-primary);
|
|
--color-link: var(--z-text-primary);
|
|
--color-border-subtle: var(--z-border-default);
|
|
--color-border-default: var(--z-border-secondary);
|
|
|
|
/* ---- Radii ---- */
|
|
--radius-xs: var(--radius-xs);
|
|
--radius-sm: var(--radius-sm);
|
|
--radius-md: var(--radius-md);
|
|
--radius-lg: var(--radius-lg);
|
|
--radius-xl: var(--radius-xl);
|
|
--radius-2xl: var(--radius-2xl);
|
|
--radius-pill: var(--radius-pill);
|
|
|
|
/* ---- Elevation ---- */
|
|
--shadow-xs: var(--shadow-xs);
|
|
--shadow-sm: var(--shadow-sm);
|
|
--shadow-md: var(--shadow-md);
|
|
--shadow-lg: var(--shadow-lg);
|
|
--shadow-xl: var(--shadow-xl);
|
|
--shadow-sunrise: var(--shadow-sunrise);
|
|
|
|
/* ---- Fonts ---- */
|
|
--font-sans: var(--font-sans);
|
|
--font-numeric: var(--font-numeric);
|
|
--font-mono: var(--font-mono);
|
|
|
|
/* ---- Type scale ---- */
|
|
--text-2xs: var(--text-2xs);
|
|
--text-xs: var(--text-xs);
|
|
--text-sm: var(--text-sm);
|
|
--text-base: var(--text-base);
|
|
--text-md: var(--text-md);
|
|
--text-lg: var(--text-lg);
|
|
--text-xl: var(--text-xl);
|
|
--text-2xl: var(--text-2xl);
|
|
--text-3xl: var(--text-3xl);
|
|
--text-4xl: var(--text-4xl);
|
|
--text-5xl: var(--text-5xl);
|
|
--text-6xl: var(--text-6xl);
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body,
|
|
#root {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
background: var(--surface-app);
|
|
color: var(--text-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
|
|
/* Brand gradients — not expressible as plain utilities. */
|
|
.bg-sunrise {
|
|
background-image: var(--gradient-sunrise);
|
|
}
|
|
|
|
.bg-sunrise-soft {
|
|
background-image: var(--gradient-sunrise-soft);
|
|
}
|
|
|
|
.bg-navy-grad {
|
|
background-image: var(--gradient-navy);
|
|
}
|
|
|
|
/* Tabular figures for aligning currency & counts. */
|
|
.nums {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Primary focus ring on inputs/selects. */
|
|
.focus-ring:focus-within {
|
|
border-color: var(--z-btn-primary-bg);
|
|
box-shadow: var(--shadow-focus);
|
|
}
|
|
|
|
/* Slim, theme-tinted scrollbar for in-panel scroll areas. */
|
|
.scrollbar-slim {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-default) transparent;
|
|
}
|
|
|
|
.scrollbar-slim::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.scrollbar-slim::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-slim::-webkit-scrollbar-thumb {
|
|
background-color: var(--border-default);
|
|
background-clip: padding-box;
|
|
border: 3px solid transparent;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.scrollbar-slim:hover::-webkit-scrollbar-thumb {
|
|
background-color: var(--text-faint);
|
|
}
|
|
}
|
|
|
|
/* root variable */
|
|
|
|
:root {
|
|
--primary-color: #1F4D36;
|
|
--secondary-color: #fdf4e4de;
|
|
--font-color: #10182b;
|
|
--font-family: "IBM Plex Sans", serif;
|
|
--light-font-color: #667085;
|
|
--body-bg: #f0f4f8;
|
|
--bg-plain: #fff;
|
|
--bg-active: #00000014;
|
|
--border: #e5e7eb;
|
|
--shadow: 0px 4px 8px 0px rgba(228, 231, 236, 0.3);
|
|
--hover: #e4e4e4;
|
|
--hover-font: #fff;
|
|
--hover-bg: #f9fafb;
|
|
--hover-border: #667085;
|
|
--menu-item-bg: rgba(255, 255, 255, 0.1);
|
|
|
|
|
|
/* Navbar background color */
|
|
--nav-bg-color: linear-gradient(91deg, #063b21 0.17%, #0d663a 99.89%);
|
|
--nav-item-color: #10182b;
|
|
--nav-item-active: #1b84ff;
|
|
--nav-item-active-bg: #c0d4ed45;
|
|
--nav-item-border-bottom: transparent;
|
|
--nav-dropdown-bg: #fff;
|
|
|
|
/* Matching the navbar color */
|
|
--nav-dropdown-color: #4B5675;
|
|
--nav-dropdown-active: #2e56e1;
|
|
--nav-dropdown-active-bg: #F9F9F9;
|
|
--nav-dropdown-border: none;
|
|
--nav-dropdown-radius: 4px;
|
|
--nav-dropdown-padding: 10px;
|
|
--menu-item-radius: 4px;
|
|
--p-8: 0px;
|
|
--nav-border: rgba(255, 255, 255, 0.1);
|
|
--nav-left-separator-line: #484848;
|
|
|
|
/* tiles card */
|
|
--tiles-card-bg: #FFFBF4;
|
|
--tiles-card-border: #e5e7eb00;
|
|
--tiles-font-color: #1F4D36;
|
|
--tiles-font-size: 16px;
|
|
--tiles-count-size: 20px;
|
|
|
|
/* button */
|
|
--z-btn-primary-bg: #1F4D36;
|
|
--z-btn-primary-color: #fff;
|
|
--primary-btn-active: #1d613f;
|
|
--primary-btn-activeClr: #fff;
|
|
--z-btn-secondary-bg: #f4f4f4;
|
|
--z-btn-secondary-color: #10182b;
|
|
--secondary-btn-active-bg: #eaeaea;
|
|
--z-btn-outline-color: #1F4D36;
|
|
--z-btn-outline-border: #1F4D36;
|
|
|
|
--button-height: 36px;
|
|
--z-btn-sm-height: 32px;
|
|
--z-btn-md-height: 40px;
|
|
--z-btn-lg-height: 48px;
|
|
|
|
/* blocks */
|
|
--block-bg: var(--tiles-card-bg);
|
|
--block-padding: 20px;
|
|
--block-radius: 20px;
|
|
--block-border: #e5e7eb;
|
|
/* --block-shadow: 0px 4px 8px 0px rgba(228, 231, 236, 0.3); */
|
|
--block-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
|
|
|
|
/* button or input */
|
|
--button-radius: 8px;
|
|
--input-shadow: 0px 4px 8px 0px rgba(228, 231, 236, 0.3);
|
|
--input-border: #e5e7eb;
|
|
|
|
/* font-size */
|
|
--small-font: 14px;
|
|
--medium-font: 16px;
|
|
--large-font: 20px;
|
|
--z-btn-font-sm: 12px;
|
|
--z-btn-font-md: 14px;
|
|
--z-btn-font-lg: 16px;
|
|
|
|
--small-icon: 24px;
|
|
|
|
/* record view table color */
|
|
--rv-table-bg: #FFFBF4;
|
|
--rv-table-header: #FFFBF4;
|
|
--table-row-bg-select: #fafafa;
|
|
--table-tr-active: #f9fafb;
|
|
--rv-table-height: 40px;
|
|
--rv-table-btn-height: 36px;
|
|
--table-td-padding: 8px 20px;
|
|
|
|
/* form input tags */
|
|
--form-input-height: 40px;
|
|
--form-bg: var(--tiles-card-bg);
|
|
--form-input-bg: #fff;
|
|
--inputBox-border: ##e5e7eb;
|
|
--inputBox-border-active: #a2acbf;
|
|
--disable-bg: #fafafa;
|
|
--disable-color: #98a2b3;
|
|
|
|
--toolTip-color: #2185d0;
|
|
--toolTip-active-clr: #208fe3;
|
|
|
|
/* new template style variables */
|
|
--z-body-bg: #f0f4f8;
|
|
--z-bg-plain: #fff;
|
|
|
|
--z-bg-primary: #0058be;
|
|
--z-bg-secondary: #f4f4f4;
|
|
--z-bg-success: #1fc16b;
|
|
--z-bg-error: #fa3748;
|
|
--z-bg-light: #ffffff;
|
|
--z-bg-dark: #1e2227;
|
|
|
|
--z-text-default: #10182b;
|
|
--z-text-primary: #0058be;
|
|
--z-text-secondary: #6c757d;
|
|
--z-text-success: #fff;
|
|
--z-text-error: #fff;
|
|
--z-text-muted: #6c757d;
|
|
--z-text-inverse: #ffffff;
|
|
--z-text-plain: #fff;
|
|
|
|
|
|
--z-bg-active: #3d94fb;
|
|
|
|
--z-border-primary: #0058be;
|
|
--z-border-secondary: #ced4da;
|
|
--z-border-success: #1fc16b;
|
|
--z-border-error: #fa3748;
|
|
|
|
--z-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--z-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
--z-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
|
|
|
|
--z-font-size-xs: 10px;
|
|
--z-font-size-sm: 12px;
|
|
--z-font-size-md: 14px;
|
|
--z-font-size-lg: 16px;
|
|
--z-font-size-xl: 20px;
|
|
|
|
--z-border-size-sm: 1px;
|
|
--z-border-size-md: 2px;
|
|
--z-border-size-lg: 4px;
|
|
|
|
--z-border-radius-sm: 4px;
|
|
--z-border-radius-md: 8px;
|
|
--z-border-radius-lg: 16px;
|
|
--z-border-radius-full: 50%;
|
|
--z-border-radius-pill: 30px;
|
|
|
|
/* app default text */
|
|
--z-font-sm: 14px;
|
|
--z-font-md: 16px;
|
|
--z-font-lg: 20px;
|
|
|
|
/* button style */
|
|
--z-btn-radius: 8px;
|
|
--z-btn-height: 44px;
|
|
|
|
/* block and section styles */
|
|
--z-block-bg: var(--tiles-card-bg);
|
|
--z-block-radius: 8px;
|
|
--z-block-border: #e5e7eb;
|
|
--z-block-shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
|
/* record view table */
|
|
--z-rv-table-bg: var(--rv-table-bg);
|
|
--z-rv-table-header: var(--rv-table-header);
|
|
--z-rv-td-padding: var(--table-td-padding);
|
|
--z-rv-table-border: #e5e7eb;
|
|
--z-rv-td-height: 40px;
|
|
|
|
--z-tile-bg: #fff;
|
|
--z-tile-border: #e5e7eb;
|
|
|
|
/*-----------------New BG Color Palatte----------------*/
|
|
|
|
/* Primary Colors */
|
|
--z-bg-primary-100: #c0d4ed;
|
|
--z-bg-primary-200: #83b6f4;
|
|
--z-bg-primary-300: #5aa2f8;
|
|
--z-bg-primary-400: #0058be;
|
|
|
|
/* Secondary Colors */
|
|
--z-bg-secondary-100: #ffce8d;
|
|
--z-bg-secondary-200: #ffbb62;
|
|
--z-bg-secondary-300: #faa73b;
|
|
--z-bg-secondary-400: #f5f6f7;
|
|
|
|
/* Gradient Colors */
|
|
--z-bg-gradient-1: linear-gradient(90deg, #0058be 0%, #104F99 100%);
|
|
--z-bg-gradient-2: linear-gradient(90deg, #1C38A7 0%, #2E55DF 100%);
|
|
--z-bg-gradient-3: linear-gradient(94.13deg, #83B6F4 2.64%, #2B6BBA 97.36%);
|
|
--z-bg-gradient-4: linear-gradient(99.74deg, #A0C5F4 4.16%, #EFF3F8 97.03%);
|
|
|
|
/* Neutral Colors */
|
|
--z-bg-neutral-100: #ffffff;
|
|
--z-bg-neutral-200: #f9fafb;
|
|
--z-bg-neutral-300: #e5e7eb;
|
|
--z-bg-neutral-400: #d0d5dd;
|
|
--z-bg-neutral-500: #98a2b3;
|
|
--z-bg-neutral-600: #667085;
|
|
--z-bg-neutral-700: #475467;
|
|
--z-bg-neutral-800: #1d2939;
|
|
--z-bg-neutral-900: #10182b;
|
|
--z-bg-neutral-1000: #0c1323;
|
|
|
|
/* Danger Colors */
|
|
--z-bg-danger-100: #fecdca;
|
|
--z-bg-danger-200: #fda29b;
|
|
--z-bg-danger-300: #f97066;
|
|
--z-bg-danger-400: #f04438;
|
|
|
|
/* Warning Colors */
|
|
--z-bg-warning-100: #ffdf89;
|
|
--z-bg-warning-200: #fec84b;
|
|
--z-bg-warning-300: #ffdb43;
|
|
--z-bg-warning-400: #dfb400;
|
|
|
|
/* Success Colors */
|
|
--z-bg-success-100: oklch(97.9% .021 166.113);
|
|
--z-bg-success-200: #6ce9a6;
|
|
--z-bg-success-300: #32d584;
|
|
--z-bg-success-400: #12b76a;
|
|
|
|
/*-----------------New Text Color Palatte----------------*/
|
|
|
|
/* Primary Colors */
|
|
--z-text-primary-100: #c0d4ed;
|
|
--z-text-primary-200: #83b6f4;
|
|
--z-text-primary-300: #5aa2f8;
|
|
--z-text-primary-400: #0058be;
|
|
|
|
/* Secondary Colors */
|
|
--z-text-secondary-100: #ffce8d;
|
|
--z-text-secondary-200: #ffbb62;
|
|
--z-text-secondary-300: #faa73b;
|
|
--z-text-secondary-400: #f79009;
|
|
|
|
/* Neutral Colors */
|
|
--z-text-neutral-100: #ffffff;
|
|
--z-text-neutral-200: #f9fafb;
|
|
--z-text-neutral-300: #e5e7eb;
|
|
--z-text-neutral-400: #d0d5dd;
|
|
--z-text-neutral-500: #98a2b3;
|
|
--z-text-neutral-600: #667085;
|
|
--z-text-neutral-700: #475467;
|
|
--z-text-neutral-800: #1d2939;
|
|
--z-text-neutral-900: #10182b;
|
|
--z-text-neutral-1000: #0c1323;
|
|
|
|
/* Danger Colors */
|
|
--z-text-danger-100: #fecdca;
|
|
--z-text-danger-200: #fda29b;
|
|
--z-text-danger-300: #f97066;
|
|
--z-text-danger-400: #f04438;
|
|
|
|
/* Warning Colors */
|
|
--z-text-warning-100: #ffdf89;
|
|
--z-text-warning-200: #fec84b;
|
|
--z-text-warning-300: #ffdb43;
|
|
--z-text-warning-400: #dfb400;
|
|
|
|
/* Success Colors */
|
|
--z-text-success-100: #a6f4c5;
|
|
--z-text-success-200: #6ce9a6;
|
|
--z-text-success-300: #32d584;
|
|
--z-text-success-400: #12b76a;
|
|
|
|
/*-----------------New Border Color Palatte----------------*/
|
|
|
|
/* Primary Colors */
|
|
--z-border-default: #e5e7eb;
|
|
--z-border-primary-100: #c0d4ed;
|
|
--z-border-primary-200: #83b6f4;
|
|
--z-border-primary-300: #5aa2f8;
|
|
--z-border-primary-400: #0058be;
|
|
|
|
/* Secondary Colors */
|
|
--z-border-secondary-100: #ffce8d;
|
|
--z-border-secondary-200: #f3cfc4;
|
|
--z-border-secondary-300: #ebaf9d;
|
|
--z-border-secondary-400: #f79009;
|
|
|
|
/* Neutral Colors */
|
|
--z-border-neutral-100: #ffffff;
|
|
--z-border-neutral-200: #f9fafb;
|
|
--z-border-neutral-300: #e5e7eb;
|
|
--z-border-neutral-400: #d0d5dd;
|
|
--z-border-neutral-500: #98a2b3;
|
|
--z-border-neutral-600: #667085;
|
|
--z-border-neutral-700: #475467;
|
|
--z-border-neutral-800: #1d2939;
|
|
--z-border-neutral-900: #10182b;
|
|
--z-border-neutral-1000: #0c1323;
|
|
|
|
/* Danger Colors */
|
|
--z-border-danger-100: #fecdca;
|
|
--z-border-danger-200: #fda29b;
|
|
--z-border-danger-300: #f97066;
|
|
--z-border-danger-400: #f04438;
|
|
|
|
/* Warning Colors */
|
|
--z-border-warning-100: #ffdf89;
|
|
--z-border-warning-200: #fec84b;
|
|
--z-border-warning-300: #ffdb43;
|
|
--z-border-warning-400: #dfb400;
|
|
|
|
/* Success Colors */
|
|
--z-border-success-100: #a6f4c5;
|
|
--z-border-success-200: #6ce9a6;
|
|
--z-border-success-300: #32d584;
|
|
--z-border-success-400: #12b76a;
|
|
} |