first commit

source-code/ERP(B-ba)-廠商管理/src/styles/globals.css

@@ -0,0 +1,706 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
+
+:root {
+  --font-size: 16px;
+  
+  /* Typography Variables - Display */
+  --font-display-lg: 64px;
+  --line-display-lg: 72px;
+  
+  --font-display: 48px;
+  --line-display: 56px;
+  
+  /* Typography Variables - Headings */
+  --font-h1: 40px;
+  --line-h1: 48px;
+  
+  --font-h2: 32px;
+  --line-h2: 40px;
+  
+  --font-h3: 28px;
+  --line-h3: 36px;
+  
+  --font-h4: 24px;
+  --line-h4: 32px;
+  
+  --font-h5: 20px;
+  --line-h5: 28px;
+  
+  /* Typography Variables - Body */
+  --font-body-lg: 18px;
+  --line-body-lg: 28px;
+  
+  --font-body: 16px;
+  --line-body: 24px;
+  
+  --font-body-sm: 14px;
+  --line-body-sm: 20px;
+  
+  /* Typography Variables - Small */
+  --font-caption: 12px;
+  --line-caption: 16px;
+  
+  --font-overline: 11px;
+  --line-overline: 16px;
+  
+  /* Font Weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --weight-extrabold: 800;
+  
+  /* ========== Grey Scale ========== */
+  --grey-0: #1a1a1a;
+  --grey-1: #4a4a4a;
+  --grey-2: #6b6b6b;
+  --grey-3: #9e9e9e;
+  --grey-4: #e0e0e0;
+  --grey-5: #ffffff;
+  
+  /* ========== Primary Colors ========== */
+  --primary-dark: #018a6a;
+  --primary-main: #01ab83;
+  --primary-light: #33bc9a;
+  --primary-lighter: #66cdb1;
+  --primary-lightest: #e6f7f3;
+  
+  /* ========== Other Colors ========== */
+  --other-success: #01ab83;
+  --other-error: #dc2626;
+  --other-warning: #f59e0b;
+  --other-info: #3b82f6;
+  
+  /* ========== Background Colors ========== */
+  --background-light: #f8fdfb;
+  --background-light-grey: #f5f5f5;
+  --background-white: #ffffff;
+  
+  /* ========== Button States - Disabled ========== */
+  --button-disabled: #cccccc;
+  
+  /* ========== Button States - Success ========== */
+  --button-success-normal: #01ab83;
+  --button-success-hover: #33bc9a;
+  --button-success-active: #018a6a;
+  
+  /* ========== Button States - Info ========== */
+  --button-info-normal: #3b82f6;
+  --button-info-hover: #60a5fa;
+  --button-info-active: #2563eb;
+  
+  /* ========== Button States - Warning ========== */
+  --button-warning-normal: #f59e0b;
+  --button-warning-hover: #fbbf24;
+  --button-warning-active: #d97706;
+  
+  /* ========== Button States - Error ========== */
+  --button-err-normal: #dc2626;
+  --button-err-hover: #ef4444;
+  --button-err-active: #b91c1c;
+  
+  /* ========== Button States - Main (Primary) ========== */
+  --button-main-normal: #018a6a;
+  --button-main-disable: #b3e5d9;
+  --button-main-hover: #01ab83;
+  --button-main-active: #016b54;
+  
+  /* ========== Semantic Token Mapping ========== */
+  --background: var(--background-light);
+  --foreground: var(--grey-0);
+  --card: var(--background-white);
+  --card-foreground: var(--grey-0);
+  --popover: var(--background-white);
+  --popover-foreground: var(--grey-0);
+  --primary: var(--primary-main);
+  --primary-hover: var(--primary-dark);
+  --primary-active: var(--button-main-active);
+  --primary-foreground: var(--grey-5);
+  --secondary: var(--background-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(--other-error);
+  --destructive-hover: var(--button-err-hover);
+  --destructive-foreground: var(--grey-5);
+  --success: var(--other-success);
+  --warning: var(--other-warning);
+  --info: var(--other-info);
+  --border: var(--grey-4);
+  --input: transparent;
+  --input-background: var(--grey-5);
+  --ring: var(--primary-main);
+  --elevation-sm: 0px 4px 12px 0px rgba(1, 171, 131, 0.08);
+  --elevation-md: 0px 8px 24px 0px rgba(1, 171, 131, 0.12);
+  --chart-1: var(--primary-main);
+  --chart-2: var(--primary-light);
+  --chart-3: var(--other-warning);
+  --chart-4: var(--other-info);
+  --chart-5: var(--primary-lighter);
+  --radius: 8px;
+  --radius-button: 8px;
+  --radius-card: 12px;
+}
+
+@theme inline {
+  /* Grey Scale */
+  --color-grey-0: var(--grey-0);
+  --color-grey-1: var(--grey-1);
+  --color-grey-2: var(--grey-2);
+  --color-grey-3: var(--grey-3);
+  --color-grey-4: var(--grey-4);
+  --color-grey-5: var(--grey-5);
+  
+  /* Primary Colors */
+  --color-primary-dark: var(--primary-dark);
+  --color-primary-main: var(--primary-main);
+  --color-primary-light: var(--primary-light);
+  --color-primary-lighter: var(--primary-lighter);
+  --color-primary-lightest: var(--primary-lightest);
+  
+  /* Semantic Colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-active: var(--primary-active);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-hover: var(--destructive-hover);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-ring: var(--ring);
+  
+  /* Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  
+  /* Radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-button: var(--radius-button);
+  --radius-card: var(--radius-card);
+  
+  /* Button States */
+  --color-button-disabled: var(--button-disabled);
+  --color-button-success-normal: var(--button-success-normal);
+  --color-button-success-hover: var(--button-success-hover);
+  --color-button-success-active: var(--button-success-active);
+  --color-button-info-normal: var(--button-info-normal);
+  --color-button-info-hover: var(--button-info-hover);
+  --color-button-info-active: var(--button-info-active);
+  --color-button-warning-normal: var(--button-warning-normal);
+  --color-button-warning-hover: var(--button-warning-hover);
+  --color-button-warning-active: var(--button-warning-active);
+  --color-button-err-normal: var(--button-err-normal);
+  --color-button-err-hover: var(--button-err-hover);
+  --color-button-err-active: var(--button-err-active);
+  --color-button-main-normal: var(--button-main-normal);
+  --color-button-main-disable: var(--button-main-disable);
+  --color-button-main-hover: var(--button-main-hover);
+  --color-button-main-active: var(--button-main-active);
+}
+
+@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;
+  }
+}
+
+@layer base {
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
+    h1 {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-h1);
+      font-weight: var(--weight-bold);
+      line-height: var(--line-h1);
+    }
+
+    h2 {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-h2);
+      font-weight: var(--weight-semibold);
+      line-height: var(--line-h2);
+    }
+
+    h3 {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-h3);
+      font-weight: var(--weight-semibold);
+      line-height: var(--line-h3);
+    }
+
+    h4 {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-h4);
+      font-weight: var(--weight-semibold);
+      line-height: var(--line-h4);
+    }
+
+    h5 {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-h5);
+      font-weight: var(--weight-semibold);
+      line-height: var(--line-h5);
+    }
+
+    p {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-body);
+      font-weight: var(--weight-regular);
+      line-height: var(--line-body);
+    }
+
+    label {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-body-sm);
+      font-weight: var(--weight-semibold);
+      line-height: var(--line-body-sm);
+    }
+
+    button {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-body);
+      font-weight: var(--weight-semibold);
+      line-height: var(--line-body);
+    }
+
+    input, textarea, select {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-body);
+      font-weight: var(--weight-regular);
+      line-height: var(--line-body);
+    }
+
+    .caption {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-caption);
+      font-weight: var(--weight-medium);
+      line-height: var(--line-caption);
+    }
+    
+    .body-lg {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-body-lg);
+      font-weight: var(--weight-regular);
+      line-height: var(--line-body-lg);
+    }
+    
+    .body-sm {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-body-sm);
+      font-weight: var(--weight-regular);
+      line-height: var(--line-body-sm);
+    }
+    
+    .overline {
+      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: var(--font-overline);
+      font-weight: var(--weight-semibold);
+      line-height: var(--line-overline);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+  }
+}
+
+html {
+  font-size: var(--font-size);
+}
+
+@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;
+}
+
+/* ========== Button Utility Classes ========== */
+.button-filled-primary {
+  background-color: var(--primary-main);
+  color: var(--grey-5);
+}
+
+.button-filled-primary:hover {
+  background-color: var(--primary-dark);
+  color: var(--grey-5);
+}
+
+.button-filled-primary:active {
+  background-color: var(--button-main-active);
+  color: var(--grey-5);
+}
+
+.button-filled-primary:disabled {
+  background-color: var(--button-main-disable);
+  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 {
+  border-color: var(--primary-main);
+  background-color: var(--background-light);
+  color: var(--grey-0);
+}
+
+.button-filled-success {
+  background-color: var(--button-success-normal);
+  color: var(--grey-5);
+}
+
+.button-filled-success:hover {
+  background-color: var(--button-success-hover);
+  color: var(--grey-5);
+}
+
+.button-filled-success:active {
+  background-color: var(--button-success-active);
+  color: var(--grey-5);
+}
+
+.button-outlined-success {
+  border: 2px solid var(--other-success);
+  background-color: transparent;
+  color: var(--grey-0);
+}
+
+.button-filled-info {
+  background-color: var(--button-info-normal);
+  color: var(--grey-5);
+}
+
+.button-filled-info:hover {
+  background-color: var(--button-info-hover);
+  color: var(--grey-5);
+}
+
+.button-filled-info:active {
+  background-color: var(--button-info-active);
+  color: var(--grey-5);
+}
+
+.button-outlined-info {
+  border: 2px solid var(--other-info);
+  background-color: transparent;
+  color: var(--grey-0);
+}
+
+.button-filled-warning {
+  background-color: var(--button-warning-normal);
+  color: var(--grey-5);
+}
+
+.button-filled-warning:hover {
+  background-color: var(--button-warning-hover);
+  color: var(--grey-5);
+}
+
+.button-filled-warning:active {
+  background-color: var(--button-warning-active);
+  color: var(--grey-5);
+}
+
+.button-outlined-warning {
+  border: 2px solid var(--other-warning);
+  background-color: transparent;
+  color: var(--grey-0);
+}
+
+.button-filled-error {
+  background-color: var(--button-err-normal);
+  color: var(--grey-5);
+}
+
+.button-filled-error:hover {
+  background-color: var(--button-err-hover);
+  color: var(--grey-5);
+}
+
+.button-filled-error:active {
+  background-color: var(--button-err-active);
+  color: var(--grey-5);
+}
+
+.button-outlined-error {
+  border: 2px solid var(--other-error);
+  background-color: transparent;
+  color: var(--grey-0);
+}
+
+.button-text-primary {
+  background-color: transparent;
+  color: var(--primary-main);
+  border: none;
+}
+
+.button-text-primary:hover {
+  background-color: var(--background-light);
+  color: var(--primary-main);
+}
+
+/* ========== Input Field Utility Classes ========== */
+.input-outlined-primary {
+  border: 2px solid var(--grey-4);
+  background-color: var(--grey-5);
+  color: var(--grey-0);
+}
+
+.input-outlined-primary:focus {
+  border: 2px solid var(--primary-main);
+  background-color: var(--grey-5);
+  color: var(--grey-0);
+  outline: none;
+}
+
+.input-default {
+  border: 2px solid var(--grey-3);
+  background-color: var(--grey-5);
+  color: var(--grey-0);
+}
+
+.input-focus {
+  border: 2px solid var(--primary-main);
+  background-color: var(--grey-5);
+  color: var(--grey-0);
+}
+
+.input-error {
+  border: 2px solid var(--other-error);
+  background-color: var(--grey-5);
+  color: var(--grey-0);
+}
+
+.input-disabled {
+  border: 2px solid var(--grey-4);
+  background-color: var(--background-light-grey);
+  color: var(--grey-2);
+  cursor: not-allowed;
+}
+
+.input-placeholder::placeholder {
+  color: var(--grey-3);
+}
+
+/* ========== Typography Utility 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-link {
+  color: var(--primary-main);
+  cursor: pointer;
+}
+
+.text-link:hover {
+  color: var(--primary-dark);
+}
+
+.text-error {
+  color: var(--other-error);
+}
+
+.text-success {
+  color: var(--other-success);
+}
+
+.text-warning {
+  color: var(--other-warning);
+}
+
+.text-info {
+  color: var(--other-info);
+}
+
+/* ========== Card/Container Utility Classes ========== */
+.card-default {
+  background-color: var(--background-white);
+  border: 1px solid var(--grey-4);
+}
+
+.card-hover:hover {
+  background-color: var(--background-white);
+  border-color: var(--grey-3);
+}
+
+.card-light {
+  background-color: var(--background-light);
+  border-color: transparent;
+}
+
+.card-grey {
+  background-color: var(--background-light-grey);
+  border-color: transparent;
+}
+
+/* ========== Status Tags/Badges Utility Classes ========== */
+.badge-success {
+  background-color: var(--other-success);
+  color: var(--grey-5);
+}
+
+.badge-error {
+  background-color: var(--other-error);
+  color: var(--grey-5);
+}
+
+.badge-warning {
+  background-color: var(--other-warning);
+  color: var(--grey-5);
+}
+
+.badge-info {
+  background-color: var(--other-info);
+  color: var(--grey-5);
+}
+
+.badge-neutral {
+  background-color: var(--grey-3);
+  color: var(--grey-5);
+}
+
+/* ========== Divider Utility Classes ========== */
+.divider-light {
+  border-color: var(--grey-4);
+}
+
+.divider-medium {
+  border-color: var(--grey-3);
+}
+
+.divider-dark {
+  border-color: var(--grey-2);
+}
+
+/* ========== Icon Button Utility Classes ========== */
+.button-icon {
+  color: var(--grey-0);
+  border: 2px solid var(--grey-0);
+  background-color: var(--background-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(--background-white);
+}
+
+.button-icon:active {
+  color: var(--primary-dark);
+  border-color: var(--primary-dark);
+  background-color: var(--background-light);
+}
+
+.button-icon:focus {
+  color: var(--grey-0);
+  border-color: var(--primary-main);
+  background-color: var(--background-light);
+  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(--background-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 {
+  color: var(--grey-5);
+  border-color: var(--primary-dark);
+  background-color: var(--primary-dark);
+}
+
+/* ========== Textarea Utility Classes ========== */
+.textarea-default {
+  border: 2px solid var(--grey-3);
+  background-color: var(--grey-5);
+  color: var(--grey-0);
+}
+
+.textarea-focus {
+  border: 2px solid var(--primary-main);
+  background-color: var(--grey-5);
+  color: var(--grey-0);
+}
+
+.textarea-error {
+  border: 2px solid var(--other-error);
+  background-color: var(--grey-5);
+  color: var(--grey-0);
+}
+
+.textarea-disabled {
+  border: 2px solid var(--grey-4);
+  background-color: var(--background-light-grey);
+  color: var(--grey-2);
+  cursor: not-allowed;
+}
+
+.textarea-placeholder::placeholder {
+  color: var(--grey-3);
+}