@actabldesign/bellhop-styles 0.0.4 → 0.0.12

package/src/utilities/_flex.scss

@@ -0,0 +1,228 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - FLEX
+   Flexbox layout and alignment utilities
+
+   Dependencies:
+   - _semantic.scss (tokens)
+   - _responsive.scss (breakpoint mixins)
+
+   Generated classes:
+   - .bh-flex, .bh-inline-flex (display)
+   - .bh-flex-row, .bh-flex-col (direction)
+   - .bh-flex-wrap (wrapping)
+   - .bh-justify_{alignment} (main axis)
+   - .bh-align_{alignment} (cross axis)
+   - .bh-self_{alignment} (self alignment)
+   - .bh-flex_{grow/shrink} (grow/shrink)
+   ========================================================================== */
+
+@use '../mixins/responsive' as *;
+
+/* --- BASE FLEX --- */
+
+.bh-flex {
+  display: flex;
+}
+
+.bh-inline-flex {
+  display: inline-flex;
+}
+
+/* --- FLEX DIRECTION --- */
+
+.bh-flex-row {
+  flex-direction: row;
+}
+
+.bh-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.bh-flex-col {
+  flex-direction: column;
+}
+
+.bh-flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+/* --- FLEX WRAP --- */
+
+.bh-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.bh-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.bh-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+/* --- JUSTIFY CONTENT (Main Axis) --- */
+
+.bh-justify_start {
+  justify-content: flex-start;
+}
+
+.bh-justify_end {
+  justify-content: flex-end;
+}
+
+.bh-justify_center {
+  justify-content: center;
+}
+
+.bh-justify_between {
+  justify-content: space-between;
+}
+
+.bh-justify_around {
+  justify-content: space-around;
+}
+
+.bh-justify_evenly {
+  justify-content: space-evenly;
+}
+
+.bh-justify_stretch {
+  justify-content: stretch;
+}
+
+/* --- ALIGN ITEMS (Cross Axis) --- */
+
+.bh-align_start {
+  align-items: flex-start;
+}
+
+.bh-align_end {
+  align-items: flex-end;
+}
+
+.bh-align_center {
+  align-items: center;
+}
+
+.bh-align_baseline {
+  align-items: baseline;
+}
+
+.bh-align_stretch {
+  align-items: stretch;
+}
+
+/* --- ALIGN CONTENT (Multi-line) --- */
+
+.bh-align-content_start {
+  align-content: flex-start;
+}
+
+.bh-align-content_end {
+  align-content: flex-end;
+}
+
+.bh-align-content_center {
+  align-content: center;
+}
+
+.bh-align-content_between {
+  align-content: space-between;
+}
+
+.bh-align-content_around {
+  align-content: space-around;
+}
+
+.bh-align-content_evenly {
+  align-content: space-evenly;
+}
+
+.bh-align-content_stretch {
+  align-content: stretch;
+}
+
+/* --- ALIGN SELF --- */
+
+.bh-self_auto {
+  align-self: auto;
+}
+
+.bh-self_start {
+  align-self: flex-start;
+}
+
+.bh-self_end {
+  align-self: flex-end;
+}
+
+.bh-self_center {
+  align-self: center;
+}
+
+.bh-self_baseline {
+  align-self: baseline;
+}
+
+.bh-self_stretch {
+  align-self: stretch;
+}
+
+/* --- FLEX GROW/SHRINK/BASIS --- */
+
+.bh-flex_1 {
+  flex: 1 1 0%;
+}
+
+.bh-flex_auto {
+  flex: 1 1 auto;
+}
+
+.bh-flex_initial {
+  flex: 0 1 auto;
+}
+
+.bh-flex_none {
+  flex: none;
+}
+
+/* --- FLEX GROW --- */
+
+.bh-grow {
+  flex-grow: 1;
+}
+
+.bh-grow_0 {
+  flex-grow: 0;
+}
+
+/* --- FLEX SHRINK --- */
+
+.bh-shrink {
+  flex-shrink: 1;
+}
+
+.bh-shrink_0 {
+  flex-shrink: 0;
+}
+
+/* --- ORDER --- */
+
+.bh-order_first {
+  order: -9999;
+}
+
+.bh-order_last {
+  order: 9999;
+}
+
+.bh-order_none {
+  order: 0;
+}
+
+// Generate .bh-order_1 through .bh-order_12
+@for $i from 1 through 12 {
+  .bh-order_#{$i} {
+    order: $i;
+  }
+}

package/src/utilities/_grid.scss

