706 lines
17 KiB
CSS
706 lines
17 KiB
CSS
@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);
|
|
} |