@actabldesign/bellhop-styles 0.0.4 → 0.0.12

package/src/bh-tokens/components/toggle.scss

@@ -0,0 +1,320 @@
+/* ==========================================================================
+   BH-TOGGLE COMPONENT STYLES - Material You Design
+   Uses tokens from _toggle.tokens.scss
+   ========================================================================== */
+
+@use './_toggle.tokens.scss';
+
+:host {
+  display: inline-block;
+}
+
+/* ==========================================================================
+   TOGGLE WRAPPER
+   ========================================================================== */
+
+.toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.toggle-with-text.toggle-size-sm {
+  gap: var(--bh-toggle-gap-with-text-sm);
+}
+
+.toggle-with-text.toggle-size-md {
+  gap: var(--bh-toggle-gap-with-text-md);
+}
+
+/* ==========================================================================
+   TOGGLE SWITCH BASE
+   ========================================================================== */
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  border-radius: var(--bh-toggle-border-radius);
+  cursor: pointer;
+  transition: var(--bh-toggle-transition);
+  outline: none;
+  border: 1px solid transparent;
+  background: transparent;
+  overflow: visible;
+  padding: 0;
+}
+
+.toggle-switch:focus {
+  outline: none;
+}
+
+.toggle-switch.toggle-disabled {
+  cursor: not-allowed;
+  opacity: var(--bh-toggle-disabled-opacity);
+}
+
+/* ==========================================================================
+   TOGGLE SWITCH SIZES
+   ========================================================================== */
+
+.toggle-switch.toggle-sm {
+  width: var(--bh-toggle-width-sm);
+  height: var(--bh-toggle-height-sm);
+}
+
+.toggle-switch.toggle-md {
+  width: var(--bh-toggle-width-md);
+  height: var(--bh-toggle-height-md);
+}
+
+/* ==========================================================================
+   TOGGLE SWITCH STATES - UNPRESSED (FALSE)
+   ========================================================================== */
+
+.toggle-switch.toggle-unpressed {
+  background-color: var(--bh-toggle-unpressed-bg);
+  border-color: transparent;
+}
+
+.toggle-switch.toggle-unpressed.toggle-hover {
+  background-color: var(--bh-toggle-unpressed-bg-hover);
+  border-color: transparent;
+}
+
+.toggle-switch.toggle-unpressed.toggle-focus {
+  background-color: var(--bh-toggle-unpressed-bg-focus);
+  border-color: transparent;
+}
+
+/* Focus ring for unpressed state */
+.toggle-switch.toggle-unpressed.toggle-focus .toggle-button::after {
+  content: '';
+  position: absolute;
+  top: var(--bh-toggle-focus-ring-offset);
+  left: var(--bh-toggle-focus-ring-offset);
+  right: var(--bh-toggle-focus-ring-offset);
+  bottom: var(--bh-toggle-focus-ring-offset);
+  border-radius: var(--bh-toggle-border-radius);
+  background: var(--bh-toggle-unpressed-focus-ring);
+  opacity: var(--bh-toggle-unpressed-focus-ring-opacity);
+  pointer-events: none;
+}
+
+.toggle-switch.toggle-unpressed.toggle-disabled {
+  background-color: var(--bh-toggle-unpressed-bg-disabled);
+  border-color: transparent;
+}
+
+/* ==========================================================================
+   TOGGLE SWITCH STATES - PRESSED (TRUE)
+   ========================================================================== */
+
+.toggle-switch.toggle-pressed {
+  background-color: var(--bh-toggle-pressed-bg);
+  border-color: var(--bh-toggle-pressed-bg);
+}
+
+.toggle-switch.toggle-pressed.toggle-hover {
+  background-color: var(--bh-toggle-pressed-bg-hover);
+  border-color: var(--bh-toggle-pressed-bg-hover);
+}
+
+.toggle-switch.toggle-pressed.toggle-focus {
+  background-color: var(--bh-toggle-pressed-bg-focus);
+  border-color: var(--bh-toggle-pressed-bg-focus);
+}
+
+/* Focus ring for pressed state */
+.toggle-switch.toggle-pressed.toggle-focus .toggle-button::after {
+  content: '';
+  position: absolute;
+  top: var(--bh-toggle-focus-ring-offset);
+  left: var(--bh-toggle-focus-ring-offset);
+  right: var(--bh-toggle-focus-ring-offset);
+  bottom: var(--bh-toggle-focus-ring-offset);
+  border-radius: var(--bh-toggle-border-radius);
+  background: var(--bh-toggle-pressed-focus-ring);
+  opacity: var(--bh-toggle-pressed-focus-ring-opacity);
+  pointer-events: none;
+}
+
+.toggle-switch.toggle-pressed.toggle-disabled {
+  background-color: var(--bh-toggle-pressed-bg-disabled);
+  border-color: var(--bh-toggle-pressed-bg-disabled);
+}
+
+.toggle-switch.toggle-pressed.toggle-disabled .toggle-button {
+  background-color: var(--bh-toggle-button-bg-disabled-pressed);
+}
+
+/* ==========================================================================
+   TOGGLE BUTTON (HANDLE)
+   ========================================================================== */
+
+.toggle-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: var(--bh-toggle-border-radius);
+  background-color: var(--bh-toggle-button-bg);
+  transition: var(--bh-toggle-button-transition);
+}
+
+/* Toggle Button States - Unpressed */
+.toggle-switch.toggle-unpressed .toggle-button {
+  background-color: var(--bh-toggle-button-bg);
+}
+
+.toggle-switch.toggle-sm.toggle-unpressed .toggle-button {
+  width: var(--bh-toggle-button-size-sm);
+  height: var(--bh-toggle-button-size-sm);
+  left: var(--bh-toggle-button-offset-sm);
+}
+
+.toggle-switch.toggle-md.toggle-unpressed .toggle-button {
+  width: var(--bh-toggle-button-size-md);
+  height: var(--bh-toggle-button-size-md);
+  left: var(--bh-toggle-button-offset-md);
+}
+
+.toggle-switch.toggle-unpressed.toggle-hover .toggle-button {
+  background-color: var(--bh-toggle-button-bg);
+  box-shadow: var(--bh-toggle-button-shadow-hover);
+}
+
+/* Toggle Button States - Pressed */
+.toggle-switch.toggle-pressed .toggle-button {
+  background-color: var(--bh-toggle-button-bg);
+}
+
+.toggle-switch.toggle-sm.toggle-pressed .toggle-button {
+  width: var(--bh-toggle-button-size-sm);
+  height: var(--bh-toggle-button-size-sm);
+  left: calc(100% - var(--bh-toggle-button-size-sm) - var(--bh-toggle-button-offset-sm));
+}
+
+.toggle-switch.toggle-md.toggle-pressed .toggle-button {
+  width: var(--bh-toggle-button-size-md);
+  height: var(--bh-toggle-button-size-md);
+  left: calc(100% - var(--bh-toggle-button-size-md) - var(--bh-toggle-button-offset-md));
+}
+
+.toggle-switch.toggle-pressed.toggle-hover .toggle-button {
+  background-color: var(--bh-toggle-button-bg);
+}
+
+/* Toggle Button Disabled State */
+.toggle-switch.toggle-disabled .toggle-button {
+  background-color: var(--bh-toggle-button-bg-disabled);
+  box-shadow: none;
+}
+
+.toggle-switch.toggle-sm.toggle-unpressed.toggle-disabled .toggle-button {
+  width: var(--bh-toggle-button-size-sm);
+  height: var(--bh-toggle-button-size-sm);
+  left: calc(var(--bh-toggle-button-offset-sm) + 1px);
+  background-color: var(--bh-toggle-button-bg-disabled);
+}
+
+.toggle-switch.toggle-md.toggle-unpressed.toggle-disabled .toggle-button {
+  width: var(--bh-toggle-button-disabled-size-md);
+  height: var(--bh-toggle-button-disabled-size-md);
+  left: var(--bh-toggle-button-disabled-offset-md);
+  background-color: var(--bh-toggle-button-bg-disabled);
+}
+
+.toggle-switch.toggle-sm.toggle-pressed.toggle-disabled .toggle-button {
+  width: var(--bh-toggle-button-size-sm);
+  height: var(--bh-toggle-button-size-sm);
+  left: calc(100% - var(--bh-toggle-button-size-sm) - var(--bh-toggle-button-offset-sm));
+  background-color: var(--bh-toggle-button-bg-disabled);
+}
+
+.toggle-switch.toggle-md.toggle-pressed.toggle-disabled .toggle-button {
+  width: var(--bh-toggle-button-size-md);
+  height: var(--bh-toggle-button-size-md);
+  left: calc(100% - var(--bh-toggle-button-size-md) - var(--bh-toggle-button-offset-md));
+  background-color: var(--bh-toggle-button-bg);
+}
+
+/* ==========================================================================
+   TOGGLE TEXT CONTAINER
+   ========================================================================== */
+
+.toggle-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+/* ==========================================================================
+   TOGGLE LABEL
+   ========================================================================== */
+
+.toggle-label {
+  color: var(--bh-toggle-label-color);
+  font-family: var(--bh-font-family);
+  font-weight: var(--bh-toggle-label-font-weight);
+  text-align: left;
+  margin: 0;
+  line-height: var(--bh-toggle-label-line-height);
+}
+
+.toggle-label.toggle-label-sm {
+  font-size: var(--bh-toggle-label-size-sm);
+  line-height: 1.43em;
+}
+
+.toggle-label.toggle-label-md {
+  font-size: var(--bh-toggle-label-size-md);
+  line-height: 1.5em;
+}
+
+/* ==========================================================================
+   TOGGLE SUPPORTING TEXT
+   ========================================================================== */
+
+.toggle-supporting-text {
+  color: var(--bh-toggle-supporting-text-color);
+  font-family: var(--bh-font-family);
+  font-weight: var(--bh-toggle-supporting-text-font-weight);
+  font-size: var(--bh-toggle-supporting-text-size);
+  line-height: 1.43em;
+  text-align: left;
+  margin: 0;
+  margin-top: var(--bh-toggle-supporting-text-margin-top);
+}
+
+/* ==========================================================================
+   ACCESSIBILITY
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle-switch,
+  .toggle-button {
+    transition: none;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .toggle-switch.toggle-unpressed {
+    border: var(--bh-toggle-high-contrast-border-width) solid currentColor;
+  }
+
+  .toggle-switch.toggle-pressed {
+    border: var(--bh-toggle-high-contrast-border-width) solid currentColor;
+  }
+}
+
+.toggle-switch:focus-visible .toggle-button::after {
+  content: '';
+  position: absolute;
+  top: var(--bh-toggle-focus-ring-offset);
+  left: var(--bh-toggle-focus-ring-offset);
+  right: var(--bh-toggle-focus-ring-offset);
+  bottom: var(--bh-toggle-focus-ring-offset);
+  border-radius: var(--bh-toggle-border-radius);
+  background: currentColor;
+  opacity: var(--bh-toggle-pressed-focus-ring-opacity);
+  pointer-events: none;
+}

package/src/mixins/_responsive.scss

@@ -0,0 +1,167 @@
+/* ==========================================================================
+   BELLHOP RESPONSIVE MIXINS
+   Breakpoint utilities for generating responsive variants
+
+   IMPORTANT: These SCSS variables must be kept in sync with the CSS custom
+   properties defined in _semantic.scss:
+   - --min-width-breakpoint-mobile (320px)
+   - --min-width-breakpoint-tablet (640px)
+   - --min-width-breakpoint-desktop (1120px)
+   - --min-width-breakpoint-wide (1680px)
+
+   NOTE: CSS custom properties cannot be used in media queries, so we must
+   duplicate these values as SCSS variables.
+   ========================================================================== */
+
+// Breakpoint map (keep synced with _semantic.scss tokens)
+$bh-breakpoints: (
+  'mobile': 320px,
+  'tablet': 640px,
+  'desktop': 1120px,
+  'wide': 1680px,
+) !default;
+
+/**
+ * Breakpoint Up
+ * Applies styles at the specified breakpoint and above
+ * Mobile-first approach (min-width)
+ *
+ * @example
+ *   @include bh-breakpoint-up('tablet') {
+ *     .my-class { display: flex; }
+ *   }
+ */
+@mixin bh-breakpoint-up($name) {
+  @if not map-has-key($bh-breakpoints, $name) {
+    @error "Breakpoint '#{$name}' not found in $bh-breakpoints map. Available: #{map-keys($bh-breakpoints)}";
+  }
+
+  $min-width: map-get($bh-breakpoints, $name);
+
+  @if $name == 'mobile' {
+    // Mobile is base, no media query needed
+    @content;
+  } @else {
+    @media (min-width: $min-width) {
+      @content;
+    }
+  }
+}
+
+/**
+ * Breakpoint Down
+ * Applies styles below the specified breakpoint
+ *
+ * @example
+ *   @include bh-breakpoint-down('tablet') {
+ *     .my-class { display: block; }
+ *   }
+ */
+@mixin bh-breakpoint-down($name) {
+  @if not map-has-key($bh-breakpoints, $name) {
+    @error "Breakpoint '#{$name}' not found in $bh-breakpoints map. Available: #{map-keys($bh-breakpoints)}";
+  }
+
+  $max-width: map-get($bh-breakpoints, $name) - 0.02px;
+
+  @media (max-width: $max-width) {
+    @content;
+  }
+}
+
+/**
+ * Breakpoint Only
+ * Applies styles only within the specified breakpoint range
+ *
+ * @example
+ *   @include bh-breakpoint-only('tablet') {
+ *     .my-class { display: grid; }
+ *   }
+ */
+@mixin bh-breakpoint-only($name) {
+  @if not map-has-key($bh-breakpoints, $name) {
+    @error "Breakpoint '#{$name}' not found in $bh-breakpoints map. Available: #{map-keys($bh-breakpoints)}";
+  }
+
+  $breakpoint-names: map-keys($bh-breakpoints);
+  $current-index: index($breakpoint-names, $name);
+
+  @if $current-index == length($breakpoint-names) {
+    // Last breakpoint, no upper bound
+    @include bh-breakpoint-up($name) {
+      @content;
+    }
+  } @else {
+    $next-name: nth($breakpoint-names, $current-index + 1);
+    $min-width: map-get($bh-breakpoints, $name);
+    $max-width: map-get($bh-breakpoints, $next-name) - 0.02px;
+
+    @if $name == 'mobile' {
+      @media (max-width: $max-width) {
+        @content;
+      }
+    } @else {
+      @media (min-width: $min-width) and (max-width: $max-width) {
+        @content;
+      }
+    }
+  }
+}
+
+/**
+ * Breakpoint Between
+ * Applies styles between two specified breakpoints
+ *
+ * @example
+ *   @include bh-breakpoint-between('tablet', 'desktop') {
+ *     .my-class { columns: 2; }
+ *   }
+ */
+@mixin bh-breakpoint-between($lower, $upper) {
+  @if not map-has-key($bh-breakpoints, $lower) {
+    @error "Breakpoint '#{$lower}' not found in $bh-breakpoints map. Available: #{map-keys($bh-breakpoints)}";
+  }
+  @if not map-has-key($bh-breakpoints, $upper) {
+    @error "Breakpoint '#{$upper}' not found in $bh-breakpoints map. Available: #{map-keys($bh-breakpoints)}";
+  }
+
+  $min-width: map-get($bh-breakpoints, $lower);
+  $max-width: map-get($bh-breakpoints, $upper) - 0.02px;
+
+  @media (min-width: $min-width) and (max-width: $max-width) {
+    @content;
+  }
+}
+
+/**
+ * Generate Responsive Variant
+ * Helper mixin to generate base class + responsive variants
+ *
+ * @param $class-name - The class name without dot prefix
+ * @param $properties - Map of CSS properties and values
+ *
+ * @example
+ *   @include generate-responsive('bh-m_md', ('margin': var(--bh-spacing-md)));
+ *   // Generates: .bh-m_md, .bh-m_md@tablet, .bh-m_md@desktop, .bh-m_md@wide
+ */
+@mixin generate-responsive($class-name, $properties) {
+  // Base class (mobile-first, no media query)
+  .#{$class-name} {
+    @each $property, $value in $properties {
+      #{$property}: #{$value};
+    }
+  }
+
+  // Responsive variants
+  @each $bp-name, $bp-value in $bh-breakpoints {
+    @if $bp-name != 'mobile' {
+      .#{$class-name}\@#{$bp-name} {
+        @include bh-breakpoint-up($bp-name) {
+          @each $property, $value in $properties {
+            #{$property}: #{$value};
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/bellhop-typography.css

@@ -110,3 +110,37 @@
   font-variant-numeric: tabular-nums;
   font-family: var(--font-mono);
 }
+
+/* =========================
+   TEXT COLOR UTILITIES
+   ========================= */
+.text-primary {
+  color: var(--bh-text-primary);
+}
+.text-secondary {
+  color: var(--bh-text-secondary);
+}
+.text-tertiary {
+  color: var(--bh-text-tertiary);
+}
+.text-brand {
+  color: var(--bh-text-brand);
+}
+.text-disabled {
+  color: var(--bh-text-disabled);
+}
+.text-inverse {
+  color: var(--bh-text-inverse);
+}
+.text-error {
+  color: var(--bh-text-error);
+}
+.text-warning {
+  color: var(--bh-text-warning);
+}
+.text-success {
+  color: var(--bh-text-success);
+}
+.text-highlight {
+  color: var(--bh-text-highlight);
+}

package/src/utilities/_breakpoints.scss

@@ -0,0 +1,19 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - BREAKPOINTS
+   Exposes breakpoint values as CSS custom properties for JavaScript access
+
+   Dependencies:
+   - _semantic.scss (tokens)
+
+   Note: Breakpoint values are already defined in _semantic.scss:
+   - --min-width-breakpoint-mobile
+   - --min-width-breakpoint-tablet
+   - --min-width-breakpoint-desktop
+   - --min-width-breakpoint-wide
+
+   This file exists for completeness but doesn't generate additional classes.
+   Use the responsive mixins from mixins/_responsive.scss for media queries.
+   ========================================================================== */
+
+// No additional classes needed - breakpoints are consumed via SCSS mixins
+// CSS custom properties already exist in _semantic.scss