@rhavenside/baseline-ui 1.0.0

package/src/utilities/_spacing.scss

@@ -0,0 +1,87 @@
+// ============================================================================
+// Spacing Utilities
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+// Spacing sizes
+$spacing-sizes: (
+  'xs': var(--spacing-xs),
+  'sm': var(--spacing-sm),
+  'md': var(--spacing-md),
+  'lg': var(--spacing-lg),
+  'xl': var(--spacing-xl),
+  '2xl': var(--spacing-2xl),
+  '3xl': var(--spacing-3xl),
+  '0': 0,
+  'auto': auto
+);
+
+// Margin Utilities
+@each $name, $value in $spacing-sizes {
+  .m-#{$name} {
+    margin: #{$value};
+  }
+
+  .mt-#{$name} {
+    margin-top: #{$value};
+  }
+
+  .mr-#{$name} {
+    margin-right: #{$value};
+  }
+
+  .mb-#{$name} {
+    margin-bottom: #{$value};
+  }
+
+  .ml-#{$name} {
+    margin-left: #{$value};
+  }
+
+  .mx-#{$name} {
+    margin-left: #{$value};
+    margin-right: #{$value};
+  }
+
+  .my-#{$name} {
+    margin-top: #{$value};
+    margin-bottom: #{$value};
+  }
+}
+
+// Padding Utilities
+@each $name, $value in $spacing-sizes {
+  @if $name != 'auto' {
+    .p-#{$name} {
+      padding: #{$value};
+    }
+
+    .pt-#{$name} {
+      padding-top: #{$value};
+    }
+
+    .pr-#{$name} {
+      padding-right: #{$value};
+    }
+
+    .pb-#{$name} {
+      padding-bottom: #{$value};
+    }
+
+    .pl-#{$name} {
+      padding-left: #{$value};
+    }
+
+    .px-#{$name} {
+      padding-left: #{$value};
+      padding-right: #{$value};
+    }
+
+    .py-#{$name} {
+      padding-top: #{$value};
+      padding-bottom: #{$value};
+    }
+  }
+}
+

package/src/utilities/_text.scss

@@ -0,0 +1,255 @@
+// ============================================================================
+// Text Utilities
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+// Text Alignment
+.bl-text-left {
+  text-align: left;
+}
+
+.bl-text-center {
+  text-align: center;
+}
+
+.bl-text-right {
+  text-align: right;
+}
+
+.bl-text-justify {
+  text-align: justify;
+}
+
+// Text Size
+.bl-text-xs {
+  font-size: var(--font-size-xs);
+}
+
+.bl-text-sm {
+  font-size: var(--font-size-sm);
+}
+
+.bl-text-base {
+  font-size: var(--font-size-base);
+}
+
+.bl-text-lg {
+  font-size: var(--font-size-lg);
+}
+
+.bl-text-xl {
+  font-size: var(--font-size-xl);
+}
+
+.bl-text-2xl {
+  font-size: var(--font-size-2xl);
+}
+
+.bl-text-3xl {
+  font-size: var(--font-size-3xl);
+}
+
+.bl-text-4xl {
+  font-size: var(--font-size-4xl);
+}
+
+.bl-text-5xl {
+  font-size: var(--font-size-5xl);
+}
+
+.bl-text-6xl {
+  font-size: var(--font-size-6xl);
+}
+
+// Font Weight
+.bl-font-light {
+  font-weight: var(--font-weight-light);
+}
+
+.bl-font-normal {
+  font-weight: var(--font-weight-normal);
+}
+
+.bl-font-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.bl-font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.bl-font-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.bl-font-extrabold {
+  font-weight: var(--font-weight-extrabold);
+}
+
+// Line Height
+.bl-leading-none {
+  line-height: var(--line-height-none);
+}
+
+.bl-leading-tight {
+  line-height: var(--line-height-tight);
+}
+
+.bl-leading-snug {
+  line-height: var(--line-height-snug);
+}
+
+.bl-leading-base {
+  line-height: var(--line-height-base);
+}
+
+.bl-leading-relaxed {
+  line-height: var(--line-height-relaxed);
+}
+
+.bl-leading-loose {
+  line-height: var(--line-height-loose);
+}
+
+// Text Transform
+.bl-uppercase {
+  text-transform: uppercase;
+}
+
+.bl-lowercase {
+  text-transform: lowercase;
+}
+
+.bl-capitalize {
+  text-transform: capitalize;
+}
+
+.bl-normal-case {
+  text-transform: none;
+}
+
+// Text Decoration
+.bl-underline {
+  text-decoration: underline;
+}
+
+.bl-line-through {
+  text-decoration: line-through;
+}
+
+.bl-no-underline {
+  text-decoration: none;
+}
+
+// Letter Spacing
+.bl-tracking-tighter {
+  letter-spacing: var(--letter-spacing-tighter);
+}
+
+.bl-tracking-tight {
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.bl-tracking-normal {
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.bl-tracking-wide {
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.bl-tracking-wider {
+  letter-spacing: var(--letter-spacing-wider);
+}
+
+.bl-tracking-widest {
+  letter-spacing: var(--letter-spacing-widest);
+}
+
+// Text Color
+.bl-text-primary {
+  color: var(--color-primary);
+}
+
+.bl-text-secondary {
+  color: var(--color-secondary);
+}
+
+.bl-text-success {
+  color: var(--color-success);
+}
+
+.bl-text-warning {
+  color: var(--color-warning);
+}
+
+.bl-text-error {
+  color: var(--color-error);
+}
+
+.bl-text-info {
+  color: var(--color-info);
+}
+
+.bl-text-muted {
+  color: var(--color-text-muted);
+}
+
+.bl-text-light {
+  color: var(--color-text-light);
+}
+
+.bl-text-inverse {
+  color: var(--color-text-inverse);
+}
+
+// Font Family
+.bl-font-sans {
+  font-family: var(--font-family-base);
+}
+
+.bl-font-mono {
+  font-family: var(--font-family-mono);
+}
+
+.bl-font-serif {
+  font-family: var(--font-family-serif);
+}
+
+// Text Overflow
+.bl-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bl-text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.bl-text-clip {
+  text-overflow: clip;
+}
+
+// White Space
+.bl-whitespace-normal {
+  white-space: normal;
+}
+
+.bl-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.bl-whitespace-pre {
+  white-space: pre;
+}
+
+.bl-whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.bl-whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+

package/src/utilities/_visibility.scss

@@ -0,0 +1,74 @@
+// ============================================================================
+// Visibility Utilities
+// ============================================================================
+
+.bl-visible {
+  visibility: visible;
+}
+
+.bl-invisible {
+  visibility: hidden;
+}
+
+// Opacity
+.bl-opacity-0 {
+  opacity: 0;
+}
+
+.bl-opacity-25 {
+  opacity: 0.25;
+}
+
+.bl-opacity-50 {
+  opacity: 0.5;
+}
+
+.bl-opacity-75 {
+  opacity: 0.75;
+}
+
+.bl-opacity-100 {
+  opacity: 1;
+}
+
+// Overflow
+.bl-overflow-auto {
+  overflow: auto;
+}
+
+.bl-overflow-hidden {
+  overflow: hidden;
+}
+
+.bl-overflow-visible {
+  overflow: visible;
+}
+
+.bl-overflow-scroll {
+  overflow: scroll;
+}
+
+.bl-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.bl-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.bl-overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.bl-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.bl-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.bl-overflow-y-scroll {
+  overflow-y: scroll;
+}
+