@hellboy/ds 0.1.2

package/src/style/components/color-control/color-control.css

@@ -0,0 +1,126 @@
+/**
+ * Color Control Component Styles
+ * Interactive color hue adjustment controls
+ */
+
+.color-control {
+  width: 100%;
+}
+
+.color-control__header {
+  margin-bottom: var(--spacing-6);
+}
+
+.color-control__title {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--color-foreground-1);
+  margin: 0 0 var(--spacing-2) 0;
+}
+
+.color-control__description {
+  color: var(--color-foreground-2);
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+}
+
+.color-control__sliders {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  margin-bottom: var(--spacing-6);
+}
+
+.color-control__slider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+.color-control__slider .slider {
+  flex: 1;
+}
+
+.color-control__slider .slider__header {
+  margin-bottom: var(--spacing-1);
+}
+
+.color-control__preview {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.color-control__actions {
+  margin-bottom: var(--spacing-6);
+}
+
+.color-control__reset-btn {
+  background-color: var(--color-bg-2);
+  color: var(--color-foreground-1);
+  border: 1px solid var(--color-foreground-2);
+  border-color: rgba(0, 0, 0, 0.1);
+  padding: var(--spacing-2) var(--spacing-4);
+  border-radius: 6px;
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: all var(--transition-base);
+}
+
+.color-control__reset-btn:hover:not(:disabled) {
+  background-color: var(--color-action-primary);
+  color: var(--color-on-action-primary);
+  border-color: var(--color-action-primary);
+}
+
+.color-control__reset-btn:active:not(:disabled) {
+  background-color: var(--color-action-primary-active);
+}
+
+.color-control__reset-btn:focus-visible:not(:disabled) {
+  outline: 2px solid var(--color-action-primary);
+  outline-offset: 2px;
+}
+
+.color-control__reset-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.color-control__preview-section {
+  border-top: 1px solid var(--color-foreground-2);
+  border-top-color: rgba(0, 0, 0, 0.1);
+  padding-top: var(--spacing-4);
+}
+
+.color-control__preview-title {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--color-foreground-1);
+  margin: 0 0 var(--spacing-3) 0;
+}
+
+.color-control__color-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: var(--spacing-3);
+}
+
+.color-control__color-sample {
+  padding: var(--spacing-3);
+  border-radius: 8px;
+  color: white;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 2px solid transparent;
+  transition: border-color var(--transition-base);
+}
+
+.color-control__color-sample:hover {
+  border-color: rgba(255, 255, 255, 0.3);
+}

package/src/style/components/drag-handle/drag-handle.css

@@ -0,0 +1,68 @@
+/* Drag Handle Component Styles */
+
+.drag-handle {
+  position: relative;
+  background-color: var(--color-bg-1);
+  /* border: 1px solid var(--color-foreground-2); */
+  border-color: rgba(0, 0, 0, 0.1);
+  transition: all var(--transition-base, 0.2s ease);
+  z-index: 10;
+}
+
+.drag-handle:hover:not(:disabled) {
+  background-color: var(--color-action-primary);
+  /* border-color: var(--color-action-primary); */
+  /* outline: 1px solid var(--color-action-primary); */
+}
+
+.drag-handle:active:not(:disabled),
+.drag-handle--dragging {
+  background-color: var(--color-action-primary-hover);
+  /* border-color: var(--color-action-primary); */
+}
+
+.drag-handle--dragging .drag-handle__indicator,
+.drag-handle:active:not(:disabled) .drag-handle__indicator {
+  background-color: var(--color-on-action-primary);
+}
+
+/* Vertical drag handle (between columns) */
+.drag-handle--vertical {
+  width: 6px;
+  cursor: col-resize;
+  margin: 0 -4px; /* Negative margin to center between columns */
+}
+
+.drag-handle--vertical .drag-handle__indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 32px;
+  background-color: var(--color-foreground-2);
+  border-radius: 1px;
+  transition: all var(--transition-base, 0.2s ease);
+}
+.drag-handle--vertical:hover .drag-handle__indicator {
+  width: 4px;
+}
+
+/* Horizontal drag handle (between rows) */
+.drag-handle--horizontal {
+  height: 8px;
+  cursor: row-resize;
+  margin: -4px 0; /* Negative margin to center between rows */
+}
+
+.drag-handle--horizontal .drag-handle__indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 2px;
+  width: 24px;
+  background-color: var(--color-foreground-2);
+  border-radius: 1px;
+  transition: background-color var(--transition-base, 0.2s ease);
+}

