@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/src/utilities/_scrollable.scss

@@ -0,0 +1,239 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - SCROLLABLE
+   Overflow and scroll container utilities
+
+   Dependencies:
+   - None (standalone utilities)
+
+   Generated classes:
+   - .bh-overflow_{type} (overflow control)
+   - .bh-scroll-x, .bh-scroll-y (directional scroll)
+   - .bh-scroll_smooth (smooth scrolling)
+   - .bh-scrollbar_thin, .bh-scrollbar_hidden (scrollbar styling)
+   - .bh-snap-x, .bh-snap-y (scroll snap)
+   ========================================================================== */
+
+/* --- OVERFLOW CONTROL --- */
+
+.bh-overflow_auto {
+  overflow: auto;
+}
+
+.bh-overflow_hidden {
+  overflow: hidden;
+}
+
+.bh-overflow_visible {
+  overflow: visible;
+}
+
+.bh-overflow_scroll {
+  overflow: scroll;
+}
+
+.bh-overflow_clip {
+  overflow: clip;
+}
+
+/* --- OVERFLOW X (Horizontal) --- */
+
+.bh-overflow-x_auto {
+  overflow-x: auto;
+}
+
+.bh-overflow-x_hidden {
+  overflow-x: hidden;
+}
+
+.bh-overflow-x_visible {
+  overflow-x: visible;
+}
+
+.bh-overflow-x_scroll {
+  overflow-x: scroll;
+}
+
+.bh-overflow-x_clip {
+  overflow-x: clip;
+}
+
+/* --- OVERFLOW Y (Vertical) --- */
+
+.bh-overflow-y_auto {
+  overflow-y: auto;
+}
+
+.bh-overflow-y_hidden {
+  overflow-y: hidden;
+}
+
+.bh-overflow-y_visible {
+  overflow-y: visible;
+}
+
+.bh-overflow-y_scroll {
+  overflow-y: scroll;
+}
+
+.bh-overflow-y_clip {
+  overflow-y: clip;
+}
+
+/* --- DIRECTIONAL SCROLL --- */
+/* Convenience classes for common scroll patterns */
+
+.bh-scroll-x {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.bh-scroll-y {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* --- SCROLL BEHAVIOR --- */
+
+.bh-scroll_smooth {
+  scroll-behavior: smooth;
+}
+
+.bh-scroll_auto {
+  scroll-behavior: auto;
+}
+
+/* --- OVERSCROLL BEHAVIOR --- */
+
+.bh-overscroll_auto {
+  overscroll-behavior: auto;
+}
+
+.bh-overscroll_contain {
+  overscroll-behavior: contain;
+}
+
+.bh-overscroll_none {
+  overscroll-behavior: none;
+}
+
+.bh-overscroll-x_auto {
+  overscroll-behavior-x: auto;
+}
+
+.bh-overscroll-x_contain {
+  overscroll-behavior-x: contain;
+}
+
+.bh-overscroll-x_none {
+  overscroll-behavior-x: none;
+}
+
+.bh-overscroll-y_auto {
+  overscroll-behavior-y: auto;
+}
+
+.bh-overscroll-y_contain {
+  overscroll-behavior-y: contain;
+}
+
+.bh-overscroll-y_none {
+  overscroll-behavior-y: none;
+}
+
+/* --- SCROLLBAR STYLING --- */
+
+.bh-scrollbar_thin {
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--bh-neutral-100);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--bh-neutral-400);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--bh-neutral-500);
+    }
+  }
+}
+
+.bh-scrollbar_hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.bh-scrollbar_auto {
+  scrollbar-width: auto;
+
+  &::-webkit-scrollbar {
+    width: auto;
+    height: auto;
+  }
+}
+
+/* --- SCROLL SNAP --- */
+/* For carousels and snap-scroll containers */
+
+.bh-snap-x {
+  scroll-snap-type: x mandatory;
+
+  & > * {
+    scroll-snap-align: start;
+  }
+}
+
+.bh-snap-y {
+  scroll-snap-type: y mandatory;
+
+  & > * {
+    scroll-snap-align: start;
+  }
+}
+
+.bh-snap-both {
+  scroll-snap-type: both mandatory;
+
+  & > * {
+    scroll-snap-align: start;
+  }
+}
+
+/* --- SNAP ALIGNMENT --- */
+
+.bh-snap-start {
+  scroll-snap-align: start;
+}
+
+.bh-snap-center {
+  scroll-snap-align: center;
+}
+
+.bh-snap-end {
+  scroll-snap-align: end;
+}
+
+.bh-snap-align_none {
+  scroll-snap-align: none;
+}
+
+/* --- SNAP STOP --- */
+
+.bh-snap-normal {
+  scroll-snap-stop: normal;
+}
+
+.bh-snap-always {
+  scroll-snap-stop: always;
+}

package/src/utilities/_sizing.scss

