@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/src/tokens/colors.mdx

@@ -0,0 +1,59 @@
+## Base colors palette
+Semantic colors values and base colors palette.
+
+In the semantic palette, which defines colors based on how they are used, each and every semantic color points to color from a base palette. It means that all our semantic colors refer to this base palette.
+
+## Primary colors
+These are the main neutral, brand and feedback colors that make up the majority of the colors used in the design system and components.
+
+### Base
+These are base black and white color styles to quickly swap out if you need to.
+### Neutral
+Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray. Maps from gray-cool
+### Brand
+The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. It can define the overall feel and can elicit emotion. Uses Indigo color.Brand colors are defined based on Actabl's Brand Guidelines. Maps from indigo
+### Accent
+The accent color is used to accentuate and complement the primary colors. Uses Guava color.Brand colors are defined based on Actabl's Brand Guidelines. Maps from guava.
+
+## Support colors
+
+### Error - feedback
+Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team. Maps from red
+### Warning - feedback
+Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention. Maps from red
+### Success - feedback
+Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.
+
+## Extended colors
+Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels. These secondary colors should be used sparingly or as accents, while the primary color(s) should take precedence.
+
+### Gray cool
+Can be swapped with the default neutral color.
+### Lime
+Can be swapped with the default success color.
+### Teal
+Can be swapped with the default success color.
+### Blue
+### Indigo
+### Purple
+### Purple Lavender
+### Pink
+### Guava / Rose
+### Orange
+Can be swapped with the default warning color.
+### Yellow
+Can be swapped with the default warning color.
+
+## DataViz colors
+#5068DD
+#A05DA8
+#5D6B98
+#E26E76
+#7498FB
+#BB81BA
+#7D89B0
+#E38C91
+#8DAAFC
+#CFA5CE
+#B9C0D4
+#E9AAAE

package/src/tokens/index.css

@@ -0,0 +1,17 @@
+/* ==========================================================================
+   BELLHOP DESIGN TOKENS
+   Shared design system tokens for all frameworks
+   ========================================================================== */
+
+/* Import all design token files */
+@import './bellhop-primary-colors.css';
+@import './bellhop-secondary-colors.css';
+@import './bellhop-typography.css';
+@import './bellhop-spacing.css';
+@import './bellhop-radius.css';
+@import './bellhop-shadows.css';
+@import './bellhop-animations.css';
+@import './bellhop-layout.css';
+@import './bellhop-icons.css';
+@import './bellhop-global.css';
+@import './bellhop-styles.css';

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

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';