@@ -0,0 +1,189 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - GRID
+   CSS Grid layout utilities
+
+   Dependencies:
+   - _semantic.scss (tokens)
+   - _responsive.scss (breakpoint mixins)
+
+   Generated classes:
+   - .bh-grid (display: grid)
+   - .bh-grid-cols_{n} (grid-template-columns)
+   - .bh-grid-cols_auto-fit (responsive auto-fit)
+   - .bh-col-span_{n} (grid-column span)
+   - .bh-grid-rows_{n} (grid-template-rows)
+   - .bh-grid-place_{alignment} (place-items)
+   - Responsive variants for column counts
+   ========================================================================== */
+
+@use '../mixins/responsive' as *;
+
+/* --- BASE GRID --- */
+
+.bh-grid {
+  display: grid;
+}
+
+/* --- GRID COLUMNS (Explicit) --- */
+
+// Generate .bh-grid-cols_1 through .bh-grid-cols_12 with responsive variants
+@for $i from 1 through 12 {
+  @include generate-responsive(
+    'bh-grid-cols_#{$i}',
+    (
+      'grid-template-columns': repeat($i, minmax(0, 1fr)),
+    )
+  );
+}
+
+/* --- GRID COLUMNS (Auto-fit Responsive) --- */
+
+.bh-grid-cols_auto-fit {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(var(--bh-grid-min, 280px), 1fr)
+  );
+}
+
+/* --- COLUMN SPAN --- */
+
+// Generate .bh-col-span_1 through .bh-col-span_12
+@for $i from 1 through 12 {
+  .bh-col-span_#{$i} {
+    grid-column: span #{$i} / span #{$i};
+  }
+}
+
+// Full width column span
+.bh-col-span_full {
+  grid-column: 1 / -1;
+}
+
+/* --- GRID ROWS --- */
+
+// Generate .bh-grid-rows_1 through .bh-grid-rows_6
+@for $i from 1 through 6 {
+  .bh-grid-rows_#{$i} {
+    grid-template-rows: repeat($i, minmax(0, 1fr));
+  }
+}
+
+/* --- ROW SPAN --- */
+
+// Generate .bh-row-span_1 through .bh-row-span_6
+@for $i from 1 through 6 {
+  .bh-row-span_#{$i} {
+    grid-row: span #{$i} / span #{$i};
+  }
+}
+
+// Full height row span
+.bh-row-span_full {
+  grid-row: 1 / -1;
+}
+
+/* --- GRID ALIGNMENT --- */
+
+// Place items (both axes)
+.bh-grid-place_center {
+  place-items: center;
+}
+
+.bh-grid-place_start {
+  place-items: start;
+}
+
+.bh-grid-place_end {
+  place-items: end;
+}
+
+.bh-grid-place_stretch {
+  place-items: stretch;
+}
+
+// Justify items (inline/horizontal axis)
+.bh-grid-justify_start {
+  justify-items: start;
+}
+
+.bh-grid-justify_end {
+  justify-items: end;
+}
+
+.bh-grid-justify_center {
+  justify-items: center;
+}
+
+.bh-grid-justify_stretch {
+  justify-items: stretch;
+}
+
+// Align items (block/vertical axis)
+.bh-grid-align_start {
+  align-items: start;
+}
+
+.bh-grid-align_end {
+  align-items: end;
+}
+
+.bh-grid-align_center {
+  align-items: center;
+}
+
+.bh-grid-align_stretch {
+  align-items: stretch;
+}
+
+.bh-grid-align_baseline {
+  align-items: baseline;
+}
+
+/* --- GRID CONTENT ALIGNMENT --- */
+
+// Place content (both axes)
+.bh-grid-place-content_center {
+  place-content: center;
+}
+
+.bh-grid-place-content_start {
+  place-content: start;
+}
+
+.bh-grid-place-content_end {
+  place-content: end;
+}
+
+.bh-grid-place-content_between {
+  place-content: space-between;
+}
+
+.bh-grid-place-content_around {
+  place-content: space-around;
+}
+
+.bh-grid-place-content_evenly {
+  place-content: space-evenly;
+}
+
+/* --- GRID FLOW --- */
+
+.bh-grid-flow_row {
+  grid-auto-flow: row;
+}
+
+.bh-grid-flow_col {
+  grid-auto-flow: column;
+}
+
+.bh-grid-flow_dense {
+  grid-auto-flow: dense;
+}
+
+.bh-grid-flow_row-dense {
+  grid-auto-flow: row dense;
+}
+
+.bh-grid-flow_col-dense {
+  grid-auto-flow: column dense;
+}

package/src/utilities/_index.scss

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - BARREL FILE
+   Central import point for all utility modules
+
+   Phase 1: Foundation (Current)
+   - Breakpoints
+   - Spacing (margin, padding, gap)
+
+   Phase 2: Layout (Planned)
+   - Grid
+   - Flex
+   - Sizing
+
+   Phase 3: Content (Planned)
+   - Visibility
+   - Truncation
+   - Scrollable
+   ========================================================================== */
+
+// Phase 1: Foundation
+@forward './breakpoints';
+@forward './spacing';
+
+// Phase 2: Layout
+@forward './grid';
+@forward './flex';
+@forward './sizing';
+
+// Phase 3: Content
+@forward './visibility';
+@forward './truncation';
+@forward './scrollable';

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;
+}