package/src/style/components/drawer/drawer.css

@@ -0,0 +1,210 @@
+.drawer {
+  position: fixed;
+  background-color: var(--color-bg-1);
+  border: 1px solid var(--color-foreground-2);
+  border-color: rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transition: background-color var(--motion-transition-background);
+  /* Prevent initial flash when portal is created */
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Show drawer when AriaKit mounts it - apply fade-in animation alongside slide */
+.drawer[data-enter] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  animation: 
+    var(--motion-keyframes-slide-in-right),
+    fadeIn var(--motion-duration-base) var(--motion-easing-decelerate);
+}
+
+/* Hide drawer when AriaKit closes it - apply fade-out animation alongside slide */
+.drawer[data-leave] {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  animation: 
+    var(--motion-keyframes-slide-out-right),
+    fadeOut var(--motion-duration-base) var(--motion-easing-accelerate);
+}
+
+/* Drawer positions */
+.drawer--right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.drawer--left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.drawer--top {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.drawer--bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.drawer__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  /* Prevent initial flash */
+  opacity: 0;
+  visibility: hidden;
+  /* Smooth ease-in/out animation */
+  transition: opacity var(--motion-duration-base) var(--motion-easing-standard),
+              visibility var(--motion-duration-base) var(--motion-easing-standard);
+}
+
+/* Show backdrop when AriaKit mounts it - ease in */
+.drawer__backdrop[data-enter] {
+  opacity: 1;
+  visibility: visible;
+  animation: fadeIn var(--motion-duration-base) var(--motion-easing-decelerate);
+}
+
+/* Hide backdrop when AriaKit closes it - ease out */
+.drawer__backdrop[data-leave] {
+  opacity: 0;
+  visibility: hidden;
+  animation: fadeOut var(--motion-duration-base) var(--motion-easing-accelerate);
+}
+
+.drawer__content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4, 1rem);
+  border-bottom: 1px solid var(--color-foreground-2);
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.drawer__title {
+  margin: 0;
+  font-size: var(--font-size-lg, 1.125rem);
+  font-weight: 600;
+  color: var(--color-foreground-1);
+}
+
+/* ===== CLOSE BUTTON INTERACTION STATES ===== */
+.drawer__close {
+  background: none;
+  border: none;
+  padding: var(--spacing-2, 0.5rem);
+  cursor: pointer;
+  border-radius: var(--radius-base);
+  color: var(--color-foreground-1);
+  font-size: var(--font-size-lg, 1.125rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--motion-transition-background), var(--motion-transition-color);
+}
+
+/* Pointer hover */
+.drawer__close:hover:not(:disabled) {
+  background-color: hsla(0, 0%, var(--lightness-bg-2), 0.5);
+  color: var(--color-foreground-1);
+}
+
+/* Active/Pressed */
+.drawer__close:active:not(:disabled) {
+  background-color: hsla(0, 0%, var(--lightness-bg-3), 0.7);
+}
+
+/* Focus indicator */
+.drawer__close:focus-visible:not(:disabled) {
+  outline: 2px solid var(--color-action-primary);
+  outline-offset: 2px;
+}
+
+/* Touch support */
+@media (hover: none) and (pointer: coarse) {
+  .drawer__close:active:not(:disabled) {
+    background-color: hsla(0, 0%, var(--lightness-bg-2), 0.6);
+  }
+}
+
+.drawer__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-4, 1rem);
+  color: var(--color-foreground-1);
+}
+
+/* ===== ANIMATIONS ===== */
+/* Right drawer animations */
+.drawer--right[data-enter] {
+  animation: 
+    slideInRight 0.3s ease-out,
+    fadeIn var(--motion-duration-base) var(--motion-easing-decelerate);
+}
+
+.drawer--right[data-leave] {
+  animation: 
+    slideOutRight 0.3s ease-in,
+    fadeOut var(--motion-duration-base) var(--motion-easing-accelerate);
+}
+
+/* Left drawer animations */
+.drawer--left[data-enter] {
+  animation: 
+    slideInLeft 0.3s ease-out,
+    fadeIn var(--motion-duration-base) var(--motion-easing-decelerate);
+}
+
+.drawer--left[data-leave] {
+  animation: 
+    slideOutLeft 0.3s ease-in,
+    fadeOut var(--motion-duration-base) var(--motion-easing-accelerate);
+}
+
+/* Top drawer animations */
+.drawer--top[data-enter] {
+  animation: 
+    slideInTop 0.3s ease-out,
+    fadeIn var(--motion-duration-base) var(--motion-easing-decelerate);
+}
+
+.drawer--top[data-leave] {
+  animation: 
+    slideOutTop 0.3s ease-in,
+    fadeOut var(--motion-duration-base) var(--motion-easing-accelerate);
+}
+
+/* Bottom drawer animations */
+.drawer--bottom[data-enter] {
+  animation: 
+    slideInBottom 0.3s ease-out,
+    fadeIn var(--motion-duration-base) var(--motion-easing-decelerate);
+}
+
+.drawer--bottom[data-leave] {
+  animation: 
+    slideOutBottom 0.3s ease-in,
+    fadeOut var(--motion-duration-base) var(--motion-easing-accelerate);
+}

