mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
sky121113
2025-12-30 15:03:19 +08:00
commit c735c36009
902 changed files with 83591 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

677
source-code/ERP(B-aa)-管理採購單/src/styles/globals.css Normal file
View File

@@ -0,0 +1,677 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
/* ========================================
設計系統核心變數
4px Grid System | 主色：綠色系
======================================== */
:root {
/* ========== 色彩系統 ========== */
/* Grey Scale - 0 (最深) 到 5 (白色) */
--grey-0: #1a1a1a; /* 主要文字 */
--grey-1: #4a4a4a; /* 次要文字 */
--grey-2: #6b6b6b; /* 輔助文字 */
--grey-3: #9e9e9e; /* 禁用狀態/Placeholder */
--grey-4: #e0e0e0; /* 邊框/分隔線 */
--grey-5: #ffffff; /* 白色背景 */
/* Primary Colors - 綠色主題 */
--primary-dark: #018a6a; /* Hover/Active 深色 */
--primary-main: #01ab83; /* 主要品牌色 */
--primary-light: #33bc9a; /* 淺色變化 */
--primary-lighter: #66cdb1; /* 更淺 */
--primary-lightest: #e6f7f3; /* 背景淺色 */
/* Semantic Colors - 語意色彩 */
--color-success: #01ab83;
--color-error: #dc2626;
--color-warning: #f59e0b;
--color-info: #3b82f6;
/* Background Colors - 背景色系統 */
/* 頁面背景 (Page Background) */
--bg-page: #f8fdfb; /* 主要頁面背景 - 淺綠色調 */
/* 卡片/容器背景 (Card/Container Background) */
--bg-card: #ffffff; /* 白色卡片背景 */
--bg-card-hover: #fafafa; /* 卡片 Hover 狀態 */
/* 輔助背景 (Secondary Backgrounds) */
--bg-light: #f8fdfb; /* 淺綠色背景 (同 --bg-page) */
--bg-light-grey: #f5f5f5; /* 淺灰色背景 */
--bg-white: #ffffff; /* 白色背景 (同 --bg-card) */
/* ========== 字體系統 ========== */
/* Font Sizes */
--font-display-lg: 4rem; /* 64px - 大標題 */
--font-display: 3rem; /* 48px - 展示標題 */
--font-h1: 2.5rem; /* 40px */
--font-h2: 2rem; /* 32px */
--font-h3: 1.75rem; /* 28px */
--font-h4: 1.5rem; /* 24px */
--font-h5: 1.25rem; /* 20px */
--font-body-lg: 1.125rem; /* 18px */
--font-body: 1rem; /* 16px - 預設 */
--font-body-sm: 0.875rem; /* 14px */
--font-caption: 0.75rem; /* 12px */
--font-overline: 0.6875rem; /* 11px */
/* Line Heights */
--line-display-lg: 4.5rem; /* 72px */
--line-display: 3.5rem; /* 56px */
--line-h1: 3rem; /* 48px */
--line-h2: 2.5rem; /* 40px */
--line-h3: 2.25rem; /* 36px */
--line-h4: 2rem; /* 32px */
--line-h5: 1.75rem; /* 28px */
--line-body-lg: 1.75rem; /* 28px */
--line-body: 1.5rem; /* 24px */
--line-body-sm: 1.25rem; /* 20px */
--line-caption: 1rem; /* 16px */
--line-overline: 1rem; /* 16px */
/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* ========== 間距系統 (4px Grid) ========== */
--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--spacing-lg: 40px;
/* ========== 圓角系統 ========== */
--radius-none: 0px;
--radius-sm: 4px;
--radius: 8px; /* 預設圓角 */
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-3xl: 24px;
--radius-full: 9999px;
/* Semantic Radius - 語意化圓角 */
--radius-button: 8px;
--radius-card: 12px;
--radius-input: 8px;
--radius-dialog: 12px;
--radius-popover: 8px;
/* ========== 陰影系統 ========== */
--elevation-sm: 0px 4px 12px 0px rgba(1, 171, 131, 0.08);
--elevation-md: 0px 8px 24px 0px rgba(1, 171, 131, 0.12);
/* ========== Tailwind Semantic Token Mapping ========== */
/* 這些是為了與 Tailwind 的預設類別整合 */
--background: var(--bg-page); /* 頁面背景 */
--foreground: var(--grey-0);
--card: var(--bg-card); /* 卡片背景 */
--card-foreground: var(--grey-0);
--popover: var(--bg-card); /* Popover 使用卡片背景 */
--popover-foreground: var(--grey-0);
--primary: var(--primary-main);
--primary-hover: var(--primary-dark);
--primary-active: #016b54;
--primary-foreground: var(--grey-5);
--secondary: var(--bg-light-grey);
--secondary-foreground: var(--grey-0);
--muted: var(--grey-4);
--muted-foreground: var(--grey-2);
--accent: var(--primary-light);
--accent-foreground: var(--grey-5);
--destructive: var(--color-error);
--destructive-hover: #ef4444;
--destructive-foreground: var(--grey-5);
--success: var(--color-success);
--warning: var(--color-warning);
--info: var(--color-info);
--border: var(--grey-4);
--input: var(--grey-3);
--input-background: var(--grey-5);
--ring: var(--primary-main);
--chart-1: var(--primary-main);
--chart-2: var(--primary-light);
--chart-3: var(--color-warning);
--chart-4: var(--color-info);
--chart-5: var(--primary-lighter);
--radius: 8px;
}
/* ========================================
Base Styles
======================================== */
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: var(--font-body);
line-height: var(--line-body);
}
/* 強制所有表單元素使用白色背景 */
input,
textarea,
select,
[role="combobox"] {
background-color: var(--input-background);
}
}
/* ========================================
Typography System
只影響沒有 text-* class 的元素
======================================== */
@layer base {
h1:not([class*="text-"]):not([class*=" text-"]) {
font-size: var(--font-h1);
font-weight: var(--weight-bold);
line-height: var(--line-h1);
}
h2:not([class*="text-"]):not([class*=" text-"]) {
font-size: var(--font-h2);
font-weight: var(--weight-semibold);
line-height: var(--line-h2);
}
h3:not([class*="text-"]):not([class*=" text-"]) {
font-size: var(--font-h3);
font-weight: var(--weight-semibold);
line-height: var(--line-h3);
}
h4:not([class*="text-"]):not([class*=" text-"]) {
font-size: var(--font-h4);
font-weight: var(--weight-semibold);
line-height: var(--line-h4);
}
h5:not([class*="text-"]):not([class*=" text-"]) {
font-size: var(--font-h5);
font-weight: var(--weight-semibold);
line-height: var(--line-h5);
}
p:not([class*="text-"]):not([class*=" text-"]) {
font-size: var(--font-body);
font-weight: var(--weight-regular);
line-height: var(--line-body);
}
label:not([class*="text-"]):not([class*=" text-"]) {
font-size: var(--font-body-sm);
font-weight: var(--weight-semibold);
line-height: var(--line-body-sm);
}
button:not([class*="text-"]):not([class*=" text-"]) {
font-size: var(--font-body);
font-weight: var(--weight-semibold);
line-height: var(--line-body);
}
input:not([class*="text-"]):not([class*=" text-"]),
textarea:not([class*="text-"]):not([class*=" text-"]),
select:not([class*="text-"]):not([class*=" text-"]) {
font-size: var(--font-body);
font-weight: var(--weight-regular);
line-height: var(--line-body);
}
}
/* ========================================
Typography Utility Classes
======================================== */
/* Size Classes */
.body-lg {
font-size: var(--font-body-lg);
font-weight: var(--weight-regular);
line-height: var(--line-body-lg);
}
.body-sm {
font-size: var(--font-body-sm);
font-weight: var(--weight-regular);
line-height: var(--line-body-sm);
}
.caption {
font-size: var(--font-caption);
font-weight: var(--weight-medium);
line-height: var(--line-caption);
}
.overline {
font-size: var(--font-overline);
font-weight: var(--weight-semibold);
line-height: var(--line-overline);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Color Classes */
.text-primary { color: var(--grey-0); }
.text-secondary { color: var(--grey-1); }
.text-tertiary { color: var(--grey-2); }
.text-disabled { color: var(--grey-3); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-link {
color: var(--primary-main);
cursor: pointer;
}
.text-link:hover {
color: var(--primary-dark);
}
/* ========================================
Button System
Filled = 主要動作 | Outlined = 次要動作
======================================== */
/* Primary Buttons */
.button-filled-primary {
background-color: var(--primary-main);
color: var(--grey-5);
}
.button-filled-primary:hover {
background-color: var(--primary-dark);
}
.button-filled-primary:active {
background-color: var(--primary-active);
}
.button-filled-primary:disabled {
background-color: #b3e5d9;
color: var(--grey-5);
cursor: not-allowed;
pointer-events: none;
}
.button-outlined-primary {
border: 2px solid var(--primary-main);
background-color: transparent;
color: var(--grey-0);
}
.button-outlined-primary:hover {
background-color: var(--bg-light);
}
.button-text-primary {
background-color: transparent;
color: var(--primary-main);
border: none;
}
.button-text-primary:hover {
background-color: var(--bg-light);
}
/* Success Buttons */
.button-filled-success {
background-color: var(--color-success);
color: var(--grey-5);
}
.button-filled-success:hover {
background-color: #33bc9a;
}
.button-filled-success:active {
background-color: #018a6a;
}
.button-outlined-success {
border: 2px solid var(--color-success);
background-color: transparent;
color: var(--grey-0);
}
/* Info Buttons */
.button-filled-info {
background-color: var(--color-info);
color: var(--grey-5);
}
.button-filled-info:hover {
background-color: #60a5fa;
}
.button-filled-info:active {
background-color: #2563eb;
}
.button-outlined-info {
border: 2px solid var(--color-info);
background-color: transparent;
color: var(--grey-0);
}
/* Warning Buttons */
.button-filled-warning {
background-color: var(--color-warning);
color: var(--grey-5);
}
.button-filled-warning:hover {
background-color: #fbbf24;
}
.button-filled-warning:active {
background-color: #d97706;
}
.button-outlined-warning {
border: 2px solid var(--color-warning);
background-color: transparent;
color: var(--grey-0);
}
/* Error Buttons */
.button-filled-error {
background-color: var(--color-error);
color: var(--grey-5);
}
.button-filled-error:hover {
background-color: #ef4444;
}
.button-filled-error:active {
background-color: #b91c1c;
}
.button-outlined-error {
border: 2px solid var(--color-error);
background-color: transparent;
color: var(--grey-0);
}
/* Icon Buttons */
.button-icon {
color: var(--grey-0);
border: 2px solid var(--grey-0);
background-color: var(--bg-light);
aspect-ratio: 1/1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.button-icon:hover {
color: var(--primary-main);
border-color: var(--primary-main);
background-color: var(--bg-white);
}
.button-icon:active {
color: var(--primary-dark);
border-color: var(--primary-dark);
}
.button-icon:focus {
border-color: var(--primary-main);
box-shadow: 0 0 0 3px rgba(1, 171, 131, 0.3);
}
.button-icon:disabled {
color: var(--grey-3);
border-color: var(--grey-4);
background-color: var(--bg-light-grey);
cursor: not-allowed;
pointer-events: none;
}
.button-icon-selected {
color: var(--grey-5);
border-color: var(--primary-main);
background-color: var(--primary-main);
}
.button-icon-selected:hover {
border-color: var(--primary-dark);
background-color: var(--primary-dark);
}
/* ========================================
Input/Textarea System
統一使用 border-2 (Outlined style)
======================================== */
.input-default,
.textarea-default {
border: 2px solid var(--grey-3);
background-color: var(--grey-5);
color: var(--grey-0);
}
.input-focus,
.textarea-focus {
border: 2px solid var(--primary-main);
background-color: var(--grey-5);
color: var(--grey-0);
}
.input-error,
.textarea-error {
border: 2px solid var(--color-error);
background-color: var(--grey-5);
color: var(--grey-0);
}
.input-disabled,
.textarea-disabled {
border: 2px solid var(--grey-4);
background-color: var(--bg-light-grey);
color: var(--grey-2);
cursor: not-allowed;
}
.input-placeholder::placeholder,
.textarea-placeholder::placeholder {
color: var(--grey-3);
}
/* ========================================
Card/Container System
======================================== */
.card-default {
background-color: var(--bg-white);
border: 1px solid var(--grey-4);
}
.card-hover:hover {
background-color: var(--bg-white);
border-color: var(--grey-3);
}
.card-light {
background-color: var(--bg-light);
border-color: transparent;
}
.card-grey {
background-color: var(--bg-light-grey);
border-color: transparent;
}
/* ========================================
Badge/Status System
======================================== */
.badge-success {
background-color: var(--color-success);
color: var(--grey-5);
}
.badge-error {
background-color: var(--color-error);
color: var(--grey-5);
}
.badge-warning {
background-color: var(--color-warning);
color: var(--grey-5);
}
.badge-info {
background-color: var(--color-info);
color: var(--grey-5);
}
.badge-neutral {
background-color: var(--grey-3);
color: var(--grey-5);
}
/* ========================================
Divider System
======================================== */
.divider-light {
border-color: var(--grey-4);
}
.divider-medium {
border-color: var(--grey-3);
}
.divider-dark {
border-color: var(--grey-2);
}
/* ========================================
Animations
======================================== */
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fade-in 0.6s ease-out;
}
/* ========================================
Rounded (Border Radius) System
======================================== */
/* 基礎圓角 */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }
/* 上方圓角 (Top) */
.rounded-t-none { border-top-left-radius: var(--radius-none); border-top-right-radius: var(--radius-none); }
.rounded-t-sm { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.rounded-t { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.rounded-t-md { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.rounded-t-xl { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
.rounded-t-2xl { border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); }
.rounded-t-3xl { border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); }
.rounded-t-full { border-top-left-radius: var(--radius-full); border-top-right-radius: var(--radius-full); }
/* 右方圓角 (Right) */
.rounded-r-none { border-top-right-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); }
.rounded-r-sm { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.rounded-r { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.rounded-r-lg { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.rounded-r-xl { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
.rounded-r-2xl { border-top-right-radius: var(--radius-2xl); border-bottom-right-radius: var(--radius-2xl); }
.rounded-r-3xl { border-top-right-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); }
.rounded-r-full { border-top-right-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); }
/* 下方圓角 (Bottom) */
.rounded-b-none { border-bottom-left-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); }
.rounded-b-sm { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.rounded-b { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.rounded-b-md { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.rounded-b-lg { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.rounded-b-xl { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
.rounded-b-2xl { border-bottom-left-radius: var(--radius-2xl); border-bottom-right-radius: var(--radius-2xl); }
.rounded-b-3xl { border-bottom-left-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); }
.rounded-b-full { border-bottom-left-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); }
/* 左方圓角 (Left) */
.rounded-l-none { border-top-left-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); }
.rounded-l-sm { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.rounded-l { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
.rounded-l-xl { border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); }
.rounded-l-2xl { border-top-left-radius: var(--radius-2xl); border-bottom-left-radius: var(--radius-2xl); }
.rounded-l-3xl { border-top-left-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); }
.rounded-l-full { border-top-left-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); }
/* 單一角圓角 (Individual Corners) */
.rounded-tl-none { border-top-left-radius: var(--radius-none); }
.rounded-tl-sm { border-top-left-radius: var(--radius-sm); }
.rounded-tl { border-top-left-radius: var(--radius); }
.rounded-tl-md { border-top-left-radius: var(--radius-md); }
.rounded-tl-lg { border-top-left-radius: var(--radius-lg); }
.rounded-tl-xl { border-top-left-radius: var(--radius-xl); }
.rounded-tl-2xl { border-top-left-radius: var(--radius-2xl); }
.rounded-tl-3xl { border-top-left-radius: var(--radius-3xl); }
.rounded-tl-full { border-top-left-radius: var(--radius-full); }
.rounded-tr-none { border-top-right-radius: var(--radius-none); }
.rounded-tr-sm { border-top-right-radius: var(--radius-sm); }
.rounded-tr { border-top-right-radius: var(--radius); }
.rounded-tr-md { border-top-right-radius: var(--radius-md); }
.rounded-tr-lg { border-top-right-radius: var(--radius-lg); }
.rounded-tr-xl { border-top-right-radius: var(--radius-xl); }
.rounded-tr-2xl { border-top-right-radius: var(--radius-2xl); }
.rounded-tr-3xl { border-top-right-radius: var(--radius-3xl); }
.rounded-tr-full { border-top-right-radius: var(--radius-full); }
.rounded-br-none { border-bottom-right-radius: var(--radius-none); }
.rounded-br-sm { border-bottom-right-radius: var(--radius-sm); }
.rounded-br { border-bottom-right-radius: var(--radius); }
.rounded-br-md { border-bottom-right-radius: var(--radius-md); }
.rounded-br-lg { border-bottom-right-radius: var(--radius-lg); }
.rounded-br-xl { border-bottom-right-radius: var(--radius-xl); }
.rounded-br-2xl { border-bottom-right-radius: var(--radius-2xl); }
.rounded-br-3xl { border-bottom-right-radius: var(--radius-3xl); }
.rounded-br-full { border-bottom-right-radius: var(--radius-full); }
.rounded-bl-none { border-bottom-left-radius: var(--radius-none); }
.rounded-bl-sm { border-bottom-left-radius: var(--radius-sm); }
.rounded-bl { border-bottom-left-radius: var(--radius); }
.rounded-bl-md { border-bottom-left-radius: var(--radius-md); }
.rounded-bl-lg { border-bottom-left-radius: var(--radius-lg); }
.rounded-bl-xl { border-bottom-left-radius: var(--radius-xl); }
.rounded-bl-2xl { border-bottom-left-radius: var(--radius-2xl); }
.rounded-bl-3xl { border-bottom-left-radius: var(--radius-3xl); }
.rounded-bl-full { border-bottom-left-radius: var(--radius-full); }