@rhavenside/baseline-ui 1.0.0

package/src/components/_tooltip.scss

@@ -0,0 +1,134 @@
+// ============================================================================
+// Tooltip Component (Technical Glass Design)
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+.bl-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.bl-tooltip-trigger {
+  cursor: help;
+}
+
+.bl-tooltip-content {
+  position: absolute;
+  z-index: var(--z-index-tooltip);
+  display: none;
+  max-width: 200px;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-mono); // Precise, monospace possible
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  text-align: center;
+  text-decoration: none;
+  word-wrap: break-word;
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  border: 1px solid var(--glass-border-medium);
+  border-radius: var(--tech-border-radius-sm);
+  opacity: 0;
+  transition: var(--transition-opacity);
+
+  &.bl-show {
+    display: block;
+    opacity: 1;
+  }
+}
+
+// Tooltip Positions (Angular, Trapezoidal Arrow)
+.bl-tooltip-top {
+  .bl-tooltip-content {
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: var(--spacing-xs);
+    transform: translateX(-50%);
+
+    &::after {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      margin-left: -6px;
+      content: "";
+      border-width: 6px 6px 0 6px;
+      border-style: solid;
+      border-color: var(--glass-bg-medium) transparent transparent transparent;
+      clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); // Trapezoidal
+    }
+  }
+}
+
+.bl-tooltip-bottom {
+  .bl-tooltip-content {
+    top: 100%;
+    left: 50%;
+    margin-top: var(--spacing-xs);
+    transform: translateX(-50%);
+
+    &::after {
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      margin-left: -6px;
+      content: "";
+      border-width: 0 6px 6px 6px;
+      border-style: solid;
+      border-color: transparent transparent var(--glass-bg-medium) transparent;
+      clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); // Trapezoidal
+    }
+  }
+}
+
+.bl-tooltip-left {
+  .bl-tooltip-content {
+    top: 50%;
+    right: 100%;
+    margin-right: var(--spacing-xs);
+    transform: translateY(-50%);
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 100%;
+      width: 0;
+      height: 0;
+      margin-top: -6px;
+      content: "";
+      border-width: 6px 0 6px 6px;
+      border-style: solid;
+      border-color: transparent transparent transparent var(--glass-bg-medium);
+      clip-path: polygon(0 20%, 0 80%, 100% 100%, 100% 0); // Trapezoidal
+    }
+  }
+}
+
+.bl-tooltip-right {
+  .bl-tooltip-content {
+    top: 50%;
+    left: 100%;
+    margin-left: var(--spacing-xs);
+    transform: translateY(-50%);
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: 100%;
+      width: 0;
+      height: 0;
+      margin-top: -6px;
+      content: "";
+      border-width: 6px 6px 6px 0;
+      border-style: solid;
+      border-color: transparent var(--glass-bg-medium) transparent transparent;
+      clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%); // Trapezoidal
+    }
+  }
+}

package/src/fonts/.gitkeep

@@ -0,0 +1,4 @@
+# Icon font files will be placed here
+# baseline-icons.woff2
+# baseline-icons.woff
+

package/src/icons/_icons.scss