package/src/style/components/floating-bar/floating-bar.css

@@ -0,0 +1,39 @@
+/**
+ * Floating Bar Component Styles
+ * Provides sticky positioning within the main layout container
+ */
+
+.floating-bar {
+  position: sticky;
+  width: 100%;
+  z-index: var(--z-floating-base);
+  margin-top: var(--spacing-8);
+  margin-bottom: var(--spacing-8);
+  background-color: var(--color-bg-1);
+  border-radius: var(--radius-base);
+}
+
+/* Top positioned bar */
+.floating-bar--top {
+  top: 0;
+}
+
+/* Bottom positioned bar */
+.floating-bar--bottom {
+  bottom: 0;
+}
+
+/* Content wrapper */
+.floating-bar__content {
+  padding: 0 var(--spacing-4);
+}
+
+/* Top positioned bar styling */
+.floating-bar--top .floating-bar__content {
+  box-shadow: 0 2px 42px rgba(0, 0, 0, 0.2);
+}
+
+/* Bottom positioned bar styling */
+.floating-bar--bottom .floating-bar__content {
+  box-shadow: 0 -2px 42px rgba(0, 0, 0, 0.8);
+}

package/src/style/components/footer/footer.css

@@ -0,0 +1,108 @@
+/**
+ * Footer Component Styles
+ * Global footer for design system pages
+ */
+
+.footer {
+  background-color: var(--color-bg-2);
+  border-top: 1px solid var(--color-bg-3);
+  margin-top: auto;
+  padding: var(--spacing-6) var(--spacing-4);
+  font-size: var(--font-size-sm);
+  color: var(--color-foreground-3);
+  position: relative;
+  z-index: 1;
+}
+
+.footer__container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-4);
+}
+/* 
+.footer__content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--spacing-6);
+  margin-bottom: var(--spacing-6);
+} */
+/* 
+.footer__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+} */
+
+/* .footer__title {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-foreground-1);
+  line-height: var(--line-height-tight);
+}
+
+.footer__links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+} */
+
+/* .footer__link {
+  color: var(--color-foreground-2);
+  text-decoration: underline;
+  font-weight: 400;
+  transition: color var(--motion-transition-color);
+  cursor: pointer;
+} */
+/* 
+.footer__link:hover {
+  color: var(--color-action-primary);
+}
+
+.footer__link:active {
+  color: var(--color-action-primary-active);
+}
+
+.footer__divider {
+  height: 1px;
+  background-color: var(--color-bg-3);
+  margin: var(--spacing-6) 0;
+} */
+
+.footer__bottom {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  text-align: center;
+}
+
+.footer__copyright {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-foreground-3);
+}
+/* 
+.footer__tech {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-foreground-3);
+} */
+
+/* Responsive */
+@media (max-width: 768px) {
+  .footer {
+    padding: var(--spacing-4) 0;
+  }
+
+  .footer__content {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-4);
+  }
+
+  .footer__bottom {
+    flex-direction: column;
+  }
+}

