136 lines
5.2 KiB
CSS
136 lines
5.2 KiB
CSS
:root {
|
|
/* Neutral Colors */
|
|
--neutral-900: #212121;
|
|
--neutral-800: #4D4D4D;
|
|
--neutral-700: #717171;
|
|
--neutral-600: #89939E;
|
|
--neutral-500: #CDD4DC;
|
|
--neutral-400: #E1E5EA;
|
|
--neutral-300: #F5F7FA;
|
|
--neutral-100: #FFFFFF;
|
|
|
|
/* Primary Colors (Blue) */
|
|
--primary-700: #3556AE;
|
|
--primary-600: #3A61C9;
|
|
--primary-500: #567EE7;
|
|
--primary-400: #7898EC;
|
|
--primary-300: #9AB2F1;
|
|
--primary-200: #BBCBF5;
|
|
--primary-100: #DDE5FA;
|
|
|
|
/* Secondary Colors (Orange) */
|
|
--secondary-700: #E65A0D;
|
|
--secondary-600: #F16F29;
|
|
--secondary-500: #FF8441;
|
|
--secondary-400: #FF9D67;
|
|
--secondary-300: #FFB58D;
|
|
--secondary-200: #FFCEB3;
|
|
--secondary-100: #FFE6D9;
|
|
|
|
/* Success Colors (Green) */
|
|
--success-700: #008D65;
|
|
--success-600: #33A484;
|
|
--success-500: #59B59B;
|
|
--success-400: #80C6B2;
|
|
--success-300: #A6D7C9;
|
|
--success-200: #CCE8E0;
|
|
--success-100: #E5F4F0;
|
|
|
|
/* Danger Colors (Red) */
|
|
--danger-700: #D82719;
|
|
--danger-600: #DE473B;
|
|
--danger-500: #E57269;
|
|
--danger-400: #EB938C;
|
|
--danger-300: #F1B3AE;
|
|
--danger-200: #F7D4D1;
|
|
--danger-100: #FBE9E8;
|
|
}
|
|
|
|
/* 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-secondary-100 { background-color: var(--secondary-100); }
|
|
|
|
.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-success-100 { background-color: var(--success-100); }
|
|
|
|
.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); }
|
|
.bg-danger-100 { background-color: var(--danger-100); }
|
|
|
|
/* 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-primary-300 { color: var(--primary-300); }
|
|
.text-primary-200 { color: var(--primary-200); }
|
|
.text-primary-100 { color: var(--primary-100); }
|
|
|
|
.text-secondary-700 { color: var(--secondary-700); }
|
|
.text-secondary-600 { color: var(--secondary-600); }
|
|
.text-secondary-500 { color: var(--secondary-500); }
|
|
.text-secondary-400 { color: var(--secondary-400); }
|
|
.text-secondary-300 { color: var(--secondary-300); }
|
|
.text-secondary-200 { color: var(--secondary-200); }
|
|
.text-secondary-100 { color: var(--secondary-100); }
|
|
|
|
.text-success-700 { color: var(--success-700); }
|
|
.text-success-600 { color: var(--success-600); }
|
|
.text-success-500 { color: var(--success-500); }
|
|
.text-success-400 { color: var(--success-400); }
|
|
.text-success-300 { color: var(--success-300); }
|
|
.text-success-200 { color: var(--success-200); }
|
|
.text-success-100 { color: var(--success-100); }
|
|
|
|
.text-danger-700 { color: var(--danger-700); }
|
|
.text-danger-600 { color: var(--danger-600); }
|
|
.text-danger-500 { color: var(--danger-500); }
|
|
.text-danger-400 { color: var(--danger-400); }
|
|
.text-danger-300 { color: var(--danger-300); }
|
|
.text-danger-200 { color: var(--danger-200); }
|
|
.text-danger-100 { color: var(--danger-100); }
|
|
|
|
/* 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); } |