@hellboy/ds 0.1.2

package/src/style/foundations/global.css

@@ -0,0 +1,316 @@
+/**
+ * Global Foundations
+ * Base styles, resets, and global utilities
+ */
+
+/* CSS Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* HTML & Body */
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-2);
+  font-weight: var(--font-weight-normal);
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-2) 0;
+}
+
+h1 { font-size: var(--font-size-4xl); }
+h2 { font-size: var(--font-size-3xl); }
+h3 { font-size: var(--font-size-2xl); }
+h4 { font-size: var(--font-size-xl); }
+h5 { font-size: var(--font-size-lg); }
+h6 { font-size: var(--font-size-base); }
+
+/* Lists */
+ul, ol {
+  margin: var(--spacing-4) 0 var(--spacing-4) var(--spacing-6);
+  padding: 0;
+}
+li {
+  margin-bottom: var(--spacing-2);
+}
+
+/* Form Elements */
+button {
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Links */
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: var(--motion-transition-color);
+}
+
+a:hover {
+  color: var(--color-primary-dark);
+}
+
+/* Action links - for important navigation links */
+a.link-action {
+    color: var(--color-foreground-2);
+    font-weight: 400;
+    transition: var(--motion-transition-color);
+    border-bottom: 2px solid var(--color-accent);
+}
+
+a.link-action:hover {
+  color: var(--color-on-primary);
+  background-color: var(--color-accent);
+}
+
+/* Inline code */
+code.inline-code {
+  background-color: var(--color-bg-2);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-family: var(--font-family-mono);
+  font-size: 0.875em;
+}
+
+/* ===== MOTION & ANIMATIONS ===== */
+
+/* Motion Tokens */
+:root {
+  --motion-duration-fast: 0.15s;
+  --motion-duration-base: 0.2s;
+  --motion-duration-slow: 0.3s;
+  --motion-duration-slower: 0.5s;
+
+  --motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
+  --motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
+  --motion-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
+  --motion-easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
+
+  --motion-transition-fast: var(--motion-duration-fast) var(--motion-easing-standard);
+  --motion-transition-base: var(--motion-duration-base) var(--motion-easing-standard);
+  --motion-transition-slow: var(--motion-duration-slow) var(--motion-easing-standard);
+
+  --motion-transition-color: color var(--motion-transition-base);
+  --motion-transition-background: background-color var(--motion-transition-base);
+  --motion-transition-transform: transform var(--motion-transition-base);
+  --motion-transition-opacity: opacity var(--motion-transition-base);
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-fast: 0.01s;
+    --motion-duration-base: 0.01s;
+    --motion-duration-slow: 0.01s;
+    --motion-duration-slower: 0.01s;
+  }
+}
+
+/* Keyframe Animations */
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-top {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes scale-in {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+
+/* CSS Variables for Keyframes */
+:root {
+  --motion-keyframes-slide-in-right: slide-in-right var(--motion-duration-slower) var(--motion-easing-decelerate);
+  --motion-keyframes-slide-out-right: slide-out-right var(--motion-duration-slow) var(--motion-easing-accelerate);
+  --motion-keyframes-slide-in-left: slide-in-left var(--motion-duration-slower) var(--motion-easing-decelerate);
+  --motion-keyframes-slide-out-left: slide-out-left var(--motion-duration-slow) var(--motion-easing-accelerate);
+  --motion-keyframes-slide-in-top: slide-in-top var(--motion-duration-slower) var(--motion-easing-decelerate);
+  --motion-keyframes-slide-out-top: slide-out-top var(--motion-duration-slow) var(--motion-easing-accelerate);
+  --motion-keyframes-slide-in-bottom: slide-in-bottom var(--motion-duration-slower) var(--motion-easing-decelerate);
+  --motion-keyframes-slide-out-bottom: slide-out-bottom var(--motion-duration-slow) var(--motion-easing-accelerate);
+  --motion-keyframes-scale-in: scale-in var(--motion-duration-slow) var(--motion-easing-decelerate);
+  --motion-keyframes-scale-out: scale-out var(--motion-duration-base) var(--motion-easing-accelerate);
+}
+
+/* Text Colors */
+.text-primary { color: var(--color-text-primary); }
+.text-secondary { color: var(--color-text-secondary); }
+.text-tertiary { color: var(--color-text-tertiary); }
+
+/* Text Sizes */
+.text-xs { font-size: var(--font-size-xs); }
+.text-sm { font-size: var(--font-size-sm); }
+.text-base { font-size: var(--font-size-base); }
+.text-lg { font-size: var(--font-size-lg); }
+.text-xl { font-size: var(--font-size-xl); }
+
+/* Font Weights */
+.font-normal { font-weight: var(--font-weight-normal); }
+.font-medium { font-weight: var(--font-weight-medium); }
+.font-semibold { font-weight: var(--font-weight-semibold); }
+.font-bold { font-weight: var(--font-weight-bold); }
+
+/* Margins */
+.m-0 { margin: 0; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+
+/* Text Alignment */
+.text-center { text-align: center; }
+
+/* Demo styles */
+.demo-content {
+  margin: 1rem 0;
+  padding: 1rem;
+  background-color: var(--color-surface-variant);
+  border-radius: 4px;
+  border: 1px solid var(--color-outline);
+}
+
+/* Custom Scrollbars */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-1);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  border: 2px solid var(--color-bg-1);
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 1);
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--color-bg-1);
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.3) var(--color-bg-2);
+}

