@actabldesign/bellhop-styles 0.0.4 → 0.0.12

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

package/src/utilities/_truncation.scss

@@ -0,0 +1,126 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - TRUNCATION
+   Text overflow and truncation utilities
+
+   Dependencies:
+   - None (standalone utilities)
+
+   Generated classes:
+   - .bh-truncate (single line ellipsis)
+   - .bh-line-clamp_{n} (multi-line clamp)
+   - .bh-truncate_none (disable truncation)
+   - .bh-break-word, .bh-break-all (word breaking)
+   ========================================================================== */
+
+/* --- SINGLE LINE TRUNCATE --- */
+
+.bh-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* --- MULTI-LINE CLAMP --- */
+/* Uses -webkit-line-clamp for cross-browser support */
+
+.bh-line-clamp_1 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+
+.bh-line-clamp_2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.bh-line-clamp_3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.bh-line-clamp_4 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.bh-line-clamp_5 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+}
+
+.bh-line-clamp_6 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+  overflow: hidden;
+}
+
+/* --- DISABLE TRUNCATION --- */
+
+.bh-truncate_none {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+/* --- WORD BREAKING --- */
+
+.bh-break-word {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.bh-break-all {
+  word-break: break-all;
+}
+
+.bh-break-normal {
+  word-break: normal;
+  overflow-wrap: normal;
+}
+
+.bh-break-keep {
+  word-break: keep-all;
+}
+
+/* --- WHITE SPACE --- */
+
+.bh-whitespace-normal {
+  white-space: normal;
+}
+
+.bh-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.bh-whitespace-pre {
+  white-space: pre;
+}
+
+.bh-whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.bh-whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+/* --- TEXT OVERFLOW --- */
+
+.bh-text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.bh-text-clip {
+  text-overflow: clip;
+}

package/src/utilities/_visibility.scss

@@ -0,0 +1,117 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - VISIBILITY
+   Responsive show/hide and accessibility utilities
+
+   Dependencies:
+   - _semantic.scss (tokens)
+   - _responsive.scss (breakpoint mixins)
+
+   Generated classes:
+   - .bh-hidden, .bh-invisible (always hidden)
+   - .bh-hide@{breakpoint} (responsive hide)
+   - .bh-show@{breakpoint} (responsive show)
+   - .bh-sr-only (screen reader only)
+   - .bh-hide@print, .bh-show@print (print utilities)
+   ========================================================================== */
+
+@use '../mixins/responsive' as *;
+
+/* --- ALWAYS HIDDEN --- */
+
+.bh-hidden {
+  display: none !important;
+}
+
+.bh-invisible {
+  visibility: hidden;
+}
+
+/* --- RESPONSIVE HIDE --- */
+/* Hidden at breakpoint and below (mobile-first) */
+
+.bh-hide\@mobile {
+  @include bh-breakpoint-only('mobile') {
+    display: none !important;
+  }
+}
+
+.bh-hide\@tablet {
+  @include bh-breakpoint-down('tablet') {
+    display: none !important;
+  }
+}
+
+.bh-hide\@desktop {
+  @include bh-breakpoint-down('desktop') {
+    display: none !important;
+  }
+}
+
+/* --- RESPONSIVE SHOW --- */
+/* Hidden by default, shown at breakpoint and above */
+
+.bh-show\@tablet {
+  display: none !important;
+
+  @include bh-breakpoint-up('tablet') {
+    display: block !important;
+  }
+}
+
+.bh-show\@desktop {
+  display: none !important;
+
+  @include bh-breakpoint-up('desktop') {
+    display: block !important;
+  }
+}
+
+.bh-show\@wide {
+  display: none !important;
+
+  @include bh-breakpoint-up('wide') {
+    display: block !important;
+  }
+}
+
+/* --- SCREEN READER ONLY --- */
+/* Accessible to screen readers but visually hidden */
+
+.bh-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Allow element to be focusable when navigated to via keyboard */
+.bh-sr-only-focusable:focus,
+.bh-sr-only-focusable:active {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* --- PRINT UTILITIES --- */
+
+.bh-hide\@print {
+  @media print {
+    display: none !important;
+  }
+}
+
+.bh-show\@print {
+  @media not print {
+    display: none !important;
+  }
+}

package/src/utilities.scss

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   BELLHOP UTILITIES
+   Public entry point for all utility classes
+
+   Usage:
+   @import '@actabldesign/bellhop-styles/utilities';
+
+   Or import specific utilities:
+   @import '@actabldesign/bellhop-styles/utilities/spacing';
+
+   Available utilities:
+
+   Phase 1 - Foundation:
+   - Spacing: margin, padding, gap with responsive variants
+   - Breakpoints: CSS custom properties for JavaScript access
+
+   Phase 2 - Layout:
+   - Grid: CSS Grid layout utilities
+   - Flex: Flexbox alignment utilities
+   - Sizing: Width/height utilities
+
+   Phase 3 - Content:
+   - Visibility: Show/hide utilities with responsive and print support
+   - Truncation: Text overflow and line-clamp utilities
+   - Scrollable: Overflow and scroll behavior utilities
+   ========================================================================== */
+
+// Import design tokens first (required for utilities)
+@use './bh-tokens/semantic';
+
+// Import all utilities
+@use './utilities/index';