ces-vue-ui/src/assets/styles/variables.less

A Vue.js component library using Ant Design Vue components to build custom ces ui components library

// Define your LESS variables using the imported JSON variables
// variables.less

@primary: #00467E;
@primary-dark: #002A4D;
@blue-800: #007BDF;
@blue-700: #20B5FF;
@blue-600: #B2E3FF;
@blue-500: #C5EAFF;
@blue-400: #D6F0FF;
@blue-300: #F1FAFF;
@green-800: #389e0d;    // Main strong green (matches blue-800 depth)
@green-700: #52c41a;    // Slightly lighter, vibrant green
@green-600: #73d13d;    // Lighter green with bright, fresh look
@green-500: #b7eb8f;    // Soft green for border/backgrounds (matches your badge border)
@green-400: #d9f7be;    // Very light green for backgrounds and accents
@green-300: #f6ffed;    // Extremely pale green, perfect as a badge background (matches your usage)
@green-200: #f0fdf4;    // Almost white with a hint of green, for very light backgrounds
@yellow-800: #d4b106;    // Deep gold, strongest yellow (for badge text)
@yellow-700: #fadb14;    // Bright, vibrant yellow (for icons/alerts)
@yellow-600: #ffec3d;    // Softer yellow (for light backgrounds, chips)
@yellow-500: #fff566;    // Pale yellow (for softer badge backgrounds, border)
@yellow-400: #fffb8f;    // Very pale yellow (for backgrounds, highlights)
@yellow-300: #feffe6;    // Almost white yellow (for very subtle backgrounds)
@yellow-200: #fffff0;    // Near white with a hint of yellow (for very light backgrounds)
@black: #000000;
@neutral-1000: #000000;
@neutral-900: #222222;
@neutral-800: #464646;
@neutral-700: #6C6C6C;
@neutral-600: #909090;
@neutral-500: #B1B1B1;
@neutral-400: #D5D5D5;
@neutral-300: #E6E6E6;
@neutral-200: #F8F8F8;
@neutral-100: #FDFDFD;
@white: #FFFFFF;
@success: #008F5D;
@info: #3892F3;
@in-progress: #F68511;
@error: #EA3829;
@warning: #FF0000;
@main-bg: #EEEEF2;
@text-dark-grey: #595959;

/* Header CSS Start */
@layout-header-height: 48px;
@layout-header-background: @primary-color;
@layout-background: @main-bg;