@@ -0,0 +1,150 @@
+// ============================================================================
+// Icon Font System
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+// Icon Font Face (to be generated from icon font files)
+@font-face {
+  font-family: 'Baseline Icons';
+  src: url('../fonts/baseline-icons.woff2') format('woff2'),
+       url('../fonts/baseline-icons.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+// Base Icon Class
+.bl-icon {
+  display: inline-block;
+  font-family: 'Baseline Icons';
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  speak: never;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: middle;
+}
+
+// Icon Sizes
+.bl-icon-xs {
+  font-size: 0.75rem;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.bl-icon-sm {
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+}
+
+.bl-icon-md {
+  font-size: 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.bl-icon-lg {
+  font-size: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.bl-icon-xl {
+  font-size: 2rem;
+  width: 2rem;
+  height: 2rem;
+}
+
+// Icon Variants (using Unicode/Private Use Area)
+// These would be replaced with actual icon font mappings
+.bl-icon-home::before { content: '\e900'; }
+.bl-icon-user::before { content: '\e901'; }
+.bl-icon-search::before { content: '\e902'; }
+.bl-icon-menu::before { content: '\e903'; }
+.bl-icon-close::before { content: '\e904'; }
+.bl-icon-chevron-left::before { content: '\e905'; }
+.bl-icon-chevron-right::before { content: '\e906'; }
+.bl-icon-chevron-up::before { content: '\e907'; }
+.bl-icon-chevron-down::before { content: '\e908'; }
+.bl-icon-arrow-left::before { content: '\e909'; }
+.bl-icon-arrow-right::before { content: '\e90a'; }
+.bl-icon-arrow-up::before { content: '\e90b'; }
+.bl-icon-arrow-down::before { content: '\e90c'; }
+.bl-icon-check::before { content: '\e90d'; }
+.bl-icon-cross::before { content: '\e90e'; }
+.bl-icon-plus::before { content: '\e90f'; }
+.bl-icon-minus::before { content: '\e910'; }
+.bl-icon-info::before { content: '\e911'; }
+.bl-icon-warning::before { content: '\e912'; }
+.bl-icon-error::before { content: '\e913'; }
+.bl-icon-success::before { content: '\e914'; }
+.bl-icon-heart::before { content: '\e915'; }
+.bl-icon-star::before { content: '\e916'; }
+.bl-icon-bookmark::before { content: '\e917'; }
+.bl-icon-share::before { content: '\e918'; }
+.bl-icon-download::before { content: '\e919'; }
+.bl-icon-upload::before { content: '\e91a'; }
+.bl-icon-edit::before { content: '\e91b'; }
+.bl-icon-delete::before { content: '\e91c'; }
+.bl-icon-settings::before { content: '\e91d'; }
+.bl-icon-bell::before { content: '\e91e'; }
+.bl-icon-mail::before { content: '\e91f'; }
+.bl-icon-phone::before { content: '\e920'; }
+.bl-icon-calendar::before { content: '\e921'; }
+.bl-icon-clock::before { content: '\e922'; }
+.bl-icon-image::before { content: '\e923'; }
+.bl-icon-video::before { content: '\e924'; }
+.bl-icon-file::before { content: '\e925'; }
+.bl-icon-folder::before { content: '\e926'; }
+.bl-icon-lock::before { content: '\e927'; }
+.bl-icon-unlock::before { content: '\e928'; }
+.bl-icon-eye::before { content: '\e929'; }
+.bl-icon-eye-off::before { content: '\e92a'; }
+.bl-icon-filter::before { content: '\e92b'; }
+.bl-icon-sort::before { content: '\e92c'; }
+.bl-icon-grid::before { content: '\e92d'; }
+.bl-icon-list::before { content: '\e92e'; }
+.bl-icon-refresh::before { content: '\e92f'; }
+.bl-icon-loading::before { content: '\e930'; }
+.bl-icon-play::before { content: '\e931'; }
+.bl-icon-pause::before { content: '\e932'; }
+.bl-icon-stop::before { content: '\e933'; }
+.bl-icon-next::before { content: '\e934'; }
+.bl-icon-prev::before { content: '\e935'; }
+.bl-icon-volume::before { content: '\e936'; }
+.bl-icon-volume-off::before { content: '\e937'; }
+.bl-icon-fullscreen::before { content: '\e938'; }
+.bl-icon-fullscreen-exit::before { content: '\e939'; }
+.bl-icon-link::before { content: '\e93a'; }
+.bl-icon-external::before { content: '\e93b'; }
+.bl-icon-copy::before { content: '\e93c'; }
+.bl-icon-cut::before { content: '\e93d'; }
+.bl-icon-paste::before { content: '\e93e'; }
+.bl-icon-undo::before { content: '\e93f'; }
+.bl-icon-redo::before { content: '\e940'; }
+.bl-icon-save::before { content: '\e941'; }
+.bl-icon-print::before { content: '\e942'; }
+.bl-icon-zoom-in::before { content: '\e943'; }
+.bl-icon-zoom-out::before { content: '\e944'; }
+.bl-icon-maximize::before { content: '\e945'; }
+.bl-icon-minimize::before { content: '\e946'; }
+
+// Icon in Button
+.bl-btn .bl-icon {
+  margin-right: var(--spacing-xs);
+}
+
+.bl-btn .bl-icon:last-child {
+  margin-right: 0;
+  margin-left: var(--spacing-xs);
+}
+
+.bl-btn .bl-icon:only-child {
+  margin: 0;
+}
+

package/src/layout/_container.scss

@@ -0,0 +1,45 @@
+// ============================================================================
+// Container
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+.bl-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+
+  // Small devices (landscape phones, 640px and up)
+  @media (min-width: 640px) {
+    max-width: 640px;
+  }
+
+  // Medium devices (tablets, 768px and up)
+  @media (min-width: 768px) {
+    max-width: 768px;
+  }
+
+  // Large devices (desktops, 1024px and up)
+  @media (min-width: 1024px) {
+    max-width: 1024px;
+  }
+
+  // Extra large devices (large desktops, 1280px and up)
+  @media (min-width: 1280px) {
+    max-width: 1280px;
+  }
+
+  // 2X Large devices (larger desktops, 1536px and up)
+  @media (min-width: 1536px) {
+    max-width: 1536px;
+  }
+}
+
+.bl-container-fluid {
+  width: 100%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+

package/src/layout/_flex.scss

@@ -0,0 +1,174 @@
+// ============================================================================
+// Flexbox Utilities
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+// Display
+.bl-flex {
+  display: flex;
+}
+
+.bl-inline-flex {
+  display: inline-flex;
+}
+
+// Direction
+.bl-flex-row {
+  flex-direction: row;
+}
+
+.bl-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.bl-flex-col {
+  flex-direction: column;
+}
+
+.bl-flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+// Wrap
+.bl-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.bl-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.bl-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+// Justify Content
+.bl-justify-start {
+  justify-content: flex-start;
+}
+
+.bl-justify-end {
+  justify-content: flex-end;
+}
+
+.bl-justify-center {
+  justify-content: center;
+}
+
+.bl-justify-between {
+  justify-content: space-between;
+}
+
+.bl-justify-around {
+  justify-content: space-around;
+}
+
+.bl-justify-evenly {
+  justify-content: space-evenly;
+}
+
+// Align Items
+.bl-items-start {
+  align-items: flex-start;
+}
+
+.bl-items-end {
+  align-items: flex-end;
+}
+
+.bl-items-center {
+  align-items: center;
+}
+
+.bl-items-baseline {
+  align-items: baseline;
+}
+
+.bl-items-stretch {
+  align-items: stretch;
+}
+
+// Align Self
+.bl-self-auto {
+  align-self: auto;
+}
+
+.bl-self-start {
+  align-self: flex-start;
+}
+
+.bl-self-end {
+  align-self: flex-end;
+}
+
+.bl-self-center {
+  align-self: center;
+}
+
+.bl-self-stretch {
+  align-self: stretch;
+}
+
+.bl-self-baseline {
+  align-self: baseline;
+}
+
+// Align Content
+.bl-content-start {
+  align-content: flex-start;
+}
+
+.bl-content-end {
+  align-content: flex-end;
+}
+
+.bl-content-center {
+  align-content: center;
+}
+
+.bl-content-between {
+  align-content: space-between;
+}
+
+.bl-content-around {
+  align-content: space-around;
+}
+
+.bl-content-stretch {
+  align-content: stretch;
+}
+
+// Flex Grow/Shrink
+.bl-flex-1 {
+  flex: 1 1 0%;
+}
+
+.bl-flex-auto {
+  flex: 1 1 auto;
+}
+
+.bl-flex-initial {
+  flex: 0 1 auto;
+}
+
+.bl-flex-none {
+  flex: none;
+}
+
+.bl-grow {
+  flex-grow: 1;
+}
+
+.bl-grow-0 {
+  flex-grow: 0;
+}
+
+.bl-shrink {
+  flex-shrink: 1;
+}
+
+.bl-shrink-0 {
+  flex-shrink: 0;
+}
+

package/src/layout/_grid-modern.scss

@@ -0,0 +1,128 @@
+// ============================================================================
+// CSS Grid Utilities
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+// Base Grid
+.bl-grid {
+  display: grid;
+  gap: var(--spacing-md);
+}
+
+// Grid Columns (1-12)
+@for $i from 1 through 12 {
+  .bl-grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+  }
+}
+
+// Grid Rows (1-12)
+@for $i from 1 through 12 {
+  .bl-grid-rows-#{$i} {
+    grid-template-rows: repeat(#{$i}, minmax(0, 1fr));
+  }
+}
+
+// Gap Utilities
+.bl-gap-xs {
+  gap: var(--spacing-xs);
+}
+
+.bl-gap-sm {
+  gap: var(--spacing-sm);
+}
+
+.bl-gap-md {
+  gap: var(--spacing-md);
+}
+
+.bl-gap-lg {
+  gap: var(--spacing-lg);
+}
+
+.bl-gap-xl {
+  gap: var(--spacing-xl);
+}
+
+.bl-gap-2xl {
+  gap: var(--spacing-2xl);
+}
+
+// Column Gap
+.bl-gap-x-xs {
+  column-gap: var(--spacing-xs);
+}
+
+.bl-gap-x-sm {
+  column-gap: var(--spacing-sm);
+}
+
+.bl-gap-x-md {
+  column-gap: var(--spacing-md);
+}
+
+.bl-gap-x-lg {
+  column-gap: var(--spacing-lg);
+}
+
+.bl-gap-x-xl {
+  column-gap: var(--spacing-xl);
+}
+
+.bl-gap-x-2xl {
+  column-gap: var(--spacing-2xl);
+}
+
+// Row Gap
+.bl-gap-y-xs {
+  row-gap: var(--spacing-xs);
+}
+
+.bl-gap-y-sm {
+  row-gap: var(--spacing-sm);
+}
+
+.bl-gap-y-md {
+  row-gap: var(--spacing-md);
+}
+
+.bl-gap-y-lg {
+  row-gap: var(--spacing-lg);
+}
+
+.bl-gap-y-xl {
+  row-gap: var(--spacing-xl);
+}
+
+.bl-gap-y-2xl {
+  row-gap: var(--spacing-2xl);
+}
+
+// Grid Column Span
+@for $i from 1 through 12 {
+  .bl-col-span-#{$i} {
+    grid-column: span #{$i} / span #{$i};
+  }
+}
+
+// Grid Row Span
+@for $i from 1 through 12 {
+  .bl-row-span-#{$i} {
+    grid-row: span #{$i} / span #{$i};
+  }
+}
+
+// Auto Flow
+.bl-grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.bl-grid-flow-col {
+  grid-auto-flow: column;
+}
+
+.bl-grid-flow-dense {
+  grid-auto-flow: dense;
+}
+