package/src/style/foundations/motion.css

@@ -0,0 +1,164 @@
+/**
+ * Motion & Animation Tokens
+ * Consistent timing, easing, and animation patterns
+ */
+
+:root {
+  /* ===== DURATION TOKENS ===== */
+  /* Fast interactions (hover states, button feedback) */
+  --motion-duration-fast: 0.15s;
+  --motion-duration-base: 0.2s;
+  --motion-duration-slow: 0.3s;
+  --motion-duration-slower: 0.5s;
+
+  /* ===== EASING FUNCTIONS ===== */
+  /* Standard easing for most UI interactions */
+  --motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
+  /* Decelerating easing for elements entering the screen */
+  --motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
+  /* Accelerating easing for elements leaving the screen */
+  --motion-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
+  /* Sharp easing for emphasized interactions */
+  --motion-easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
+
+  /* ===== COMBINED TRANSITIONS ===== */
+  --motion-transition-fast: var(--motion-duration-fast) var(--motion-easing-standard);
+  --motion-transition-base: var(--motion-duration-base) var(--motion-easing-standard);
+  --motion-transition-slow: var(--motion-duration-slow) var(--motion-easing-standard);
+  --motion-transition-slower: var(--motion-duration-slower) var(--motion-easing-standard);
+
+  /* ===== SPECIFIC TRANSITIONS ===== */
+  /* Color transitions */
+  --motion-transition-color: color var(--motion-transition-base);
+  --motion-transition-background: background-color var(--motion-transition-base);
+
+  /* Transform transitions */
+  --motion-transition-transform: transform var(--motion-transition-base);
+  --motion-transition-scale: transform var(--motion-transition-fast);
+
+  /* Opacity transitions */
+  --motion-transition-opacity: opacity var(--motion-transition-base);
+  --motion-transition-fade-in: opacity var(--motion-duration-base) var(--motion-easing-decelerate);
+  --motion-transition-fade-out: opacity var(--motion-duration-base) var(--motion-easing-accelerate);
+
+  /* Border transitions */
+  --motion-transition-border: border-color var(--motion-transition-base);
+
+  /* Shadow transitions */
+  --motion-transition-shadow: box-shadow var(--motion-transition-base);
+
+  /* ===== HOVER STATE TRANSITIONS (No easing on entry, easing on exit) ===== */
+  /* Use these for hover/active states to show immediate response */
+  /* Entry (hover/active) is instant (linear), exit goes back with easing */
+  --motion-easing-linear: linear;
+  
+  /* Color transitions for hover states */
+  --motion-transition-color-hover-in: color var(--motion-duration-fast) var(--motion-easing-linear);
+  --motion-transition-color-hover-out: color var(--motion-duration-fast) var(--motion-easing-accelerate);
+  
+  /* Background transitions for hover states */
+  --motion-transition-background-hover-in: background-color var(--motion-duration-fast) var(--motion-easing-linear);
+  --motion-transition-background-hover-out: background-color var(--motion-duration-fast) var(--motion-easing-accelerate);
+  
+  /* Combined hover transitions */
+  --motion-transition-hover-in: color var(--motion-duration-fast) var(--motion-easing-linear), background-color var(--motion-duration-fast) var(--motion-easing-linear), box-shadow var(--motion-duration-fast) var(--motion-easing-linear), outline var(--motion-duration-fast) var(--motion-easing-accelerate);
+  --motion-transition-hover-out: color var(--motion-duration-fast) var(--motion-easing-accelerate), background-color var(--motion-duration-fast) var(--motion-easing-accelerate), box-shadow var(--motion-duration-fast) var(--motion-easing-accelerate), outline var(--motion-duration-fast) var(--motion-easing-accelerate);
+
+  /* ===== ANIMATION KEYFRAMES ===== */
+  /* Fade animations */
+  --motion-keyframes-fade-in: fadeIn 0.2s ease-out;
+  --motion-keyframes-fade-out: fadeOut 0.2s ease-in;
+
+  /* Slide animations */
+  --motion-keyframes-slide-in-right: slideInRight 0.3s ease-out;
+  --motion-keyframes-slide-out-right: slideOutRight 0.3s ease-in;
+  --motion-keyframes-slide-in-left: slideInLeft 0.3s ease-out;
+  --motion-keyframes-slide-out-left: slideOutLeft 0.3s ease-in;
+  --motion-keyframes-slide-in-top: slideInTop 0.3s ease-out;
+  --motion-keyframes-slide-out-top: slideOutTop 0.3s ease-in;
+  --motion-keyframes-slide-in-bottom: slideInBottom 0.3s ease-out;
+  --motion-keyframes-slide-out-bottom: slideOutBottom 0.3s ease-in;
+
+  /* Scale animations */
+  --motion-keyframes-scale-in: scaleIn 0.2s ease-out;
+  --motion-keyframes-scale-out: scaleOut 0.2s ease-in;
+}
+
+/* ===== KEYFRAME DEFINITIONS ===== */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slideOutRight {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+
+@keyframes slideInLeft {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slideOutLeft {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+@keyframes slideInTop {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideOutTop {
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+}
+
+@keyframes slideInBottom {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideOutBottom {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+
+@keyframes scaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes scaleOut {
+  from { transform: scale(1); opacity: 1; }
+  to { transform: scale(0.95); opacity: 0; }
+}
+
+/* ===== MOTION PREFERENCES ===== */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-fast: 0.01s;
+    --motion-duration-base: 0.01s;
+    --motion-duration-slow: 0.01s;
+    --motion-duration-slower: 0.01s;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms ;
+    animation-iteration-count: 1 ;
+    transition-duration: 0.01ms ;
+  }
+}

package/src/style/foundations/spacing.css

@@ -0,0 +1,51 @@
+/**
+ * Spacing Tokens
+ * Spacing scale, border radius, and transitions
+ */
+
+:root {
+  /* ===== SPACING SCALE ===== */
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+  --spacing-28: 112px;
+  --spacing-32: 128px;
+  --spacing-36: 144px;
+  --spacing-40: 160px;
+  --spacing-44: 176px;
+  --spacing-48: 192px;
+  --spacing-52: 208px;
+  --spacing-56: 224px;
+  --spacing-60: 240px;
+  --spacing-64: 256px;
+  --spacing-72: 288px;
+  --spacing-80: 320px;
+  --spacing-96: 384px;
+
+  /* ===== BORDER RADIUS ===== */
+  --radius-sm: 4px;
+  --radius-base: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* ===== TRANSITIONS ===== */
+  --transition-fast: 0.15s ease-in-out;
+  --transition-base: 0.2s ease-in-out;
+  --transition-slow: 0.3s ease-in-out;
+}

package/src/style/foundations/typography.css

@@ -0,0 +1,39 @@
+/**
+ * Typography Tokens
+ * Font families, sizes, weights, line heights, and letter spacing
+ */
+
+:root {
+  /* ===== FONT FAMILIES ===== */
+  --font-family-base: 'Rubik', sans-serif;
+  --font-family-heading: 'Signika', sans-serif;
+  --font-family-mono: 'Fira Code', 'Courier New', monospace;
+
+  /* ===== FONT SIZES ===== */
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 30px;
+  --font-size-4xl: 36px;
+
+  /* ===== FONT WEIGHTS ===== */
+  --font-weight-light: 200;
+  --font-weight-normal: 300;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* ===== LINE HEIGHTS ===== */
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* ===== LETTER SPACING ===== */
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.02em;
+}

package/src/style/foundations/z-index.css

@@ -0,0 +1,81 @@
+/**
+ * Z-Index Layering System
+ * 
+ * Organized z-index values for different UI layers.
+ * Each range is defined to prevent conflicts and maintain clear hierarchy.
+ * 
+ * Ranges:
+ * - Base: 1-99 (interactive elements, hover states)
+ * - Floating: 100-999 (floating elements like tooltips, badges)
+ * - Popover: 1000-1999 (dropdowns, popovers, menus)
+ * - Modal: 2000-2999 (modals, dialogs, drawers)
+ * - Notification: 3000-3999 (toasts, notifications)
+ * - Fixed: 4000-4999 (fixed headers, footers, sticky elements)
+ * - Overlay: 5000+ (full-page overlays, backdrops)
+ */
+
+:root {
+  /* ============================================
+     Base Layer (1-99)
+     Interactive elements, shadows, subtle overlays
+     ============================================ */
+  --z-base: 1;
+  --z-dropdown-shadow: 5;
+  --z-hover-state: 10;
+  --z-focus-ring: 15;
+
+  /* ============================================
+     Floating Layer (100-999)
+     Floating elements that appear above content
+     ============================================ */
+  --z-floating-base: 100;
+  --z-tooltip: 150;
+  --z-badge: 120;
+  --z-floating-action: 180;
+
+  /* ============================================
+     Popover Layer (1000-1999)
+     Dropdowns, context menus, select dropdowns, popovers
+     ============================================ */
+  --z-popover-base: 1000;
+  --z-select-dropdown: 1050;
+  --z-popover: 1100;
+  --z-context-menu: 1150;
+  --z-date-picker: 1200;
+  --z-time-picker: 1200;
+
+  /* ============================================
+     Modal Layer (2000-2999)
+     Modals, dialogs, drawers, lightboxes
+     ============================================ */
+  --z-modal-base: 2000;
+  --z-drawer: 2100;
+  --z-dialog: 2200;
+  --z-lightbox: 2300;
+
+  /* ============================================
+     Notification Layer (3000-3999)
+     Toasts, notifications, alerts
+     ============================================ */
+  --z-notification-base: 3000;
+  --z-toast: 3100;
+  --z-alert: 3200;
+  --z-banner: 3300;
+
+  /* ============================================
+     Fixed Layer (4000-4999)
+     Fixed positioned elements (headers, footers, sticky)
+     ============================================ */
+  --z-fixed-base: 4000;
+  --z-sticky-header: 4100;
+  --z-sticky-footer: 4100;
+  --z-fixed-nav: 4200;
+
+  /* ============================================
+     Overlay Layer (5000+)
+     Full-page overlays, backdrops
+     ============================================ */
+  --z-overlay-base: 5000;
+  --z-modal-backdrop: 5100;
+  --z-drawer-backdrop: 5100;
+}