@actabldesign/bellhop-styles 0.0.3 → 0.0.4

package/src/tokens/bellhop-styles.css

@@ -0,0 +1,174 @@
+/* ==========================================================================
+   BELLHOPOS ANGULAR LIBRARY STYLES
+   Main entry point for all Bellhop design system styles
+   ========================================================================== */
+
+/* Import Google Fonts - Inter and Material Symbols */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+/* Import all Bellhop design system styles */
+@import url('./bellhop-primary-colors.css');
+@import url('./bellhop-secondary-colors.css');
+@import url('./bellhop-spacing.css');
+@import url('./bellhop-radius.css');
+@import url('./bellhop-shadows.css');
+@import url('./bellhop-typography.css');
+@import url('./bellhop-icons.css');
+@import url('./bellhop-layout.css');
+
+/* ==========================================================================
+   GLOBAL RESETS AND DEFAULTS
+   ========================================================================== */
+
+/* Reset the outline for all focusable elements when a mouse is used. */
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Apply a custom outline that will only appear during keyboard navigation. */
+*:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+
+/* Ensure focus is visible on interactive elements */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+a:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   UTILITY CLASSES
+   ========================================================================== */
+
+/* Prevent text selection */
+.no-select {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/* Screen reader only content */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ==========================================================================
+   CONTENT LAYOUT UTILITIES
+   ========================================================================== */
+
+/* Content Container - Main flex container for page navigation and content area */
+.bellhop-content-container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  background-color: var(--color-white);
+}
+
+/* Content Area - Scrollable main content region */
+.bellhop-content-area {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: var(--color-white);
+}
+
+/* Content Wrapper - Inner content container with padding and max-width */
+.bellhop-content-wrapper {
+  padding: var(--spacing-4xl);
+  margin: 0 auto;
+  font-family: var(--font-inter);
+}
+
+/* Content Wrapper Variants */
+.bellhop-content-wrapper-sm {
+  padding: var(--spacing-2xl);
+  margin: 0 auto;
+  font-family: var(--font-inter);
+}
+
+.bellhop-content-wrapper-lg {
+  padding: var(--spacing-5xl);
+  margin: 0 auto;
+  font-family: var(--font-inter);
+}
+
+.bellhop-content-wrapper-full {
+  padding: var(--spacing-4xl);
+  max-width: none;
+  margin: 0;
+  font-family: var(--font-inter);
+}
+
+/* Content Typography - Standard content headings and text */
+.bellhop-content-wrapper h1,
+.bellhop-content-wrapper-sm h1,
+.bellhop-content-wrapper-lg h1,
+.bellhop-content-wrapper-full h1 {
+  font-size: var(--text-3xl-size);
+  font-weight: var(--weight-bold);
+  line-height: var(--text-3xl-line);
+  color: var(--color-neutral-800);
+  margin-bottom: var(--spacing-md);
+}
+
+.bellhop-content-wrapper p,
+.bellhop-content-wrapper-sm p,
+.bellhop-content-wrapper-lg p,
+.bellhop-content-wrapper-full p {
+  font-size: var(--text-md-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--text-md-line);
+  color: var(--color-neutral-600);
+  margin-bottom: var(--spacing-2xl);
+}
+
+/* Responsive adjustments for content wrappers */
+@media (max-width: 768px) {
+  .bellhop-content-wrapper,
+  .bellhop-content-wrapper-sm,
+  .bellhop-content-wrapper-lg,
+  .bellhop-content-wrapper-full {
+    padding: var(--spacing-xl);
+  }
+
+  .bellhop-content-wrapper h1,
+  .bellhop-content-wrapper-sm h1,
+  .bellhop-content-wrapper-lg h1,
+  .bellhop-content-wrapper-full h1 {
+    font-size: var(--text-2xl-size);
+    line-height: var(--text-2xl-line);
+  }
+}
+
+@media (max-width: 480px) {
+  .bellhop-content-wrapper,
+  .bellhop-content-wrapper-sm,
+  .bellhop-content-wrapper-lg,
+  .bellhop-content-wrapper-full {
+    padding: var(--spacing-md);
+  }
+
+  .bellhop-content-wrapper h1,
+  .bellhop-content-wrapper-sm h1,
+  .bellhop-content-wrapper-lg h1,
+  .bellhop-content-wrapper-full h1 {
+    font-size: var(--text-xl-size);
+    line-height: var(--text-xl-line);
+  }
+}

package/src/tokens/bellhop-typography.css

@@ -0,0 +1,112 @@
+/* =========================
+   IMPORT FONT
+   ========================= */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+/* =========================
+   TYPOGRAPHY TOKENS
+   ========================= */
+:root {
+  /* Families */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* Sizes (font-size) */
+  /* Display Sizes */
+  --display-xl-size: 2.625rem; /* 42px */
+  --display-lg-size: 2.5rem; /* 40px */
+  --display-md-size: 2.25rem; /* 36px */
+  --display-sm-size: 1.875rem; /* 30px */
+  --display-xs-size: 1.5rem; /* 24px */
+  /* Text Sizes */
+  --text-xl-size: 1.25rem; /* 20px */
+  --text-lg-size: 1.125rem; /* 18px */
+  --text-md-size: 1rem; /* 16px */
+  --text-sm-size: 0.875rem; /* 14px */
+  --text-xs-size: 0.75rem; /* 12px */
+
+  /* Line heights */
+  --text-xl-line: 1.875rem; /* 30px */
+  --text-lg-line: 1.75rem; /* 28px */
+  --text-md-line: 1.5rem; /* 24px */
+  --text-sm-line: 1.25rem; /* 20px */
+  --text-xs-line: 1.125rem; /* 18px */
+
+  /* Numbers (data tables) — use tabular figures */
+  --num-sm-size: var(--text-sm-size); /* 14px */
+  --num-sm-line: var(--text-sm-line); /* 20px */
+  --num-xs-size: var(--text-xs-size); /* 12px */
+  --num-xs-line: var(--text-xs-line); /* 18px */
+}
+
+/* =========================
+   BASE / WEIGHT UTILITIES
+   ========================= */
+.font-inter {
+  font-family: var(--font-inter);
+}
+.font-mono {
+  font-family: var(--font-mono);
+}
+
+.weight-regular {
+  font-weight: var(--weight-regular);
+}
+.weight-medium {
+  font-weight: var(--weight-medium);
+}
+.weight-semibold {
+  font-weight: var(--weight-semibold);
+}
+.weight-bold {
+  font-weight: var(--weight-bold);
+}
+
+/* =========================
+   SIZE UTILITIES
+   ========================= */
+.text-xl {
+  font-size: var(--text-xl-size);
+  line-height: var(--text-xl-line);
+}
+.text-lg {
+  font-size: var(--text-lg-size);
+  line-height: var(--text-lg-line);
+}
+.text-md {
+  font-size: var(--text-md-size);
+  line-height: var(--text-md-line);
+}
+.text-sm {
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+}
+.text-xs {
+  font-size: var(--text-xs-size);
+  line-height: var(--text-xs-line);
+}
+
+/* =========================
+   NUMERIC (DATA TABLES)
+   ========================= */
+.num-sm {
+  font-size: var(--num-sm-size);
+  line-height: var(--num-sm-line);
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-inter);
+}
+.num-xs {
+  font-size: var(--num-xs-size);
+  line-height: var(--num-xs-line);
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono);
+}