package/src/style/components/grid/grid.css

@@ -0,0 +1,33 @@
+/**
+ * Grid Component Styles
+ * Flexible grid layout component for organizing content
+ */
+
+.grid {
+  display: grid;
+  gap: var(--grid-gap, 1rem);
+}
+
+/* Auto-fit grid (responsive) */
+.grid--auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-width, 250px), 1fr));
+}
+
+/* Auto-fill grid (fills available space) */
+.grid--auto-fill {
+  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-width, 250px), 1fr));
+}
+
+/* Fixed number of columns */
+.grid--cols-1 { grid-template-columns: repeat(1, 1fr); }
+.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
+.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
+.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
+.grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
+.grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
+.grid--cols-7 { grid-template-columns: repeat(7, 1fr); }
+.grid--cols-8 { grid-template-columns: repeat(8, 1fr); }
+.grid--cols-9 { grid-template-columns: repeat(9, 1fr); }
+.grid--cols-10 { grid-template-columns: repeat(10, 1fr); }
+.grid--cols-11 { grid-template-columns: repeat(11, 1fr); }
+.grid--cols-12 { grid-template-columns: repeat(12, 1fr); }

package/src/style/components/header/header.css

@@ -0,0 +1,44 @@
+/**
+ * Header Component Styles
+ * Responsive header component with title and subtitle support
+ */
+
+.header {
+  background-color: var(--color-bg-2);
+  border-bottom: 1px solid var(--color-foreground-2);
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+  padding: var(--spacing-8) var(--spacing-8) 0 var(--spacing-8);
+  transition: background-color var(--motion-transition-background), border-color var(--motion-transition-color);
+}
+
+.header__container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.header__title {
+  margin: 0 0 var(--spacing-2) 0;
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-foreground-1);
+}
+
+.header__subtitle {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-foreground-2);
+}
+
+@media (min-width: 768px) {
+  .header {
+    padding: var(--spacing-2) var(--spacing-4) 0 var(--spacing-4);
+  }
+}
+
+@media (min-width: 1024px) {
+  .header {
+    padding: var(--spacing-4) var(--spacing-8) 0 var(--spacing-8);
+  }
+}

package/src/style/components/icons/icons.css

@@ -0,0 +1,44 @@
+/* Skeleton and basic icon styles */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon--skeleton {
+  background: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0.06) 100%);
+  border-radius: 4px;
+  animation: hb-skeleton 1.2s ease-in-out infinite;
+}
+
+@keyframes hb-skeleton {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+/**
+ * Icon Component Styles
+ */
+
+.icon {
+  display: inline-block;
+  flex-shrink: 0;
+  transition: color var(--transition-base, 0.2s ease);
+}
+
+.icon--interactive {
+  cursor: pointer;
+  color: var(--color-foreground-1);
+}
+
+.icon--interactive:hover:not(:disabled) {
+  color: var(--color-action-primary-hover);
+}
+
+.icon--interactive:active:not(:disabled) {
+  color: var(--color-action-primary-active);
+}
+
+.icon--interactive:disabled {
+  cursor: not-allowed;
+  color: var(--color-foreground-2);
+}