From a8a55b9e242299c578e018098023ccb0b20dcb14 Mon Sep 17 00:00:00 2001 From: bagus-arie05 Date: Thu, 15 Jan 2026 08:01:37 +0700 Subject: [PATCH] update color palette dan konsultasi pasien --- assets/css/colors.css | 80 +++++++++++++++---------- assets/scss/_colors.scss | 75 ++++++++++++++--------- pages/AdminKlinikRuang/[kodeKlinik].vue | 10 ---- 3 files changed, 97 insertions(+), 68 deletions(-) diff --git a/assets/css/colors.css b/assets/css/colors.css index 03824ca..802ca3b 100644 --- a/assets/css/colors.css +++ b/assets/css/colors.css @@ -4,44 +4,46 @@ --neutral-800: #4D4D4D; --neutral-700: #717171; --neutral-600: #89939E; - --neutral-500: #ABBED1; - --neutral-400: #E5F7FA; + --neutral-500: #CDD4DC; + --neutral-400: #E1E5EA; --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; + /* 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 (Blue) */ - --secondary-700: #0053AD; - --secondary-600: #0671E0; - --secondary-500: #0663C7; - --secondary-400: #4196F0; - --secondary-300: #DBEDFF; - --secondary-200: #EEF5FC; - --secondary-100: #0053AD; + /* 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: #1B6E53; - --success-600: #009262; - --success-500: #115B43; - --success-400: #32C997; - --success-300: #84DFC1; - --success-200: #F1FBF8; + --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: #E01507; - --danger-600: #E02B1D; - --danger-500: #C33025; - --danger-400: #FF5A4F; - --danger-300: #F0857D; - --danger-200: #FFF1F0; + --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 */ @@ -68,6 +70,7 @@ .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); } @@ -75,6 +78,7 @@ .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); } @@ -82,6 +86,7 @@ .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); } @@ -95,18 +100,33 @@ .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); } diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index f82620b..0249914 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -4,39 +4,42 @@ $neutral-900: #212121; $neutral-800: #4D4D4D; $neutral-700: #717171; $neutral-600: #89939E; -$neutral-500: #ABBED1; -$neutral-400: #E5F7FA; +$neutral-500: #CDD4DC; +$neutral-400: #E1E5EA; $neutral-300: #F5F7FA; $neutral-100: #FFFFFF; -$primary-700: #FF9B1B; -$primary-600: #FFA532; -$primary-500: #FFB95F; -$primary-400: #FFCD8D; -$primary-300: #FFDCAF; -$primary-200: #FFE6C6; -$primary-100: #EEF5FC; +$primary-700: #3556AE; +$primary-600: #3A61C9; +$primary-500: #567EE7; +$primary-400: #7898EC; +$primary-300: #9AB2F1; +$primary-200: #BBCBF5; +$primary-100: #DDE5FA; -$secondary-700: #0053AD; -$secondary-600: #0671E0; -$secondary-500: #0663C7; -$secondary-400: #4196F0; -$secondary-300: #DBEDFF; -$secondary-200: #EEF5FC; +$secondary-700: #E65A0D; +$secondary-600: #F16F29; +$secondary-500: #FF8441; +$secondary-400: #FF9D67; +$secondary-300: #FFB58D; +$secondary-200: #FFCEB3; +$secondary-100: #FFE6D9; -$success-700: #1B6E53; -$success-600: #009262; -$success-500: #115B43; -$success-400: #32C997; -$success-300: #84DFC1; -$success-200: #F1FBF8; +$success-700: #008D65; +$success-600: #33A484; +$success-500: #59B59B; +$success-400: #80C6B2; +$success-300: #A6D7C9; +$success-200: #CCE8E0; +$success-100: #E5F4F0; -$danger-700: #E01507; -$danger-600: #E02B1D; -$danger-500: #C33025; -$danger-400: #FF5A4F; -$danger-300: #F0857D; -$danger-200: #FFF1F0; +$danger-700: #D82719; +$danger-600: #DE473B; +$danger-500: #E57269; +$danger-400: #EB938C; +$danger-300: #F1B3AE; +$danger-200: #F7D4D1; +$danger-100: #FBE9E8; // CSS Variables untuk dynamic theming :root { @@ -66,6 +69,7 @@ $danger-200: #FFF1F0; --color-secondary-400: #{$secondary-400}; --color-secondary-300: #{$secondary-300}; --color-secondary-200: #{$secondary-200}; + --color-secondary-100: #{$secondary-100}; // Success --color-success-700: #{$success-700}; @@ -74,6 +78,7 @@ $danger-200: #FFF1F0; --color-success-400: #{$success-400}; --color-success-300: #{$success-300}; --color-success-200: #{$success-200}; + --color-success-100: #{$success-100}; // Danger --color-danger-700: #{$danger-700}; @@ -82,6 +87,7 @@ $danger-200: #FFF1F0; --color-danger-400: #{$danger-400}; --color-danger-300: #{$danger-300}; --color-danger-200: #{$danger-200}; + --color-danger-100: #{$danger-100}; // Theme colors (akan di-override oleh theme system) --color-primary: #{$primary-500}; @@ -135,15 +141,28 @@ $colors: ( 'primary-400': $primary-400, 'primary-300': $primary-300, 'primary-200': $primary-200, + 'primary-100': $primary-100, 'secondary-700': $secondary-700, 'secondary-600': $secondary-600, 'secondary-500': $secondary-500, + 'secondary-400': $secondary-400, + 'secondary-300': $secondary-300, + 'secondary-200': $secondary-200, + 'secondary-100': $secondary-100, 'success-700': $success-700, 'success-600': $success-600, 'success-500': $success-500, + 'success-400': $success-400, + 'success-300': $success-300, + 'success-200': $success-200, + 'success-100': $success-100, 'danger-700': $danger-700, 'danger-600': $danger-600, - 'danger-500': $danger-500 + 'danger-500': $danger-500, + 'danger-400': $danger-400, + 'danger-300': $danger-300, + 'danger-200': $danger-200, + 'danger-100': $danger-100 ); @each $name, $color in $colors { diff --git a/pages/AdminKlinikRuang/[kodeKlinik].vue b/pages/AdminKlinikRuang/[kodeKlinik].vue index a3ff996..97acc91 100644 --- a/pages/AdminKlinikRuang/[kodeKlinik].vue +++ b/pages/AdminKlinikRuang/[kodeKlinik].vue @@ -344,7 +344,6 @@ > mdi-swap-horizontal
Pindah Ruang
-
Pindah ke ruang lain di klinik yang sama
mdi-hospital-building
Pindah Klinik
-
Pindah ke klinik ruang lain, nomor antrian tetap
mdi-stethoscope
Konsultasi
-
Konsultasi ke klinik ruang lain dengan nomor antrian baru
@@ -2770,13 +2767,6 @@ onMounted(() => { margin-bottom: 4px; } -.action-selection-desc { - font-size: 12px; - line-height: 16px; - color: var(--color-neutral-600); - text-align: center; -} - /* Klinik Ruang Selection Styles */ .klinik-ruang-selection-list { max-height: 400px;