@hellboy/ds 0.1.2 → 0.2.7

package/src/style/components/layout/layout.css

@@ -1,205 +0,0 @@
-/* Layout Component Styles */
-
-/* Base Layout */
-.layout {
-  min-height: 100vh;
-}
-
-/* ===== SINGLE VARIANT ===== */
-/* coluna1 (main) */
-.layout--single {
-  display: flex;
-  flex-direction: column;
-}
-
-.layout--single .layout__container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.layout--single .layout__main {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.layout--single .layout__header {
-  flex-shrink: 0;
-}
-
-.layout--single .layout__footer {
-  flex-shrink: 0;
-}
-
-.layout--single .layout__bottom-bar {
-  flex-shrink: 0;
-}
-
-/* ===== STACKED VARIANT ===== */
-/* coluna1 (main + bottom bar) */
-.layout--stacked {
-  display: flex;
-  flex-direction: column;
-}
-
-.layout--stacked .layout__container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.layout--stacked .layout__main {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.layout--stacked .layout__header {
-  flex-shrink: 0;
-}
-
-.layout--stacked .layout__footer {
-  flex-shrink: 0;
-}
-
-.layout--stacked .layout__bottom-bar {
-  flex-shrink: 0;
-}
-
-/* ===== SIDEBAR-MAIN-SIDEBAR VARIANT ===== */
-/* coluna1 (sidebar) + coluna2 (page: header + main + footer) + coluna3 (sidebar) */
-.layout--sidebar-main-sidebar {
-  display: flex;
-  flex-direction: row;
-  min-height: 100vh;
-}
-
-.layout--sidebar-main-sidebar .layout__container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0; /* Prevent flex overflow */
-  max-height: 100vh;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.layout--sidebar-main-sidebar .layout__sidebar {
-  flex-shrink: 0;
-  /* width is set dynamically via inline styles */
-  max-height: 100vh;
-  background-color: var(--color-bg-1);
-  border-right: 1px solid var(--color-foreground-2);
-  border-right-color: rgba(0, 0, 0, 0.1);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.layout--sidebar-main-sidebar .layout__sidebar--right {
-  border-right: none;
-  border-left: 1px solid var(--color-foreground-2);
-  border-left-color: rgba(0, 0, 0, 0.1);
-  background-color: var(--color-bg-2);
-}
-
-/* Drag Handle in Layout */
-.layout--sidebar-main-sidebar .drag-handle {
-  flex-shrink: 0;
-}
-
-.layout--sidebar-main-sidebar .layout__container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0; /* Prevent flex overflow */
-}
-
-.layout--sidebar-main-sidebar .layout__main {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.layout--sidebar-main-sidebar .layout__header {
-  flex-shrink: 0;
-}
-
-.layout--sidebar-main-sidebar .layout__footer {
-  flex-shrink: 0;
-}
-
-.layout--sidebar-main-sidebar .layout__bottom-bar {
-  flex-shrink: 0;
-}
-
-/* ===== SHARED STYLES ===== */
-.layout__header,
-.layout__page-header {
-  background-color: var(--color-bg-1);
-  border-bottom: 1px solid var(--color-foreground-2);
-  border-bottom-color: rgba(0, 0, 0, 0.1);
-  padding: var(--spacing-6) var(--spacing-4);
-  transition: all var(--transition-base, 0.2s ease);
-}
-
-.layout__footer,
-.layout__page-footer {
-  background-color: var(--color-bg-1);
-  border-top: 1px solid var(--color-foreground-2);
-  border-top-color: rgba(0, 0, 0, 0.1);
-  /* padding: var(--spacing-6) var(--spacing-4); */
-  transition: all var(--transition-base, 0.2s ease);
-  margin-top: auto;
-}
-
-
-
-/* ===== RESPONSIVE ===== */
-@media (max-width: 1024px) {
-  .layout--sidebar-main-sidebar .layout__sidebar {
-    width: 240px;
-  }
-}
-
-@media (max-width: 768px) {
-  .layout--sidebar-main-sidebar {
-    flex-direction: column;
-  }
-
-  .layout--sidebar-main-sidebar .layout__container {
-    flex-direction: column;
-  }
-
-  .layout--sidebar-main-sidebar .layout__sidebar {
-    width: 100%;
-    border-right: none;
-    border-bottom: 1px solid var(--color-foreground-2);
-    border-bottom-color: rgba(0, 0, 0, 0.1);
-  }
-
-  .layout--sidebar-main-sidebar .layout__sidebar--right {
-    border-left: none;
-    border-top: 1px solid var(--color-foreground-2);
-    border-top-color: rgba(0, 0, 0, 0.1);
-    border-bottom: none;
-  }
-}
-
-/* ===== BOTTOM BAR ===== */
-.layout__bottom-bar {
-  flex-shrink: 0;
-  background-color: var(--color-bg-1);
-  border-top: 1px solid var(--color-foreground-2);
-  border-top-color: rgba(0, 0, 0, 0.1);
-  min-height: 60px;
-  display: flex;
-  align-items: center;
-  padding: 0 var(--spacing-4);
-}

package/src/style/components/navbar/navbar.css

@@ -1,342 +0,0 @@
-/* Navbar Component Styles */
-
-.navbar {
-  width: 100%;
-  height: 100vh;
-  background-color: var(--color-bg-2);
-  border-right: 1px solid var(--color-foreground-2);
-  border-right-color: rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-  transition: background-color var(--transition-base, 0.2s ease);
-}
-
-/* Webkit scrollbar styles (Chrome, Safari, Edge) */
-.navbar::-webkit-scrollbar {
-  width: 8px;
-}
-
-.navbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.navbar::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  transition: background-color 0.2s ease;
-}
-
-.navbar:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 1);
-}
-
-.navbar--header {
-  font-size: 1.4rem;
-  margin: 0 0 8px 0;
-  color: var(--color-foreground-1);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1, 0.25rem);
-}
-
-.navbar__content {
-  padding: var(--spacing-4, 1rem);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2, 0.5rem);
-}
-.expanded .navbar__content {
-  min-width: 210px;
-} 
-
-
-/* Menu Item Styles */
-.navbar__menu-item {
-  display: flex ;
-  align-items: center ;
-  gap: var(--spacing-3, 0.75rem) ;
-  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem) ;
-  color: var(--color-foreground-2) ;
-  border-radius: var(--border-radius-sm, 4px) ;
-  /* transition: background-color var(--motion-duration-fast) var(--motion-easing-linear), color var(--motion-duration-fast) var(--motion-easing-linear) ; */
-  font-size: var(--font-size-sm, 0.875rem) ;
-  font-weight: 500 ;
-  width: 100% ;
-  position: relative ;
-  border: none ;
-  background: transparent;
-  cursor: pointer ;
-  font-family: inherit ;
-  text-align: left ;
-}
-
-/* Link-specific styles */
-.navbar__menu-item[href] {
-  text-decoration: none;
-}
-
-.navbar__menu-item:not(:hover):not(:active):not(.navbar__menu-item--active) {
-  transition: background-color var(--motion-duration-fast) var(--motion-easing-accelerate), color var(--motion-duration-fast) var(--motion-easing-accelerate);
-}
-
-.navbar__menu-item:hover:not(:disabled) {
-  background-color: var(--color-action-primary) ;
-  color: var(--color-on-action-primary) ;
-}
-
-.navbar__menu-item:active:not(:disabled) {
-  background-color: var(--color-action-primary-active) ;
-  color: var(--color-on-action-primary) ;
-}
-
-.navbar__menu-item:focus-visible:not(:disabled) {
-  outline: 2px solid var(--color-action-primary) ;
-  outline-offset: 2px ;
-}
-
-.navbar__menu-item--active {
-  background-color: var(--color-action-primary) ;
-  color: var(--color-on-action-primary) ;
-}
-
-.navbar__menu-item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-.navbar__menu-item-label {
-  flex: 1;
-  min-width: 0;
-}
-
-.collapsed .navbar__menu-item-label {
-  display: none;
-}
-
-.collapsed .navbar__menu-item {
-  width: auto;
-  padding: var(--spacing-2);
-  justify-content: center;
-}
-
-.navbar--logo {
-  display: none;
-}
-.expanded .navbar--logo {
-  display: inline-block;
-}
-/* Menu Group Styles */
-.navbar__menu-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.navbar__content .navbar__menu-group > .navbar__menu-group-content {
-  margin-left: var(--spacing-8, 2rem);
-}
-
-/* Headers alternam entre expandido e colapsado */
-.navbar__menu-group-header-expanded {
-  display: block;
-}
-
-.navbar__menu-group-header-collapsed {
-  display: none;
-}
-
-.collapsed .navbar__menu-group-header-expanded {
-  display: none;
-}
-
-.collapsed .navbar__menu-group-header-collapsed {
-  display: block;
-}
-
-.collapsed .navbar__menu-group-content {
-  display: none ;
-}
-
-.navbar__menu-group-header {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3, 0.75rem);
-  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
-  background: none;
-  border: none;
-  text-align: left;
-  color: var(--color-foreground-2);
-  border-radius: var(--border-radius-sm, 4px);
-  transition: background-color var(--motion-duration-fast) var(--motion-easing-linear), color var(--motion-duration-fast) var(--motion-easing-linear);
-  font-size: var(--font-size-sm, 0.875rem);
-  font-weight: 600;
-  cursor: pointer;
-  width: 100%;
-}
-
-.navbar__menu-group-header--collapsed {
-  justify-content: center;
-  padding: var(--spacing-2);
-}
-
-.navbar__menu-group-header--collapsed.navbar__menu-group-header--has-active {
-  background-color: var(--color-action-primary);
-  color: var(--color-on-action-primary);
-}
-
-.navbar__menu-group-header--toggle {
-  background-color: var(--color-action-secondary);
-  color: var(--color-on-action-secondary);
-  box-shadow: 0 0 0 2px var(--color-action-primary);
-}
-
-.navbar__menu-group-header--toggle:hover:not(:disabled) {
-  background-color: var(--color-action-secondary-hover);
-  color: var(--color-on-action-secondary);
-}
-
-.navbar__menu-group-header--active {
-  background-color: var(--color-action-primary);
-  color: var(--color-on-action-primary);
-}
-
-.navbar__menu-group-header:not(:hover) {
-  transition: background-color var(--motion-duration-fast) var(--motion-easing-accelerate), color var(--motion-duration-fast) var(--motion-easing-accelerate);
-}
-
-.navbar__menu-group-header:hover:not(:disabled) {
-  background-color: var(--color-bg-2);
-  color: var(--color-foreground-1);
-}
-
-.navbar__menu-group-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-.navbar__menu-group-title {
-  flex: 1;
-  min-width: 0;
-}
-
-.collapsed .navbar__menu-group-title {
-  display: none;
-}
-
-.navbar__menu-group-chevron {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-  transition: transform 0.2s ease;
-}
-
-.collapsed .navbar__menu-group-chevron {
-  display: none;
-}
-
-.navbar__menu-group-chevron--expanded {
-  transform: rotate(180deg);
-}
-
-.navbar__menu-group-header--static {
-  cursor: default;
-  font-weight: 300;
-  color: var(--color-foreground-5);
-  background-color: transparent;
-  margin: var(--spacing-2) 0 0 0;
-  /* border-radius: var(--border-radius-sm, 4px); */
-}
-
-.navbar__menu-group-header--static:hover {
-  background-color: transparent;
-  color: var(--color-foreground-5);
-}
-
-/* Menu Category */
-.navbar__menu-category {
-  font-size: var(--font-size-xs);
-  font-weight: 600;
-  color: var(--color-foreground-3);
-  /* padding: var(--spacing-2) var(--spacing-3); */
-  /* padding-bottom: var(--spacing-1); */
-  letter-spacing: 0.5px;
-  margin-top: var(--spacing-2);
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .navbar {
-    width: 280px;
-  }
-
-  .navbar__content {
-    padding: var(--spacing-3, 0.75rem);
-  }
-}
-
-/* Menu Category Styles */
-.navbar__menu-category {
-  display: flex;
-  flex-direction: column;
-}
-
-.navbar__menu-category-title {
-  font-size: var(--font-size-xs, 0.75rem);
-  font-weight: var(--font-weight-semibold, 300);
-  color: var(--color-foreground-5);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-wide, 0.02em);
-  padding: var(--spacing-1, 0.5rem) var(--spacing-3, 0.75rem);
-}
-
-.collapsed .navbar__menu-category-title {
-  display: none;
-}
-
-.navbar__menu-category-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1, 0.25rem);
-}
-
-/* Popover do MenuGroup quando colapsado */
-.navbar__menu-group-popover {
-  min-width: 200px;
-  max-width: 300px;
-}
-
-.navbar__menu-group-popover-title {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-foreground-1);
-  padding: var(--spacing-2) var(--spacing-3) 0 var(--spacing-3);
-  border-bottom: 1px solid var(--color-border);
-  margin-bottom: var(--spacing-1);
-}
-
-.navbar__menu-group-popover-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  padding: var(--spacing-2);
-}
-
-.navbar__menu-group-popover-content .navbar__menu-item {
-  width: 100%;
-}
-
-.navbar__menu-group-popover-content .navbar__menu-item-label {
-  display: block ;
-}

