379 lines
7.9 KiB
CSS
379 lines
7.9 KiB
CSS
/**
|
|
* AquaFlow Design System - Global Styles
|
|
* Generated by BMAD Design System Generator v1.0
|
|
* Source: ux-design-specification.md
|
|
* Generated: 2025-12-25T12:44:30+08:00
|
|
*
|
|
* Usage: Import after theme.css
|
|
* @import './theme.css';
|
|
* @import './globals.css';
|
|
*/
|
|
|
|
/* ============================================
|
|
CSS Reset & Box Sizing
|
|
============================================ */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
Font Import (Inter from Google Fonts)
|
|
============================================ */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
/* ============================================
|
|
Base HTML Elements
|
|
============================================ */
|
|
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family-body);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-normal);
|
|
line-height: var(--line-height-normal);
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-primary);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ============================================
|
|
Typography
|
|
============================================ */
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--font-family-heading);
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: var(--line-height-tight);
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: var(--line-height-snug);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: var(--line-height-snug);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
small {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: var(--font-family-mono);
|
|
}
|
|
|
|
/* ============================================
|
|
Links
|
|
============================================ */
|
|
|
|
a {
|
|
color: var(--color-primary-500);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--easing-default);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-primary-700);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/* ============================================
|
|
Buttons (Base)
|
|
============================================ */
|
|
|
|
button,
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
|
|
font-family: var(--font-family-body);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1;
|
|
|
|
padding: var(--space-2) var(--space-4);
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
|
|
transition:
|
|
background-color var(--duration-fast) var(--easing-default),
|
|
transform var(--duration-fast) var(--easing-default),
|
|
box-shadow var(--duration-fast) var(--easing-default);
|
|
}
|
|
|
|
button:focus-visible,
|
|
.btn:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
button:active,
|
|
.btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
button:disabled,
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
/* Button Variants */
|
|
.btn-primary {
|
|
background-color: var(--color-primary-500);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background-color: var(--color-primary-700);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: transparent;
|
|
color: var(--color-primary-500);
|
|
border: 1px solid var(--color-primary-500);
|
|
}
|
|
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background-color: var(--color-primary-50);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background-color: transparent;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.btn-ghost:hover:not(:disabled) {
|
|
background-color: var(--color-neutral-100);
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: var(--color-error-500);
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover:not(:disabled) {
|
|
background-color: var(--color-error-700);
|
|
}
|
|
|
|
/* ============================================
|
|
Form Elements
|
|
============================================ */
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: var(--font-family-body);
|
|
font-size: var(--font-size-base);
|
|
|
|
padding: var(--space-2) var(--space-3);
|
|
min-height: 44px;
|
|
|
|
background-color: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
|
|
transition:
|
|
border-color var(--duration-fast) var(--easing-default),
|
|
box-shadow var(--duration-fast) var(--easing-default);
|
|
}
|
|
|
|
input:hover,
|
|
textarea:hover,
|
|
select:hover {
|
|
border-color: var(--border-hover);
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary-500);
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
input:disabled,
|
|
textarea:disabled,
|
|
select:disabled {
|
|
background-color: var(--color-neutral-100);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
/* ============================================
|
|
Cards
|
|
============================================ */
|
|
|
|
.card {
|
|
background-color: var(--bg-card);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
padding: var(--space-4);
|
|
|
|
transition:
|
|
box-shadow var(--duration-fast) var(--easing-default),
|
|
transform var(--duration-fast) var(--easing-default);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.card-interactive:hover {
|
|
transform: translateY(-2px);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ============================================
|
|
Utilities
|
|
============================================ */
|
|
|
|
/* Focus visible utility */
|
|
.focus-visible:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
/* Screen reader only */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* Skip link */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 0;
|
|
z-index: 9999;
|
|
padding: var(--space-2) var(--space-4);
|
|
background-color: var(--color-primary-500);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
}
|
|
|
|
/* Truncation */
|
|
.truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ============================================
|
|
Layout
|
|
============================================ */
|
|
|
|
.container {
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-4);
|
|
}
|
|
|
|
/* ============================================
|
|
Responsive Breakpoints
|
|
============================================ */
|
|
|
|
/* Mobile first - base styles are for mobile */
|
|
|
|
/* Tablet and up */
|
|
@media (min-width: 768px) {
|
|
h1 {
|
|
font-size: calc(var(--font-size-2xl) * 1.25);
|
|
}
|
|
|
|
h2 {
|
|
font-size: calc(var(--font-size-xl) * 1.1);
|
|
}
|
|
}
|
|
|
|
/* Desktop and up */
|
|
@media (min-width: 1024px) {
|
|
.container {
|
|
padding: 0 var(--space-6);
|
|
}
|
|
} |