116 lines
4.2 KiB
CSS
116 lines
4.2 KiB
CSS
:root {
|
|
/* Neutral Colors */
|
|
--neutral-900: #212121;
|
|
--neutral-800: #4D4D4D;
|
|
--neutral-700: #717171;
|
|
--neutral-600: #89939E;
|
|
--neutral-500: #ABBED1;
|
|
--neutral-400: #E5F7FA;
|
|
--neutral-300: #F5F7FA;
|
|
--neutral-100: #FFFFFF;
|
|
|
|
/* Primary Colors (Orange) */
|
|
--primary-700: #0053AD;
|
|
--primary-600: #0663C7;
|
|
--primary-500: #0671E0;
|
|
--primary-400: #4196F0;
|
|
--primary-300: #DBEDFF;
|
|
--primary-200: #EEF5FC;
|
|
--primary-100: #EEF5FC;
|
|
|
|
/* Secondary Colors (Blue) */
|
|
--secondary-700: #0053AD;
|
|
--secondary-600: #0671E0;
|
|
--secondary-500: #0663C7;
|
|
--secondary-400: #4196F0;
|
|
--secondary-300: #DBEDFF;
|
|
--secondary-200: #EEF5FC;
|
|
--secondary-100: #0053AD;
|
|
|
|
/* Success Colors (Green) */
|
|
--success-700: #1B6E53;
|
|
--success-600: #009262;
|
|
--success-500: #115B43;
|
|
--success-400: #32C997;
|
|
--success-300: #84DFC1;
|
|
--success-200: #F1FBF8;
|
|
|
|
/* Danger Colors (Red) */
|
|
--danger-700: #E01507;
|
|
--danger-600: #E02B1D;
|
|
--danger-500: #C33025;
|
|
--danger-400: #FF5A4F;
|
|
--danger-300: #F0857D;
|
|
--danger-200: #FFF1F0;
|
|
}
|
|
|
|
/* Utility Classes untuk Background */
|
|
.bg-neutral-900 { background-color: var(--neutral-900); }
|
|
.bg-neutral-800 { background-color: var(--neutral-800); }
|
|
.bg-neutral-700 { background-color: var(--neutral-700); }
|
|
.bg-neutral-600 { background-color: var(--neutral-600); }
|
|
.bg-neutral-500 { background-color: var(--neutral-500); }
|
|
.bg-neutral-400 { background-color: var(--neutral-400); }
|
|
.bg-neutral-300 { background-color: var(--neutral-300); }
|
|
.bg-neutral-100 { background-color: var(--neutral-100); }
|
|
|
|
.bg-primary-700 { background-color: var(--primary-700); }
|
|
.bg-primary-600 { background-color: var(--primary-600); }
|
|
.bg-primary-500 { background-color: var(--primary-500); }
|
|
.bg-primary-400 { background-color: var(--primary-400); }
|
|
.bg-primary-300 { background-color: var(--primary-300); }
|
|
.bg-primary-200 { background-color: var(--primary-200); }
|
|
.bg-primary-100 { background-color: var(--primary-100); }
|
|
|
|
.bg-secondary-700 { background-color: var(--secondary-700); }
|
|
.bg-secondary-600 { background-color: var(--secondary-600); }
|
|
.bg-secondary-500 { background-color: var(--secondary-500); }
|
|
.bg-secondary-400 { background-color: var(--secondary-400); }
|
|
.bg-secondary-300 { background-color: var(--secondary-300); }
|
|
.bg-secondary-200 { background-color: var(--secondary-200); }
|
|
|
|
.bg-success-700 { background-color: var(--success-700); }
|
|
.bg-success-600 { background-color: var(--success-600); }
|
|
.bg-success-500 { background-color: var(--success-500); }
|
|
.bg-success-400 { background-color: var(--success-400); }
|
|
.bg-success-300 { background-color: var(--success-300); }
|
|
.bg-success-200 { background-color: var(--success-200); }
|
|
|
|
.bg-danger-700 { background-color: var(--danger-700); }
|
|
.bg-danger-600 { background-color: var(--danger-600); }
|
|
.bg-danger-500 { background-color: var(--danger-500); }
|
|
.bg-danger-400 { background-color: var(--danger-400); }
|
|
.bg-danger-300 { background-color: var(--danger-300); }
|
|
.bg-danger-200 { background-color: var(--danger-200); }
|
|
|
|
/* Utility Classes untuk Text Color */
|
|
.text-neutral-900 { color: var(--neutral-900); }
|
|
.text-neutral-800 { color: var(--neutral-800); }
|
|
.text-neutral-700 { color: var(--neutral-700); }
|
|
.text-neutral-600 { color: var(--neutral-600); }
|
|
.text-neutral-500 { color: var(--neutral-500); }
|
|
.text-neutral-100 { color: var(--neutral-100); }
|
|
|
|
.text-primary-700 { color: var(--primary-700); }
|
|
.text-primary-600 { color: var(--primary-600); }
|
|
.text-primary-500 { color: var(--primary-500); }
|
|
.text-primary-400 { color: var(--primary-400); }
|
|
|
|
.text-secondary-700 { color: var(--secondary-700); }
|
|
.text-secondary-600 { color: var(--secondary-600); }
|
|
.text-secondary-500 { color: var(--secondary-500); }
|
|
|
|
.text-success-700 { color: var(--success-700); }
|
|
.text-success-600 { color: var(--success-600); }
|
|
.text-success-500 { color: var(--success-500); }
|
|
|
|
.text-danger-700 { color: var(--danger-700); }
|
|
.text-danger-600 { color: var(--danger-600); }
|
|
.text-danger-500 { color: var(--danger-500); }
|
|
|
|
/* Utility Classes untuk Border */
|
|
.border-primary-500 { border-color: var(--primary-500); }
|
|
.border-secondary-500 { border-color: var(--secondary-500); }
|
|
.border-success-500 { border-color: var(--success-500); }
|
|
.border-danger-500 { border-color: var(--danger-500); }
|
|
.border-neutral-500 { border-color: var(--neutral-500); } |