@@ -0,0 +1,229 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - SIZING
+   Width, height, and size constraint utilities
+
+   Dependencies:
+   - _semantic.scss (tokens)
+   - _responsive.scss (breakpoint mixins)
+
+   Generated classes:
+   - .bh-w_{size} (width)
+   - .bh-max-w_{size} (max-width)
+   - .bh-min-w_{size} (min-width)
+   - .bh-h_{size} (height)
+   - .bh-max-h_{size} (max-height)
+   - .bh-min-h_{size} (min-height)
+   ========================================================================== */
+
+@use '../mixins/responsive' as *;
+
+/* --- WIDTH --- */
+
+.bh-w_auto {
+  width: auto;
+}
+
+.bh-w_full {
+  width: 100%;
+}
+
+.bh-w_screen {
+  width: 100vw;
+}
+
+.bh-w_fit {
+  width: fit-content;
+}
+
+.bh-w_min {
+  width: min-content;
+}
+
+.bh-w_max {
+  width: max-content;
+}
+
+/* --- MAX WIDTH (Container Sizes) --- */
+
+.bh-max-w_xs {
+  max-width: 320px;
+}
+
+.bh-max-w_sm {
+  max-width: 640px;
+}
+
+.bh-max-w_md {
+  max-width: 768px;
+}
+
+.bh-max-w_lg {
+  max-width: 1120px;
+}
+
+.bh-max-w_xl {
+  max-width: 1440px;
+}
+
+.bh-max-w_wide {
+  max-width: 1680px;
+}
+
+.bh-max-w_full {
+  max-width: 100%;
+}
+
+.bh-max-w_none {
+  max-width: none;
+}
+
+.bh-max-w_fit {
+  max-width: fit-content;
+}
+
+.bh-max-w_min {
+  max-width: min-content;
+}
+
+.bh-max-w_max {
+  max-width: max-content;
+}
+
+/* --- MIN WIDTH --- */
+
+.bh-min-w_0 {
+  min-width: 0;
+}
+
+.bh-min-w_full {
+  min-width: 100%;
+}
+
+.bh-min-w_fit {
+  min-width: fit-content;
+}
+
+.bh-min-w_min {
+  min-width: min-content;
+}
+
+.bh-min-w_max {
+  min-width: max-content;
+}
+
+/* --- HEIGHT --- */
+
+.bh-h_auto {
+  height: auto;
+}
+
+.bh-h_full {
+  height: 100%;
+}
+
+.bh-h_screen {
+  height: 100vh;
+}
+
+.bh-h_fit {
+  height: fit-content;
+}
+
+.bh-h_min {
+  height: min-content;
+}
+
+.bh-h_max {
+  height: max-content;
+}
+
+/* --- MAX HEIGHT --- */
+
+.bh-max-h_full {
+  max-height: 100%;
+}
+
+.bh-max-h_screen {
+  max-height: 100vh;
+}
+
+.bh-max-h_none {
+  max-height: none;
+}
+
+.bh-max-h_fit {
+  max-height: fit-content;
+}
+
+.bh-max-h_min {
+  max-height: min-content;
+}
+
+.bh-max-h_max {
+  max-height: max-content;
+}
+
+/* --- MIN HEIGHT --- */
+
+.bh-min-h_0 {
+  min-height: 0;
+}
+
+.bh-min-h_full {
+  min-height: 100%;
+}
+
+.bh-min-h_screen {
+  min-height: 100vh;
+}
+
+.bh-min-h_fit {
+  min-height: fit-content;
+}
+
+.bh-min-h_min {
+  min-height: min-content;
+}
+
+.bh-min-h_max {
+  min-height: max-content;
+}
+
+/* --- SIZE (Both Width and Height) --- */
+
+.bh-size_auto {
+  width: auto;
+  height: auto;
+}
+
+.bh-size_full {
+  width: 100%;
+  height: 100%;
+}
+
+.bh-size_fit {
+  width: fit-content;
+  height: fit-content;
+}
+
+/* --- ASPECT RATIO --- */
+
+.bh-aspect_square {
+  aspect-ratio: 1 / 1;
+}
+
+.bh-aspect_video {
+  aspect-ratio: 16 / 9;
+}
+
+.bh-aspect_portrait {
+  aspect-ratio: 3 / 4;
+}
+
+.bh-aspect_landscape {
+  aspect-ratio: 4 / 3;
+}
+
+.bh-aspect_auto {
+  aspect-ratio: auto;
+}

package/src/utilities/_spacing.scss

