From 989b757a9fbcc5f7ce26097ffce896773ab13ed8 Mon Sep 17 00:00:00 2001 From: Aiman Fakhrullah Mantasan Date: Tue, 17 Jun 2025 00:28:59 +0800 Subject: [PATCH] Added New Color Theme --- .env.example | 6 -- assets/style/css/base/theme.css | 69 ++++++++++++++++++ composables/themeList.js | 124 +++++++++++++++++++++++++++++--- composables/themeList2.js | 82 ++++----------------- prisma/schema.prisma | 11 +++ 5 files changed, 209 insertions(+), 83 deletions(-) delete mode 100644 .env.example diff --git a/.env.example b/.env.example deleted file mode 100644 index ad1ec24..0000000 --- a/.env.example +++ /dev/null @@ -1,6 +0,0 @@ - -NUXT_ENV= -DATABASE_URL= -NUXT_ACCESS_TOKEN_SECRET= -NUXT_REFRESH_TOKEN_SECRET= -PORT= \ No newline at end of file diff --git a/assets/style/css/base/theme.css b/assets/style/css/base/theme.css index a6c095c..1046699 100644 --- a/assets/style/css/base/theme.css +++ b/assets/style/css/base/theme.css @@ -225,6 +225,74 @@ html[data-theme="oren"] { --tw-shadow: #e5eaf2; } +html[data-theme="purplian"] { + /* Core colors */ + --color-primary: 145, 54, 136; /* #913688 - Main Purple */ + --color-secondary: 165, 94, 156; /* #a55e9c - Lighter Purple */ + --color-accent: 241, 235, 245; /* #f1ebf5 - Very soft purple */ + + /* Status colors */ + --color-success: 67, 160, 71; /* #43a047 - Modern green */ + --color-info: 41, 121, 255; /* #2979ff - Bright blue */ + --color-warning: 255, 145, 0; /* #ff9100 - Vibrant orange */ + --color-danger: 229, 57, 53; /* #e53935 - Refined red */ + + /* Basic UI colors */ + --text-color: 60, 60, 67; /* #3c3c43 - Dark gray text */ + --border-color: 232, 232, 235; /* #e8e8eb - Light gray border */ + --bg-1: 250, 250, 253; /* #fafafd - Almost white background */ + --bg-2: 255, 255, 255; /* #ffffff - Pure white background */ + + /* Sidebar colors with interactive states */ + --sidebar: 145, 54, 136; /* #913688 - Purple sidebar */ + --sidebar-menu: 120, 40, 110; /* #78286e - Darker Purple for menu */ + --sidebar-text: 255, 255, 255; /* White Text */ + --sidebar-hover-bg: 165, 94, 156; /* #a55e9c - Lighter purple for hover */ + --sidebar-active-bg: 100, 30, 90; /* #641e5a - Darker purple for active state */ + --sidebar-selected-bg: 185, 114, 176; /* #b972b0 - Highlight purple for selected */ + --sidebar-indicator: 255, 255, 255; /* #ffffff - White indicator line */ + --sidebar-active-text: 255, 236, 249; /* #ffecf9 - Brighter white for active text */ + --sidebar-item-spacing: 2px; /* Spacing between sidebar items */ + --sidebar-item-radius: 8px; /* Rounded corners for items */ + + /* Header styles */ + --header: 250, 250, 253; /* #fafafd - Light header */ + --header-text: 60, 60, 67; /* #3c3c43 - Dark text for header */ + --header-active-text: 145, 54, 136; /* #913688 - Purple for active header items */ + --header-hover-bg: 241, 235, 245; /* #f1ebf5 - Very soft purple for hover */ + --header-border: 232, 232, 235; /* #e8e8eb - Light border under header */ + + /* UI Element Colors */ + --scroll-color: 220, 220, 225; /* #dcdce1 - Light gray scrollbar */ + --scroll-hover-color: 145, 54, 136; /* #913688 - Purple on hover */ + --fk-border-color: 232, 232, 235; /* #e8e8eb - Light gray border */ + --fk-placeholder-color: 150, 150, 155; /* #96969b - Medium gray placeholder */ + --fk-focus-border: 145, 54, 136; /* #913688 - Purple border on focus */ + --fk-hover-border: 165, 94, 156; /* #a55e9c - Lighter purple on hover */ + --box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px, + rgba(0, 0, 0, 0.04) 0px 0px 1px; + --cp-bg: 255, 255, 255; /* White Background */ + + /* Interactive elements */ + --btn-hover-bg: 241, 235, 245; /* #f1ebf5 - Very soft purple for button hover */ + --active-tab-border: 145, 54, 136; /* #913688 - Purple border for active tab */ + --focus-ring: 185, 114, 176, 0.4; /* #b972b0 - Focus outline with opacity */ + + /* UI Settings */ + --rounded-box: 0.4rem; + --rounded-btn: 0.375rem; + --rounded-badge: 1.9rem; + --animation-btn: 0.2s; + --animation-input: 0.2s; + --btn-text-case: capitalize; + --btn-focus-scale: 0.98; + --padding-btn: 0.6rem 1.2rem; + --border-btn: 1px; + --tab-border: 1px; + --tab-radius: 0.5rem; + --tw-shadow: rgba(0, 0, 0, 0.05); +} + html[data-theme="LZS"] { --color-primary: 0, 90, 173; /* #005AAD - Blue */ --color-secondary: 141, 199, 61; /* #8DC73D - Green */ @@ -266,3 +334,4 @@ html[data-theme="LZS"] { --focus-ring: 255, 242, 0, 0.5; /* Yellow focus ring */ --tw-shadow: #e5eaf2; } + \ No newline at end of file diff --git a/composables/themeList.js b/composables/themeList.js index 3779de1..470b7df 100644 --- a/composables/themeList.js +++ b/composables/themeList.js @@ -1,36 +1,135 @@ export default function () { return [ { - theme: "biasa", + theme: "biru", colors: [ { name: "primary", - value: "243, 88, 106", + value: "0, 102, 204", // Strong blue }, { name: "secondary", - value: "240, 122, 37", + value: "51, 153, 255", // Lighter blue }, { name: "accent", - value: "243, 244, 246", + value: "255, 204, 0", // Gold + }, + { + name: "background", + value: "240, 248, 255", // Alice blue + }, + { + name: "text", + value: "0, 0, 0", // Black }, ], }, { - theme: "gelap", + theme: "merah", colors: [ { name: "primary", - value: "243, 88, 106", + value: "204, 0, 0", // Strong red }, { name: "secondary", - value: "240, 122, 37", + value: "255, 102, 102", // Lighter red }, { name: "accent", - value: "15, 23, 42", + value: "255, 255, 153", // Light yellow + }, + { + name: "background", + value: "255, 240, 240", // Very light pink + }, + { + name: "text", + value: "0, 0, 0", // Black + }, + ], + }, + { + theme: "ungu", + colors: [ + { + name: "primary", + value: "75, 0, 130", // Indigo + }, + { + name: "secondary", + value: "138, 43, 226", // Blue violet + }, + { + name: "accent", + value: "255, 215, 0", // Gold + }, + { + name: "background", + value: "240, 248, 255", // Alice blue + }, + { + name: "text", + value: "0, 0, 0", // Black + }, + ], + }, + { + theme: "oren", + colors: [ + { + name: "primary", + value: "255, 103, 0", // Dark orange + }, + { + name: "secondary", + value: "255, 159, 64", // Lighter orange + }, + { + name: "accent", + value: "0, 128, 128", // Teal + }, + { + name: "background", + value: "255, 250, 240", // Floral white + }, + { + name: "text", + value: "0, 0, 0", // Black + }, + ], + }, + { + theme: "purplian", + colors: [ + { + name: "primary", + value: "145, 54, 136", // #913688 - Main Purple + }, + { + name: "secondary", + value: "165, 94, 156", // #a55e9c - Lighter Purple + }, + { + name: "accent", + value: "241, 235, 245", // #f1ebf5 - Very soft purple + }, + { + name: "background", + value: "250, 250, 253", // #fafafd - Almost white + }, + { + name: "text", + value: "60, 60, 67", // #3c3c43 - Dark gray text + }, + { + name: "surface", + value: "255, 255, 255", // #ffffff - Pure white + }, + { + name: "highlight", + value: "225, 207, 235", // #e1cfeb - Very soft purple highlight }, ], }, @@ -49,7 +148,16 @@ export default function () { name: "accent", value: "255, 242, 0", // #FFF200 - Yellow }, + { + name: "background", + value: "245, 250, 255", // Very light blue background + }, + { + name: "text", + value: "0, 0, 0", // Black + }, ], }, ]; } + \ No newline at end of file diff --git a/composables/themeList2.js b/composables/themeList2.js index 26230d5..29fa7e6 100644 --- a/composables/themeList2.js +++ b/composables/themeList2.js @@ -1,102 +1,53 @@ export default function () { return [ { - theme: "biru", + theme: "biasa", colors: [ { name: "primary", - value: "0, 102, 204", // Strong blue + value: "243, 88, 106", }, { name: "secondary", - value: "51, 153, 255", // Lighter blue + value: "240, 122, 37", }, { name: "accent", - value: "255, 204, 0", // Gold - }, - { - name: "background", - value: "240, 248, 255", // Alice blue - }, - { - name: "text", - value: "0, 0, 0", // Black + value: "243, 244, 246", }, ], }, { - theme: "merah", + theme: "gelap", colors: [ { name: "primary", - value: "204, 0, 0", // Strong red + value: "243, 88, 106", }, { name: "secondary", - value: "255, 102, 102", // Lighter red + value: "240, 122, 37", }, { name: "accent", - value: "255, 255, 153", // Light yellow - }, - { - name: "background", - value: "255, 240, 240", // Very light pink - }, - { - name: "text", - value: "0, 0, 0", // Black + value: "15, 23, 42", }, ], }, { - theme: "ungu", + theme: "purplian", colors: [ { name: "primary", - value: "75, 0, 130", // Indigo + value: "145, 54, 136", // #913688 - Main Purple }, { name: "secondary", - value: "138, 43, 226", // Blue violet + value: "165, 94, 156", // #a55e9c - Lighter Purple }, { name: "accent", - value: "255, 215, 0", // Gold - }, - { - name: "background", - value: "240, 248, 255", // Alice blue - }, - { - name: "text", - value: "0, 0, 0", // Black - }, - ], - }, - { - theme: "oren", - colors: [ - { - name: "primary", - value: "255, 103, 0", // Dark orange - }, - { - name: "secondary", - value: "255, 159, 64", // Lighter orange - }, - { - name: "accent", - value: "0, 128, 128", // Teal - }, - { - name: "background", - value: "255, 250, 240", // Floral white - }, - { - name: "text", - value: "0, 0, 0", // Black + value: "241, 235, 245", // #f1ebf5 - Very soft purple }, ], }, @@ -115,15 +66,8 @@ export default function () { name: "accent", value: "255, 242, 0", // #FFF200 - Yellow }, - { - name: "background", - value: "245, 250, 255", // Very light blue background - }, - { - name: "text", - value: "0, 0, 0", // Black - }, ], }, ]; } + \ No newline at end of file diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 34d2c01..f8ffc9f 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -99,3 +99,14 @@ model site_settings { settingModifiedDate DateTime? @db.DateTime(0) siteLoginLogo String? @db.VarChar(500) } + +model ticket { + ticketId Int @id @default(autoincrement()) + title String + description String + dueDate DateTime + priority String @default("medium") + status String @default("pending") + createdAt DateTime @default(now()) + updatedAt DateTime +}