kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
70852bf378115a8063609fb0d3cf45784dc3f430
KArtSell.Aegis/frontend/src/shared/design-system/tokens.css
T
kjh2064 877e25eddf feat: Phase 3 — Layout unification & theme system 
**Layout Components:**
- AppLayout.vue: Responsive grid layout (sidebar + main + footer)
- Sidebar.vue: Collapsible navigation (256px → 64px), smooth animation
- Header.vue: Top bar with theme toggle + user menu + notifications
- Footer.vue: System status indicator + quick links + version info

**Theme System Enhancements:**
- tokens.css: Explicit dark mode via data-theme attribute
- Dual-mode support: prefers-color-scheme + data-theme override
- Smooth theme transitions (150ms cubic-bezier)
- All semantic colors respond to theme changes

**Mobile Responsiveness:**
- Sidebar: Fixed overlay on mobile (<768px)
- Header: Responsive user menu collapse
- Footer: Multi-column → single column layout
- Touch-friendly icon buttons (40px minimum)
- Breadcrumb: Hidden on mobile to save space

**Accessibility:**
- ARIA labels on all interactive elements
- Skip navigation link
- Semantic HTML (nav, main, footer, header)
- Keyboard navigation support (ESC to close menus)
- Focus management in user dropdown

**Testing:**
- All 3 pages: ✅ 100% PASS (36/36 selectors)
- Layout integration verified
- Theme switching functional
- Mobile layout tested

**Commits:** Phase 1-3 now complete: 2681 LOC across 11 files

Next Phase: Phase 4 — Accessibility & Performance (2-4h)
- Complete ARIA + semantic HTML audit
- Keyboard navigation for data grids
- Performance optimization (lazy loading, code splitting)
- E2E accessibility testing

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-15 11:30:30 +09:00

520 lines
14 KiB
CSS
Raw Blame History