@@ -0,0 +1,187 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - SPACING
+   Margin, padding, and gap utilities with responsive variants
+
+   Dependencies:
+   - _semantic.scss (tokens)
+   - _responsive.scss (breakpoint mixins)
+
+   Generated classes:
+   - .bh-m_{size}, .bh-m-{side}_{size}, .bh-m-x_{size}, .bh-m-y_{size}
+   - .bh-p_{size}, .bh-p-{side}_{size}, .bh-p-x_{size}, .bh-p-y_{size}
+   - .bh-gap_{size}, .bh-gap-x_{size}, .bh-gap-y_{size}
+   - Responsive variants: .bh-{utility}@tablet, @desktop, @wide
+   ========================================================================== */
+
+@use '../mixins/responsive' as *;
+
+// Spacing scale map (references CSS custom properties from _semantic.scss)
+$bh-spacing-scale: (
+  'none': var(--bh-spacing-none),
+  'xxs': var(--bh-spacing-xxs),
+  'xs': var(--bh-spacing-xs),
+  'sm': var(--bh-spacing-sm),
+  'md': var(--bh-spacing-md),
+  'lg': var(--bh-spacing-lg),
+  'xl': var(--bh-spacing-xl),
+  '2xl': var(--bh-spacing-2xl),
+  '3xl': var(--bh-spacing-3xl),
+  '4xl': var(--bh-spacing-4xl),
+  '5xl': var(--bh-spacing-5xl),
+  '6xl': var(--bh-spacing-6xl),
+);
+
+// Sides for directional utilities
+$bh-spacing-sides: (
+  'top': 'top',
+  'right': 'right',
+  'bottom': 'bottom',
+  'left': 'left',
+);
+
+/* --- MARGIN UTILITIES --- */
+
+// All sides: .bh-m_{size}
+@each $size-name, $size-value in $bh-spacing-scale {
+  @include generate-responsive(
+    'bh-m_#{$size-name}',
+    (
+      'margin': $size-value,
+    )
+  );
+}
+
+// Directional: .bh-m-{side}_{size}
+@each $side-name, $side-value in $bh-spacing-sides {
+  @each $size-name, $size-value in $bh-spacing-scale {
+    @include generate-responsive(
+      'bh-m-#{$side-name}_#{$size-name}',
+      (
+        'margin-#{$side-value}': $size-value,
+      )
+    );
+  }
+}
+
+// Horizontal: .bh-m-x_{size}
+@each $size-name, $size-value in $bh-spacing-scale {
+  @include generate-responsive(
+    'bh-m-x_#{$size-name}',
+    (
+      'margin-left': $size-value,
+      'margin-right': $size-value,
+    )
+  );
+}
+
+// Vertical: .bh-m-y_{size}
+@each $size-name, $size-value in $bh-spacing-scale {
+  @include generate-responsive(
+    'bh-m-y_#{$size-name}',
+    (
+      'margin-top': $size-value,
+      'margin-bottom': $size-value,
+    )
+  );
+}
+
+// Auto margins: .bh-m_auto, .bh-m-x_auto, .bh-m-{side}_auto
+@include generate-responsive(
+  'bh-m_auto',
+  (
+    'margin': auto,
+  )
+);
+@include generate-responsive(
+  'bh-m-x_auto',
+  (
+    'margin-left': auto,
+    'margin-right': auto,
+  )
+);
+@each $side-name, $side-value in $bh-spacing-sides {
+  @include generate-responsive(
+    'bh-m-#{$side-name}_auto',
+    (
+      'margin-#{$side-value}': auto,
+    )
+  );
+}
+
+/* --- PADDING UTILITIES --- */
+
+// All sides: .bh-p_{size}
+@each $size-name, $size-value in $bh-spacing-scale {
+  @include generate-responsive(
+    'bh-p_#{$size-name}',
+    (
+      'padding': $size-value,
+    )
+  );
+}
+
+// Directional: .bh-p-{side}_{size}
+@each $side-name, $side-value in $bh-spacing-sides {
+  @each $size-name, $size-value in $bh-spacing-scale {
+    @include generate-responsive(
+      'bh-p-#{$side-name}_#{$size-name}',
+      (
+        'padding-#{$side-value}': $size-value,
+      )
+    );
+  }
+}
+
+// Horizontal: .bh-p-x_{size}
+@each $size-name, $size-value in $bh-spacing-scale {
+  @include generate-responsive(
+    'bh-p-x_#{$size-name}',
+    (
+      'padding-left': $size-value,
+      'padding-right': $size-value,
+    )
+  );
+}
+
+// Vertical: .bh-p-y_{size}
+@each $size-name, $size-value in $bh-spacing-scale {
+  @include generate-responsive(
+    'bh-p-y_#{$size-name}',
+    (
+      'padding-top': $size-value,
+      'padding-bottom': $size-value,
+    )
+  );
+}
+
+/* --- GAP UTILITIES --- */
+
+// Gap: .bh-gap_{size}
+@each $size-name, $size-value in $bh-spacing-scale {
+  @include generate-responsive(
+    'bh-gap_#{$size-name}',
+    (
+      'gap': $size-value,
+    )
+  );
+}
+
+// Column gap: .bh-gap-x_{size}
+@each $size-name, $size-value in $bh-spacing-scale {
+  @include generate-responsive(
+    'bh-gap-x_#{$size-name}',
+    (
+      'column-gap': $size-value,
+    )
+  );
+}
+
+// Row gap: .bh-gap-y_{size}
+@each $size-name, $size-value in $bh-spacing-scale {
+  @include generate-responsive(
+    'bh-gap-y_#{$size-name}',
+    (
+      'row-gap': $size-value,
+    )
+  );
+}