kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(fe): apply KBX v60 high-end design tokens, glassmorphism, and tactile micro-animations

Browse Source
This commit is contained in:
김재현
2026-08-15 19:56:06 +09:00
parent 2c2fff53bb
commit cf5a01f005
3 changed files with 88 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/ui/components/KsButton.vue
+52 -36
View File
@@ -92,124 +92,140 @@ onMounted(() => {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-1);
gap: var(--ks-space-2, 8px);
border: none;
border-radius: var(--border-radius-sm);
border-radius: var(--ks-radius-md, 4px);
font-family: inherit;
font-weight: var(--font-weight-medium);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-normal);
transition: var(--ks-transition-fast, all 0.15s ease);
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ks-button:hover:not(:disabled) {
transform: translateY(-1px);
}
.ks-button:active:not(:disabled) {
transform: translateY(1px);
}
/* Sizes */
.ks-button--xs {
height: 28px;
padding: 0 var(--spacing-2);
font-size: var(--font-size-xs);
padding: 0 var(--ks-space-2, 8px);
font-size: var(--ks-font-caption, 12px);
}
.ks-button--sm {
height: 32px;
padding: 0 var(--spacing-3);
font-size: var(--font-size-sm);
padding: 0 var(--ks-space-3, 12px);
font-size: var(--ks-font-grid, 13px);
}
.ks-button--md {
height: 36px;
padding: 0 var(--spacing-4);
font-size: var(--font-size-sm);
height: var(--ks-control-height, 34px);
padding: 0 var(--ks-space-4, 16px);
font-size: var(--ks-font-body, 14px);
}
.ks-button--lg {
height: 44px;
padding: 0 var(--spacing-5);
font-size: var(--font-size-base);
padding: 0 var(--ks-space-6, 24px);
font-size: var(--ks-font-section, 16px);
}
/* Variants - Primary */
.ks-button--primary {
background-color: var(--color-primary-500);
background-color: var(--ks-color-action, #2563eb);
color: white;
box-shadow: var(--ks-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.ks-button--primary:hover:not(:disabled) {
background-color: var(--color-primary-600);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
background-color: var(--ks-color-action-hover, #1d4ed8);
box-shadow: var(--ks-shadow-glow, 0 0 16px rgba(37, 99, 235, 0.25));
}
.ks-button--primary:active:not(:disabled) {
background-color: var(--color-primary-700);
background-color: #1e40af;
box-shadow: none;
}
.ks-button--primary:focus-visible {
outline: 3px solid var(--color-primary-500);
outline-offset: 2px;
outline: var(--ks-focus-ring-width, 2px) solid var(--ks-color-focus, #2563eb);
outline-offset: var(--ks-focus-ring-offset, 1px);
}
/* Variants - Secondary */
.ks-button--secondary {
background-color: var(--color-background-secondary);
color: var(--color-text-primary);
border: 1px solid var(--color-border-primary);
background-color: var(--ks-color-surface, #ffffff);
color: var(--ks-color-text, #0f172a);
border: 1px solid var(--ks-color-border, #e2e8f0);
box-shadow: var(--ks-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.ks-button--secondary:hover:not(:disabled) {
background-color: var(--color-background-hover);
border-color: var(--color-border-secondary);
background-color: var(--ks-color-canvas, #f8fafc);
border-color: var(--ks-color-border-strong, #cbd5e1);
box-shadow: var(--ks-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.05));
}
.ks-button--secondary:active:not(:disabled) {
background-color: var(--color-background-active);
background-color: var(--ks-color-neutral-100, #f1f5f9);
}
/* Variants - Danger */
.ks-button--danger {
background-color: var(--color-danger-500);
background-color: var(--ks-color-danger, #dc2626);
color: white;
box-shadow: var(--ks-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.ks-button--danger:hover:not(:disabled) {
background-color: var(--color-danger-600);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
background-color: #b91c1c;
box-shadow: var(--ks-shadow-danger-glow, 0 0 16px rgba(220, 38, 38, 0.25));
}
.ks-button--danger:active:not(:disabled) {
background-color: var(--color-danger-700);
background-color: #991b1b;
}
/* Variants - Ghost */
.ks-button--ghost {
background-color: transparent;
color: var(--color-text-primary);
color: var(--ks-color-text, #0f172a);
}
.ks-button--ghost:hover:not(:disabled) {
background-color: var(--color-background-secondary);
background-color: var(--ks-color-neutral-100, #f1f5f9);
}
.ks-button--ghost:active:not(:disabled) {
background-color: var(--color-background-active);
background-color: var(--ks-color-neutral-200, #e2e8f0);
}
/* Variants - Text */
.ks-button--text {
background-color: transparent;
color: var(--color-primary-500);
padding: 0 var(--spacing-2);
color: var(--ks-color-action, #2563eb);
padding: 0 var(--ks-space-2, 8px);
}
.ks-button--text:hover:not(:disabled) {
color: var(--color-primary-600);
color: var(--ks-color-action-hover, #1d4ed8);
background-color: rgba(37, 99, 235, 0.08);
}
/* State - Disabled */
.ks-button--disabled {
opacity: 0.5;
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* State - Loading */