/**
* Design System CSS Tokens
* Light mode by default, dark mode via @media prefers-color-scheme
*/
:root {
/* ======================================================================= */
/* COLOR PALETTE */
/* ======================================================================= */
/* Primary Colors (Blue) */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-300: #93c5fd;
--color-primary-400: #60a5fa;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
/* Secondary Colors (Purple) */
--color-secondary-50: #faf5ff;
--color-secondary-100: #f3e8ff;
--color-secondary-200: #e9d5ff;
--color-secondary-300: #d8b4fe;
--color-secondary-400: #c084fc;
--color-secondary-500: #a855f7;
--color-secondary-600: #9333ea;
--color-secondary-700: #7e22ce;
--color-secondary-800: #6b21a8;
--color-secondary-900: #581c87;
/* Success Colors (Green) */
--color-success-50: #f0fdf4;
--color-success-100: #dcfce7;
--color-success-200: #bbf7d0;
--color-success-300: #86efac;
--color-success-400: #4ade80;
--color-success-500: #22c55e;
--color-success-600: #16a34a;
--color-success-700: #15803d;
--color-success-800: #166534;
--color-success-900: #145231;
/* Warning Colors (Amber) */
--color-warning-50: #fffbeb;
--color-warning-100: #fef3c7;
--color-warning-200: #fde68a;
--color-warning-300: #fcd34d;
--color-warning-400: #fbbf24;
--color-warning-500: #f59e0b;
--color-warning-600: #d97706;
--color-warning-700: #b45309;
--color-warning-800: #92400e;
--color-warning-900: #78350f;
/* Danger Colors (Red) */
--color-danger-50: #fef2f2;
--color-danger-100: #fee2e2;
--color-danger-200: #fecaca;
--color-danger-300: #fca5a5;
--color-danger-400: #f87171;
--color-danger-500: #ef4444;
--color-danger-600: #dc2626;
--color-danger-700: #b91c1c;
--color-danger-800: #991b1b;
--color-danger-900: #7f1d1d;
/* Neutral Colors (Gray) */
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #eeeeee;
--color-neutral-300: #e0e0e0;
--color-neutral-400: #bdbdbd;
--color-neutral-500: #9e9e9e;
--color-neutral-600: #757575;
--color-neutral-700: #616161;
--color-neutral-800: #424242;
--color-neutral-900: #212121;
/* Semantic Colors (Light Mode) */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-700);
--color-text-tertiary: var(--color-neutral-500);
--color-text-inverse: #ffffff;
--color-background-primary: #ffffff;
--color-background-secondary: var(--color-neutral-50);
--color-background-tertiary: var(--color-neutral-100);
--color-background-hover: var(--color-neutral-100);
--color-background-active: var(--color-primary-50);
--color-border-primary: var(--color-neutral-300);
--color-border-secondary: var(--color-neutral-200);
--color-input-background: #ffffff;
--color-input-border: var(--color-neutral-300);
--color-input-hover: var(--color-neutral-200);
--color-input-focus: var(--color-primary-500);
/* ======================================================================= */
/* TYPOGRAPHY */
/* ======================================================================= */
/* Font Families */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
/* Font Sizes */
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 30px;
--font-size-4xl: 36px;
/* Line Heights */
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
--line-height-loose: 2;
/* Font Weights */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* ======================================================================= */
/* SPACING */
/* ======================================================================= */
--spacing-0: 0px;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-8: 32px;
--spacing-10: 40px;
--spacing-12: 48px;
--spacing-16: 64px;
--spacing-20: 80px;
--spacing-24: 96px;
/* ======================================================================= */
/* SHADOWS */
/* ======================================================================= */
--shadow-none: none;
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* ======================================================================= */
/* BORDERS */
/* ======================================================================= */
--border-radius-none: 0px;
--border-radius-sm: 2px;
--border-radius-base: 4px;
--border-radius-md: 6px;
--border-radius-lg: 8px;
--border-radius-xl: 12px;
--border-radius-full: 9999px;
--border-width-0: 0px;
--border-width-1: 1px;
--border-width-2: 2px;
/* ======================================================================= */
/* TRANSITIONS */
/* ======================================================================= */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
/* ======================================================================= */
/* Z-INDEX */
/* ======================================================================= */
--z-index-hide: -1;
--z-index-base: 0;
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-tooltip: 1070;
/* ======================================================================= */
/* COMPONENT SIZES */
/* ======================================================================= */
--input-height-sm: 32px;
--input-height-base: 36px;
--input-height-lg: 44px;
--button-height-sm: 32px;
--button-height-base: 36px;
--button-height-lg: 44px;
--icon-size-xs: 16px;
--icon-size-sm: 20px;
--icon-size-base: 24px;
--icon-size-lg: 32px;
--icon-size-xl: 48px;
--grid-row-compact: 32px;
--grid-row-base: 36px;
--grid-row-comfortable: 44px;
--grid-row-touch: 52px;
--sidebar-width-compact: 64px;
--sidebar-width-base: 256px;
--sidebar-width-wide: 320px;
/* ======================================================================= */
/* MODULE COLORS */
/* ======================================================================= */
--module-color-oms: var(--color-primary-500);
--module-color-erp: var(--color-secondary-500);
--module-color-wms: #14b8a6;
--module-color-common: #6b7280;
}
/* ========================================================================== */
/* DARK MODE */
/* ========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Semantic Colors (Dark Mode) */
--color-text-primary: #ffffff;
--color-text-secondary: var(--color-neutral-300);
--color-text-tertiary: var(--color-neutral-500);
--color-text-inverse: var(--color-neutral-900);
--color-background-primary: var(--color-neutral-900);
--color-background-secondary: var(--color-neutral-800);
--color-background-tertiary: var(--color-neutral-700);
--color-background-hover: var(--color-neutral-700);
--color-background-active: rgba(59, 130, 246, 0.2);
--color-border-primary: var(--color-neutral-700);
--color-border-secondary: var(--color-neutral-600);
--color-input-background: var(--color-neutral-800);
--color-input-border: var(--color-neutral-700);
--color-input-hover: var(--color-neutral-600);
--color-input-focus: var(--color-primary-400);
}
}
/* Explicit dark mode via data attribute */
:root[data-theme="dark"] {
/* Semantic Colors (Dark Mode) */
--color-text-primary: #ffffff;
--color-text-secondary: var(--color-neutral-300);
--color-text-tertiary: var(--color-neutral-500);
--color-text-inverse: var(--color-neutral-900);
--color-background-primary: var(--color-neutral-900);
--color-background-secondary: var(--color-neutral-800);
--color-background-tertiary: var(--color-neutral-700);
--color-background-hover: var(--color-neutral-700);
--color-background-active: rgba(59, 130, 246, 0.2);
--color-border-primary: var(--color-neutral-700);
--color-border-secondary: var(--color-neutral-600);
--color-input-background: var(--color-neutral-800);
--color-input-border: var(--color-neutral-700);
--color-input-hover: var(--color-neutral-600);
--color-input-focus: var(--color-primary-400);
}
/* ========================================================================== */
/* BASE STYLES */
/* ========================================================================== */
* {
box-sizing: border-box;
}
html {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
padding: 0;
color: var(--color-text-primary);
background-color: var(--color-background-primary);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
transition: background-color var(--transition-base), color var(--transition-base);
}
/* ========================================================================== */
/* TYPOGRAPHY UTILITIES */
/* ========================================================================== */
h1 {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin: var(--spacing-4) 0;
color: var(--color-text-primary);
}
h2 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin: var(--spacing-3) 0;
color: var(--color-text-primary);
}
h3 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
margin: var(--spacing-2) 0;
color: var(--color-text-primary);
}
p {
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
margin: var(--spacing-3) 0;
color: var(--color-text-secondary);
}
/* ========================================================================== */
/* FORM CONTROLS */
/* ========================================================================== */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
width: 100%;
padding: var(--spacing-2) var(--spacing-3);
border: var(--border-width-1) solid var(--color-input-border);
border-radius: var(--border-radius-base);
background-color: var(--color-input-background);
color: var(--color-text-primary);
font-family: var(--font-sans);
font-size: var(--font-size-base);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:hover,
select:hover,
textarea:hover {
border-color: var(--color-input-hover);
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--color-input-focus);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
input:disabled,
select:disabled,
textarea:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: var(--color-background-secondary);
}
/* ========================================================================== */
/* BUTTONS (Basic Styles) */
/* ========================================================================== */
button {
padding: var(--spacing-2) var(--spacing-4);
border: var(--border-width-1) solid var(--color-border-primary);
border-radius: var(--border-radius-base);
background-color: var(--color-background-secondary);
color: var(--color-text-primary);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-fast);
}
button:hover:not(:disabled) {
background-color: var(--color-background-hover);
border-color: var(--color-border-secondary);
}
button:active:not(:disabled) {
background-color: var(--color-background-active);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Primary Button */
button.btn-primary {
background-color: var(--color-primary-500);
color: white;
border-color: var(--color-primary-500);
}
button.btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-600);
border-color: var(--color-primary-600);
}
/* Danger Button */
button.btn-danger {
background-color: var(--color-danger-500);
color: white;
border-color: var(--color-danger-500);
}
button.btn-danger:hover:not(:disabled) {
background-color: var(--color-danger-600);
border-color: var(--color-danger-600);
}
/* Success Button */
button.btn-success {
background-color: var(--color-success-500);
color: white;
border-color: var(--color-success-500);
}
button.btn-success:hover:not(:disabled) {
background-color: var(--color-success-600);
border-color: var(--color-success-600);
}
/* ========================================================================== */
/* UTILITY CLASSES */
/* ========================================================================== */
.text-primary {
color: var(--color-text-primary);
}
.text-secondary {
color: var(--color-text-secondary);
}
.text-tertiary {
color: var(--color-text-tertiary);
}
.bg-primary {
background-color: var(--color-background-primary);
}
.bg-secondary {
background-color: var(--color-background-secondary);
}
.border {
border: var(--border-width-1) solid var(--color-border-primary);
}
.rounded {
border-radius: var(--border-radius-base);
}
.rounded-lg {
border-radius: var(--border-radius-lg);
}
.shadow {
box-shadow: var(--shadow-md);
}
.shadow-lg {
box-shadow: var(--shadow-lg);
}
.transition {
transition: all var(--transition-base);
}
.m-4 {
margin: var(--spacing-4);
}
.p-4 {
padding: var(--spacing-4);
}
.gap-4 {
gap: var(--spacing-4);
}
Reference in New Issue View Git Blame Copy Permalink