@hellboy/ds 0.1.3 → 0.2.7

package/src/style/_shared/field.css

@@ -1,69 +0,0 @@
-/**
- * Field Base Styles
- * Shared styles for form field inputs (Input, Select, etc)
- * Provides consistent styling for outline, focus, hover, error states
- */
-
-/* Base field styling */
-.field {
-  width: 100%;
-  font-family: inherit;
-  font-size: var(--font-size-base);
-  line-height: 1.5;
-  color: var(--color-foreground-1);
-  background-color: var(--color-bg-1);
-  border: none;
-  outline: 2px solid var(--color-bg-3);
-  outline-offset: -2px;
-  border-radius: var(--radius-base);
-  padding: var(--spacing-2) var(--spacing-3);
-  transition: outline-color var(--transition-base), box-shadow var(--transition-base);
-  cursor: pointer;
-}
-
-/* Size variants */
-.field--sm {
-  font-size: var(--font-size-sm);
-  padding: var(--spacing-1) var(--spacing-2);
-}
-
-.field--lg {
-  font-size: var(--font-size-lg);
-  padding: var(--spacing-3) var(--spacing-4);
-}
-
-/* Focus state - uses action colors */
-.field:focus,
-.field:focus-visible {
-  outline-color: var(--color-action-primary);
-  box-shadow: 0 0 0 3px hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 0.1);
-}
-
-/* Hover state */
-.field:hover:not(:disabled):not(.field--error) {
-  outline-color: var(--color-action-primary-hover);
-}
-
-/* Error state */
-.field--error {
-  outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
-}
-
-.field--error:focus,
-.field--error:focus-visible {
-  outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
-  box-shadow: 0 0 0 3px hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 0.1);
-}
-
-/* Disabled state */
-.field:disabled,
-.field--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  background-color: var(--color-bg-2);
-}
-
-/* Open state (for selectable fields) */
-.field--open {
-  outline-color: var(--color-action-primary);
-}

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

@@ -1,126 +0,0 @@
-/**
- * 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/drawer/drawer.css

@@ -1,210 +0,0 @@
-.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

@@ -1,39 +0,0 @@
-/**
- * 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

@@ -1,108 +0,0 @@
-/**
- * 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

@@ -1,33 +0,0 @@
-/**
- * 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

@@ -1,44 +0,0 @@
-/**
- * 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);
-  }
-}