package/src/style/components/popover/popover.css

@@ -1,44 +0,0 @@
-.popover {
-  position: fixed; /* Changed from absolute to fixed for portal positioning */
-  background: var(--color-bg-1);
-  /* border: 1px solid var(--color-bg-3); */
-  /* border-color: rgba(0, 0, 0, 0.15); */
-  border-radius: var(--radius-base);
-  outline: 2px solid var(--color-bg-3);
-  outline-offset: -2px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  z-index: 9999;
-  min-width: 200px;
-  margin-top: var(--spacing-1);
-  /* padding: var(--spacing-4, 1rem); */
-  animation: popover-slide-in var(--transition-base, 0.2s ease);
-  /* Prevent initial flash by starting hidden */
-  opacity: 0;
-  visibility: hidden;
-  /* Prevent affecting layout flow */
-  pointer-events: none;
-}
-
-.popover--right {
-  margin-top: 0;
-  margin-left: var(--spacing-2);
-}
-
-.popover:hover {
-  outline: 2px solid var(--color-primary-hover);
-}
-
-@keyframes popover-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.popover__content {
-  /* Additional styling if needed */
-}

package/src/style/components/section/section.css

@@ -1,67 +0,0 @@
-/**
- * Section Component Styles
- * Responsive section component for content organization
- */
-
-.section {
-  padding: var(--spacing-8) var(--spacing-4);
-  border-bottom: 1px solid var(--color-foreground-2);
-  border-bottom-color: rgba(0, 0, 0, 0.1);
-  width: 100%;
-  transition: border-color var(--motion-transition-color);
-}
-
-.section:last-of-type {
-  border-bottom: none;
-}
-
-.section__title {
-  margin: 0 0 var(--spacing-4) 0;
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-foreground-1);
-}
-
-.section__content {
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-relaxed);
-  color: var(--color-foreground-2);
-}
-
-.section--sm {
-  padding: var(--spacing-4) var(--spacing-4);
-}
-
-.section--lg {
-  padding: var(--spacing-12) var(--spacing-4);
-}
-
-@media (min-width: 768px) {
-  .section {
-    padding: var(--spacing-8) var(--spacing-6);
-  }
-
-  .section--sm {
-    padding: var(--spacing-4) var(--spacing-6);
-  }
-
-  .section--lg {
-    padding: var(--spacing-12) var(--spacing-6);
-  }
-}
-
-@media (min-width: 1024px) {
-  .section {
-    padding: var(--spacing-8) var(--spacing-8);
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .section--sm {
-    padding: var(--spacing-4) var(--spacing-8);
-  }
-
-  .section--lg {
-    padding: var(--spacing-12) var(--spacing-8);
-  }
-}