atomsystem 0.4.1 → 0.5.0

package/css/atom-ui.css

@@ -1,726 +1,51 @@
-/**
- * AtomSystem Universal Framework-Agnostic CSS
- * Compatible with React, Vue, Angular, Vanilla JS, and jQuery.
- */
-
 :root {
-  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
-  
-  /* Semantic Color Tokens */
+  --atom-color-primary: #3182f6;
+  --atom-color-primary-hover: #1b64da;
+  --atom-color-primary-subtle: #e8f3ff;
   --atom-bg-primary: #ffffff;
-  --atom-bg-secondary: #f8f9fa;
-  --atom-bg-surface: #ffffff;
+  --atom-bg-surface: #f8f9fa;
+  --atom-bg-muted: #f1f3f5;
   --atom-text-primary: #191f28;
   --atom-text-secondary: #8b95a1;
   --atom-text-muted: #b0b8c1;
   --atom-border-subtle: #f2f4f6;
   --atom-border-strong: #e5e8eb;
-  
-  /* Brand Accent Tokens */
-  --atom-primary: #3182f6;
-  --atom-primary-hover: #1b64da;
-  --atom-primary-light: #e8f3ff;
-  --atom-destructive: #f04452;
-  --atom-destructive-hover: #dc2626;
-  --atom-success: #10b981;
-  --atom-warning: #f59e0b;
-
-  /* Typography & Radius */
-  --atom-radius-sm: 8px;
-  --atom-radius-md: 12px;
+  --atom-status-success: #10b981;
+  --atom-status-danger: #f43f5e;
+  --atom-status-warning: #f59e0b;
+  --atom-font-display: [object Object];
+  --atom-font-title-1: [object Object];
+  --atom-font-title-2: [object Object];
+  --atom-font-title-3: [object Object];
+  --atom-font-body-1: [object Object];
+  --atom-font-body-2: [object Object];
+  --atom-font-mono: [object Object];
+  --atom-radius-none: 0px;
+  --atom-radius-sm: 6px;
+  --atom-radius-md: 10px;
   --atom-radius-lg: 16px;
+  --atom-radius-xl: 24px;
   --atom-radius-full: 9999px;
-  --atom-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --atom-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --atom-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --atom-bg-primary: #0f1115;
-    --atom-bg-secondary: #171a21;
-    --atom-bg-surface: #1e222d;
-    --atom-text-primary: #f2f4f6;
-    --atom-text-secondary: #8b95a1;
-    --atom-text-muted: #4e5968;
-    --atom-border-subtle: #222631;
-    --atom-border-strong: #2c3240;
-    
-    --atom-primary: #3b82f6;
-    --atom-primary-hover: #60a5fa;
-    --atom-primary-light: #1e293b;
-    --atom-destructive: #f87171;
-    --atom-destructive-hover: #ef4444;
-  }
-}
-
-/* === Universal Component Classes === */
-
-/* Buttons */
-.atom-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  font-family: var(--font-sans);
-  font-size: 0.875rem;
-  font-weight: 600;
-  padding: 0.5rem 1rem;
-  border-radius: var(--atom-radius-md);
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 0.15s ease-in-out;
-  text-decoration: none;
-  user-select: none;
-}
-.atom-btn:focus-visible {
-  outline: 2px solid var(--atom-primary);
-  outline-offset: 2px;
-}
-.atom-btn:disabled, .atom-btn[aria-disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.atom-btn-primary {
-  background-color: var(--atom-primary);
-  color: #ffffff;
-}
-.atom-btn-primary:hover:not(:disabled) {
-  background-color: var(--atom-primary-hover);
-}
-
-.atom-btn-secondary {
-  background-color: var(--atom-bg-secondary);
-  color: var(--atom-text-primary);
-  border-color: var(--atom-border-strong);
-}
-.atom-btn-secondary:hover:not(:disabled) {
-  background-color: var(--atom-border-subtle);
-}
-
-.atom-btn-outline {
-  background-color: transparent;
-  color: var(--atom-text-primary);
-  border-color: var(--atom-border-strong);
-}
-.atom-btn-outline:hover:not(:disabled) {
-  background-color: var(--atom-bg-secondary);
-}
-
-.atom-btn-destructive {
-  background-color: var(--atom-destructive);
-  color: #ffffff;
-}
-.atom-btn-destructive:hover:not(:disabled) {
-  background-color: var(--atom-destructive-hover);
-}
-
-.atom-btn-sm {
-  font-size: 0.75rem;
-  padding: 0.25rem 0.625rem;
-  border-radius: var(--atom-radius-sm);
-}
-.atom-btn-lg {
-  font-size: 1rem;
-  padding: 0.75rem 1.5rem;
-  border-radius: var(--atom-radius-lg);
-}
-
-/* Cards */
-.atom-card {
-  background-color: var(--atom-bg-surface);
-  border: 1px solid var(--atom-border-subtle);
-  border-radius: var(--atom-radius-lg);
-  padding: 1.25rem;
-  box-shadow: var(--atom-shadow-sm);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.atom-card-interactive {
-  cursor: pointer;
-}
-.atom-card-interactive:hover {
-  border-color: var(--atom-primary);
-  box-shadow: var(--atom-shadow-md);
-}
-
-/* Inputs */
-.atom-input {
-  display: block;
-  width: 100%;
-  font-family: var(--font-sans);
-  font-size: 0.875rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: var(--atom-radius-md);
-  border: 1px solid var(--atom-border-strong);
-  background-color: var(--atom-bg-surface);
-  color: var(--atom-text-primary);
-  outline: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.atom-input:focus {
-  border-color: var(--atom-primary);
-  box-shadow: 0 0 0 3px var(--atom-primary-light);
-}
-.atom-input::placeholder {
-  color: var(--atom-text-muted);
-}
-
-/* Badges */
-.atom-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  padding: 0.2rem 0.5rem;
-  border-radius: var(--atom-radius-full);
-  background-color: var(--atom-bg-secondary);
-  color: var(--atom-text-secondary);
-  border: 1px solid var(--atom-border-subtle);
-}
-.atom-badge-primary {
-  background-color: var(--atom-primary-light);
-  color: var(--atom-primary);
-  border-color: transparent;
-}
-.atom-badge-success {
-  background-color: rgba(16, 185, 129, 0.15);
-  color: #10b981;
-  border-color: transparent;
-}
-
-/* Typography & Heading Scale */
-.atom-h1, .atom-title-1 {
-  font-size: 1.625rem;
-  font-weight: 700;
-  line-height: 1.25;
-  letter-spacing: -0.025em;
-  color: var(--atom-text-primary);
-}
-.atom-h2, .atom-title-2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.3;
-  letter-spacing: -0.02em;
-  color: var(--atom-text-primary);
-}
-.atom-h3, .atom-title-3 {
-  font-size: 1.0625rem;
-  font-weight: 600;
-  line-height: 1.35;
-  letter-spacing: -0.015em;
-  color: var(--atom-text-primary);
-}
-.atom-h4 {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--atom-text-primary);
-}
-.atom-h5 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.45;
-  color: var(--atom-text-primary);
-}
-.atom-h6 {
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.5;
-  color: var(--atom-text-secondary);
-}
-.atom-body-1 {
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--atom-text-primary);
-}
-.atom-body-2 {
-  font-size: 0.875rem;
-  line-height: 1.45;
-  color: var(--atom-text-secondary);
-}
-
-/* Calendar */
-.atom-calendar {
-  display: inline-block;
-  padding: 1rem;
-  background-color: var(--atom-bg-surface);
-  border: 1px solid var(--atom-border-subtle);
-  border-radius: var(--atom-radius-lg);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  user-select: none;
-}
-.atom-calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.75rem;
-}
-.atom-calendar-title {
-  font-size: 0.875rem;
-  font-weight: 700;
-  color: var(--atom-text-primary);
-}
-.atom-calendar-nav-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--atom-radius-md);
-  border: 1px solid var(--atom-border-subtle);
-  background: transparent;
-  color: var(--atom-text-secondary);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.atom-calendar-nav-btn:hover {
-  background-color: var(--atom-bg-secondary);
-  color: var(--atom-text-primary);
-}
-.atom-calendar-grid {
-  display: grid;
-  grid-template-columns: repeat(7, 2.25rem);
-  gap: 0.25rem;
-  text-align: center;
-}
-.atom-calendar-weekday {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--atom-text-muted);
-  padding: 0.25rem 0;
-}
-.atom-calendar-day {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: var(--atom-radius-md);
-  border: none;
-  background: transparent;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--atom-text-primary);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.atom-calendar-day:hover:not(:disabled) {
-  background-color: var(--atom-bg-secondary);
-}
-.atom-calendar-day-selected {
-  background-color: var(--atom-primary) !important;
-  color: #ffffff !important;
-  font-weight: 700;
-}
-.atom-calendar-day:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-/* Custom Select */
-.atom-select {
-  position: relative;
-  width: 100%;
-}
-.atom-select-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border-radius: var(--atom-radius-md);
-  border: 1px solid var(--atom-border-strong);
-  background-color: var(--atom-bg-surface);
-  color: var(--atom-text-primary);
-  font-size: 0.875rem;
-  cursor: pointer;
-  outline: none;
-  transition: all 0.15s ease;
-}
-.atom-select-trigger:focus {
-  border-color: var(--atom-primary);
-  box-shadow: 0 0 0 3px var(--atom-primary-light);
-}
-.atom-select-arrow {
-  font-size: 0.65rem;
-  color: var(--atom-text-muted);
-  transition: transform 0.2s ease;
-}
-.atom-select-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  z-index: 50;
-  margin: 0;
-  padding: 0.25rem;
-  list-style: none;
-  background-color: var(--atom-bg-surface);
-  border: 1px solid var(--atom-border-subtle);
-  border-radius: var(--atom-radius-md);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-}
-.atom-select-option {
-  padding: 0.5rem 0.75rem;
-  border-radius: var(--atom-radius-sm);
-  font-size: 0.875rem;
-  color: var(--atom-text-primary);
-  cursor: pointer;
-  transition: background-color 0.1s ease;
-}
-.atom-select-option:hover {
-  background-color: var(--atom-bg-secondary);
-}
-
-/* Accordion */
-.atom-accordion {
-  width: 100%;
-  border-radius: var(--atom-radius-lg);
-  border: 1px solid var(--atom-border-subtle);
-  overflow: hidden;
-}
-.atom-accordion-item {
-  border-bottom: 1px solid var(--atom-border-subtle);
-}
-.atom-accordion-item:last-child {
-  border-bottom: none;
-}
-.atom-accordion-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 1rem;
-  background: transparent;
-  border: none;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--atom-text-primary);
-  cursor: pointer;
-  text-align: left;
-  transition: background-color 0.15s ease;
-}
-.atom-accordion-trigger:hover {
-  background-color: var(--atom-bg-secondary);
-}
-.atom-accordion-icon {
-  font-size: 0.75rem;
-  transition: transform 0.2s ease;
-}
-.atom-accordion-content {
-  padding: 0 1rem 1rem 1rem;
-  font-size: 0.875rem;
-  color: var(--atom-text-secondary);
-  line-height: 1.5;
-}
-
-/* Tooltip */
-.atom-tooltip-wrapper {
-  position: relative;
-  display: inline-flex;
-}
-.atom-tooltip-bubble {
-  position: absolute;
-  z-index: 60;
-  padding: 0.35rem 0.65rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.3;
-  color: #ffffff;
-  background-color: #1f2937;
-  border-radius: var(--atom-radius-sm);
-  white-space: nowrap;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  pointer-events: none;
-}
-.atom-tooltip-top {
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-/* Toast */
-.atom-toast-container {
-  position: fixed;
-  bottom: 1.5rem;
-  right: 1.5rem;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-width: 24rem;
-}
-.atom-toast {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-radius: var(--atom-radius-lg);
-  background-color: var(--atom-bg-surface);
-  border: 1px solid var(--atom-border-subtle);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
-  font-size: 0.875rem;
-  color: var(--atom-text-primary);
-}
-.atom-toast-success {
-  border-left: 4px solid #10b981;
-}
-.atom-toast-error {
-  border-left: 4px solid #f43f5e;
-}
-.atom-toast-info {
-  border-left: 4px solid var(--atom-primary);
-}
-
-/* Pagination */
-.atom-pagination {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-.atom-pagination-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  height: 2rem;
-  padding: 0 0.5rem;
-  border-radius: var(--atom-radius-md);
-  border: 1px solid var(--atom-border-subtle);
-  background-color: var(--atom-bg-surface);
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--atom-text-secondary);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.atom-pagination-btn:hover:not(:disabled) {
-  background-color: var(--atom-bg-secondary);
-  color: var(--atom-text-primary);
-}
-.atom-pagination-active {
-  background-color: var(--atom-primary) !important;
-  color: #ffffff !important;
-  border-color: var(--atom-primary) !important;
-}
-.atom-pagination-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* Radio Group & Cards */
-.atom-radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.atom-radio-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--atom-text-primary);
-  cursor: pointer;
-  user-select: none;
-}
-.atom-radio {
-  appearance: none;
-  width: 1.125rem;
-  height: 1.125rem;
-  border-radius: 50%;
-  border: 2px solid var(--atom-border-strong);
-  background-color: var(--atom-bg-surface);
-  cursor: pointer;
-  outline: none;
-  transition: all 0.15s ease;
-  position: relative;
-}
-.atom-radio:checked {
-  border-color: var(--atom-primary);
-  background-color: var(--atom-primary);
-  box-shadow: inset 0 0 0 3px var(--atom-bg-surface);
-}
-
-/* Slider */
-.atom-slider {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-.atom-slider-input {
-  width: 100%;
-  accent-color: var(--atom-primary);
-  cursor: pointer;
-}
-
-/* Avatar */
-.atom-avatar {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  overflow: hidden;
-  background-color: var(--atom-bg-secondary);
-  color: var(--atom-text-primary);
-  font-weight: 700;
-  flex-shrink: 0;
-  user-select: none;
-}
-.atom-avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
-.atom-avatar-md { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
-.atom-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
-.atom-avatar-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.atom-avatar-fallback {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background-color: var(--atom-primary-light);
-  color: var(--atom-primary);
-}
-.atom-avatar-status {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 0.65rem;
-  height: 0.65rem;
-  border-radius: 50%;
-  border: 2px solid var(--atom-bg-surface);
-}
-.atom-avatar-status-online { background-color: #10b981; }
-.atom-avatar-status-busy { background-color: #f43f5e; }
-
-/* Progress */
-.atom-progress {
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--atom-bg-secondary);
-  border-radius: var(--atom-radius-full);
-  overflow: hidden;
-  position: relative;
-}
-.atom-progress-bar {
-  height: 100%;
-  border-radius: var(--atom-radius-full);
-  transition: width 0.3s ease;
-}
-.atom-progress-primary { background-color: var(--atom-primary); }
-.atom-progress-success { background-color: #10b981; }
-
-/* Skeleton */
-.atom-skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--atom-bg-secondary) 25%,
-    var(--atom-border-subtle) 50%,
-    var(--atom-bg-secondary) 75%
-  );
-  background-size: 200% 100%;
-  animation: atom-shimmer 1.5s infinite;
-  border-radius: var(--atom-radius-md);
-}
-@keyframes atom-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-/* Breadcrumb */
-.atom-breadcrumb {
-  display: flex;
-  align-items: center;
-  font-size: 0.8125rem;
-}
-.atom-breadcrumb-list {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.atom-breadcrumb-item a {
-  color: var(--atom-text-secondary);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-.atom-breadcrumb-item a:hover {
-  color: var(--atom-text-primary);
-}
-.atom-breadcrumb-separator {
-  color: var(--atom-text-muted);
-}
-.atom-breadcrumb-current {
-  color: var(--atom-text-primary);
-  font-weight: 600;
-}
-
-/* Separator / Divider */
-.atom-separator {
-  background-color: var(--atom-border-subtle);
-}
-.atom-separator-horizontal {
-  width: 100%;
-  height: 1px;
-  margin: 1rem 0;
-}
-.atom-separator-vertical {
-  width: 1px;
-  height: 100%;
-  margin: 0 0.5rem;
-}
-.atom-separator-with-label {
-  display: flex;
-  align-items: center;
-  text-align: center;
-  color: var(--atom-text-muted);
-  font-size: 0.75rem;
-  margin: 1rem 0;
-}
-.atom-separator-with-label::before,
-.atom-separator-with-label::after {
-  content: '';
-  flex: 1;
-  border-bottom: 1px solid var(--atom-border-subtle);
-}
-.atom-separator-with-label span {
-  padding: 0 0.75rem;
-}
-
-/* Textarea */
-.atom-textarea-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  width: 100%;
-}
-.atom-textarea {
-  width: 100%;
-  padding: 0.65rem 0.75rem;
-  border-radius: var(--atom-radius-md);
-  border: 1px solid var(--atom-border-strong);
-  background-color: var(--atom-bg-surface);
-  color: var(--atom-text-primary);
-  font-size: 0.875rem;
-  line-height: 1.5;
-  outline: none;
-  resize: vertical;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.atom-textarea:focus {
-  border-color: var(--atom-primary);
-  box-shadow: 0 0 0 3px var(--atom-primary-light);
-}
-.atom-textarea-counter {
-  align-self: flex-end;
-  font-size: 0.75rem;
-  color: var(--atom-text-muted);
+  --atom-space-1: 4px;
+  --atom-space-2: 8px;
+  --atom-space-3: 12px;
+  --atom-space-4: 16px;
+  --atom-space-5: 20px;
+  --atom-space-6: 24px;
+  --atom-space-8: 32px;
+  --atom-space-12: 48px;
+  --atom-space-16: 64px;
+  --atom-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --atom-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --atom-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --atom-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15);
+  --atom-container-sm: 640px;
+  --atom-container-md: 768px;
+  --atom-container-lg: 1024px;
+  --atom-container-xl: 1280px;
+  --atom-container-2xl: 1536px;
+  --atom-container-full: 100%;
+  --atom-layout-gutter: 16px;
+  --atom-layout-gutter-lg: 24px;
+  --atom-layout-gap: 32px;
 }