@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/components/button.css

@@ -1,266 +0,0 @@
-/* ==========================================================================
-   BUTTON COMPONENT STYLES
-   ========================================================================== */
-
-/* Base Button */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xs);
-  font-family: var(--font-inter);
-  font-weight: var(--weight-medium);
-
-  border: 1px solid transparent;
-  cursor: pointer;
-  text-align: center;
-  white-space: nowrap;
-  transition: all 0.2s ease-in-out;
-  text-decoration: none;
-  outline: none;
-}
-
-/* Button Sizes */
-.btn-xs {
-  padding: 0 var(--spacing-lg);
-  height: 24px;
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm-size);
-}
-
-.btn-sm {
-  padding: 0 var(--spacing-xl);
-  height: 32px;
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm-size);
-}
-
-.btn-md {
-  padding: 0 var(--spacing-xl);
-  height: 40px;
-  border-radius: var(--radius-md);
-}
-
-.btn-lg {
-  padding: 0 var(--spacing-xl);
-  height: 48px;
-  border-radius: var(--radius-md);
-  gap: var(--spacing-sm); /* Larger gap for large buttons */
-}
-
-/* Icon Padding Compensation */
-/* 
- * Precise compensation for visual balance:
- * Base padding: 16px (--spacing-xl)
- * Icon gap: 4px (--spacing-xs) for sm/md, 6px (--spacing-sm) for lg
- * 
- * The compensation should account for:
- * 1. Half the icon's visual weight (icon_size / 2)  
- * 2. The gap between icon and text
- * 
- * Compensation = (icon_size / 2) + gap
- * Final padding = base_padding - compensation
- */
-
-/* Leading icon - reduce left padding for visual balance */
-.btn-xs.btn-icon-leading {
-  padding-left: var(--icon-compensation-xs-btn, calc(var(--spacing-lg) - var(--spacing-xs)));
-}
-
-.btn-sm.btn-icon-leading {
-  padding-left: var(--icon-compensation-sm-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
-}
-
-.btn-md.btn-icon-leading {
-  padding-left: var(--icon-compensation-md-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
-}
-
-.btn-lg.btn-icon-leading {
-  padding-left: var(--icon-compensation-lg-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
-}
-
-/* Trailing icon - reduce right padding for visual balance */
-.btn-xs.btn-icon-trailing {
-  padding-right: var(--icon-compensation-xs-btn, calc(var(--spacing-lg) - var(--spacing-xs)));
-}
-
-.btn-sm.btn-icon-trailing {
-  padding-right: var(--icon-compensation-sm-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
-}
-
-.btn-md.btn-icon-trailing {
-  padding-right: var(--icon-compensation-md-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
-}
-
-.btn-lg.btn-icon-trailing {
-  padding-right: var(--icon-compensation-lg-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
-}
-
-/* Button Hierarchies */
-.btn-primary {
-  background-color: var(--color-brand-600);
-  color: var(--color-white);
-  border-color: var(--color-brand-600);
-}
-
-.btn-secondary {
-  background-color: var(--color-white);
-  color: var(--color-neutral-600);
-  border-color: var(--color-neutral-300);
-}
-
-.btn-tertiary {
-  background-color: transparent;
-  color: var(--color-neutral-600);
-  border-color: transparent;
-}
-
-.btn-quaternary {
-  background-color: transparent;
-  color: var(--color-brand-600);
-  border-color: transparent;
-  /* font-weight: var(--weight-medium); */
-}
-
-/* Hover States */
-.btn-primary:hover:not(:disabled) {
-  background-color: var(--color-brand-700);
-  border-color: var(--color-brand-700);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-700);
-  border-color: var(--color-neutral-400);
-}
-
-.btn-tertiary:hover:not(:disabled) {
-  background-color: var(--color-neutral-100);
-  color: var(--color-neutral-700);
-}
-
-.btn-quaternary:hover:not(:disabled) {
-  color: var(--color-brand-700);
-}
-
-/* Active States */
-.btn-primary:active:not(:disabled) {
-  background-color: var(--color-brand-800);
-  border-color: var(--color-brand-800);
-}
-
-.btn-secondary:active:not(:disabled) {
-  background-color: var(--color-neutral-100);
-  border-color: var(--color-neutral-500);
-}
-
-.btn-tertiary:active:not(:disabled) {
-  background-color: var(--color-neutral-100);
-}
-
-.btn-quaternary:active:not(:disabled) {
-  color: var(--color-brand-800);
-}
-
-/* Focus State */
-.btn:focus,
-.btn-focus {
-  outline: 2px solid var(--color-brand-500);
-  outline-offset: 2px;
-}
-
-/* Disabled States */
-.btn:disabled,
-.btn-disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.btn-primary:disabled,
-.btn-primary.btn-disabled {
-  background-color: var(--color-neutral-200);
-  color: var(--color-neutral-400);
-  border-color: var(--color-neutral-200);
-}
-
-.btn-secondary:disabled,
-.btn-secondary.btn-disabled,
-.btn-tertiary:disabled,
-.btn-tertiary.btn-disabled,
-.btn-quaternary:disabled,
-.btn-quaternary.btn-disabled {
-  opacity: 0.5;
-}
-
-/* Loading State */
-.btn-loading {
-  cursor: wait;
-  pointer-events: none;
-}
-
-.btn-loading .btn-label {
-  opacity: 0.7;
-}
-
-/* ==========================================================================
-   BUTTON CONTENT ELEMENTS
-   ========================================================================== */
-
-/* Button Label */
-.btn-label {
-  display: inline-block;
-  line-height: inherit;
-  
-}
-
-/* Quaternary button labels get underline */
-.btn-quaternary .btn-label {
-  text-decoration: underline;
-}
-
-/* Icons */
-.btn-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.btn-icon-material {
-  line-height: 1;
-  vertical-align: middle;
-  color: inherit !important;
-}
-
-/* Icon-Only Buttons */
-.btn-icon-only {
-  padding: 0;
-}
-
-.btn-icon-only.btn-xs {
-  width: 24px;
-  height: 24px;
-}
-.btn-icon-only.btn-sm {
-  width: 32px;
-  height: 32px;
-}
-.btn-icon-only.btn-md {
-  width: 40px;
-  height: 40px;
-}
-.btn-icon-only.btn-lg {
-  width: 48px;
-  height: 48px;
-}
-
-.btn-icon-only .btn-icon-material {
-  margin: 0;
-}
-
-/* Loading Spinner */
-.btn-loading-icon {
-  line-height: 1;
-  vertical-align: middle;
-  color: inherit;
-}

package/components/chart-tooltip.css

@@ -1,96 +0,0 @@
-/* ==========================================================================
-   CHART TOOLTIP COMPONENT - REACT IMPLEMENTATION
-   Unified styles for chart tooltips matching Angular functionality
-   ========================================================================== */
-
-.chart-tooltip {
-  position: fixed;
-  z-index: 10000;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-  transform: translate(-50%, -100%);
-  margin-top: var(--spacing-sm);
-  width: max-content;
-  min-width: 120px;
-  max-width: 240px;
-}
-
-.chart-tooltip.storybook-mode {
-  position: absolute;
-  transform: translate(-50%, -100%);
-  margin-top: -10px;
-}
-
-.chart-tooltip.visible {
-  opacity: 1;
-}
-
-.tooltip-content {
-  background: var(--color-white) !important;
-  color: var(--color-neutral-900);
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--radius-md);
-  font-family: var(--font-inter);
-  font-size: var(--text-xs-size);
-  line-height: var(--text-xs-line);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.tooltip-header {
-  font-weight: var(--weight-semibold);
-  margin-bottom: var(--spacing-xs);
-  padding-bottom: var(--spacing-xs);
-  border-bottom: 1px solid var(--color-neutral-100);
-}
-
-.tooltip-items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-}
-
-.tooltip-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  white-space: nowrap;
-}
-
-.tooltip-dot {
-  width: var(--spacing-sm);
-  height: var(--spacing-sm);
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.tooltip-label {
-  color: var(--color-neutral-600);
-  font-weight: var(--weight-regular);
-  flex-shrink: 0;
-}
-
-.tooltip-value {
-  color: var(--color-neutral-900);
-  font-weight: var(--weight-medium);
-}
-
-.tooltip-total {
-  margin-top: var(--spacing-xs);
-  padding-top: var(--spacing-xs);
-  border-top: 1px solid var(--color-neutral-100);
-  display: flex;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-}
-
-.total-label {
-  color: var(--color-neutral-600);
-  font-weight: var(--weight-medium);
-}
-
-.total-value {
-  color: var(--color-neutral-900);
-  font-weight: var(--weight-semibold);
-}

package/components/checkbox-label.css

@@ -1,53 +0,0 @@
-.checkbox-label-wrapper {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.checkbox-label-wrapper.checkbox-label-disabled {
-  cursor: not-allowed;
-}
-
-/* Align checkbox with the label text baseline */
-.checkbox-label-wrapper .checkbox {
-  margin-top: 2px;
-}
-
-.checkbox-label-wrapper .checkbox-sm {
-  margin-top: 3px;
-}
-
-.label-content {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.label-text {
-  font-family: var(--font-inter);
-  font-size: var(--text-md-size);
-  font-weight: var(--weight-medium);
-  color: var(--color-neutral-900);
-  margin: 0;
-  cursor: inherit;
-  display: block;
-}
-
-.label-text.label-disabled {
-  color: var(--color-neutral-400);
-}
-
-.supporting-text {
-  font-family: var(--font-inter);
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-regular);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-500);
-  margin: 0;
-}
-
-.supporting-text.supporting-disabled {
-  color: var(--color-neutral-400);
-}

package/components/checkbox.css

@@ -1,127 +0,0 @@
-/* ==========================================================================
-   CHECKBOX COMPONENT STYLES - Following Figma Design
-   ========================================================================== */
-
-.checkbox {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-  background: var(--color-white);
-  border: 2px solid var(--color-neutral-300);
-  position: relative;
-}
-
-/* Size Variants - Following Figma Specs */
-.checkbox-sm {
-  width: 16px;
-  height: 16px;
-  border-radius: var(--radius-xs);
-}
-
-.checkbox-md {
-  width: 20px;
-  height: 20px;
-  border-radius: var(--radius-sm);
-}
-
-/* State: Default (unchecked) */
-.checkbox {
-  border-color: var(--color-neutral-300);
-}
-
-/* State: Checked */
-.checkbox.checkbox-checked {
-  background: var(--color-brand-600);
-  border-color: var(--color-brand-600);
-  color: var(--color-white);
-}
-
-/* State: Hover */
-.checkbox:hover:not(.checkbox-disabled) {
-  background: var(--color-neutral-100);
-  border-color: var(--color-neutral-300);
-}
-
-.checkbox.checkbox-checked:hover:not(.checkbox-disabled) {
-  background: var(--color-brand-700);
-  border-color: var(--color-brand-700);
-}
-
-/* State: Focused */
-.checkbox.checkbox-focused:not(.checkbox-disabled) {
-  border-color: var(--color-neutral-300);
-  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
-    0px 0px 0px 2px var(--color-white);
-}
-
-.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-disabled) {
-  background: var(--color-brand-600);
-  border-color: var(--color-brand-600);
-  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
-    0px 0px 0px 2px var(--color-white);
-}
-
-/* State: Disabled */
-.checkbox.checkbox-disabled {
-  background: var(--color-neutral-50);
-  border-color: var(--color-neutral-300);
-  cursor: not-allowed;
-  opacity: 1;
-}
-
-.checkbox.checkbox-checked.checkbox-disabled {
-  background: var(--color-neutral-50);
-  border: 2px solid var(--color-neutral-300);
-  color: var(--color-neutral-300);
-}
-
-/* Icons */
-.checkbox-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: var(--icon-size-md);
-  line-height: 1;
-  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
-}
-
-.checkbox .check-icon {
-  color: var(--color-white) !important;
-}
-
-.checkbox-disabled .check-icon {
-  color: var(--color-neutral-300) !important;
-}
-
-.checkbox .minus-icon {
-  color: var(--color-white) !important;
-}
-
-.checkbox-disabled .minus-icon {
-  color: var(--color-neutral-300) !important;
-}
-
-/* Adjust icon sizes for different checkbox sizes */
-.checkbox-sm .checkbox-icon {
-  font-size: var(--icon-size-xs);
-}
-
-.checkbox-md .checkbox-icon {
-  font-size: var(--icon-size-md);
-}
-
-/* Focus outline for accessibility */
-.checkbox:focus {
-  outline: none;
-}
-
-.checkbox:focus:not(.checkbox-disabled) {
-  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
-    0px 0px 0px 2px var(--color-white);
-}

package/components/container-footer.css

@@ -1,22 +0,0 @@
-/* Base Container Footer Styles */
-.container-footer {
-  background: var(--color-white);
-  border: 1px solid var(--color-neutral-200);
-  border-top: 1px solid var(--color-neutral-200);
-  border-radius: var(--radius-none) var(--radius-none) var(--radius-xl)
-    var(--radius-xl);
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.container-footer-content {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: var(--spacing-md) var(--spacing-2xl);
-}
-
-/* Minimal size - smaller top/bottom padding */
-.container-footer-minimal .container-footer-content {
-  padding: var(--spacing-sm) var(--spacing-2xl);
-}

package/components/container.css

@@ -1,17 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xl);
-  padding: var(--spacing-2xl);
-  background: var(--color-white);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: var(--radius-xl);
-  width: fit-content;
-  font-family: var(--font-inter);
-}
-
-/* Container with footer - removes bottom border radius and border */
-.container-with-footer {
-  border-bottom: none;
-  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-none) var(--radius-none);
-}