soltana-ui 0.1.0

package/src/styles/utilities/_mixins.scss

@@ -0,0 +1,410 @@
+// ---------------------------------------------------------------------------
+// Utility Generation Mixins
+// ---------------------------------------------------------------------------
+// Shared loop bodies for spacing, gap, grid, layout, and sizing utilities.
+// Consumed by base partials (non-responsive) and _responsive.scss (prefixed).
+// ---------------------------------------------------------------------------
+
+@use '../variables' as *;
+
+@mixin generate-gap($prefix: '') {
+  @each $step in $gap-steps {
+    .#{$prefix}gap-#{$step} {
+      gap: calc(#{$step} * 0.25rem);
+    }
+    .#{$prefix}gap-x-#{$step} {
+      column-gap: calc(#{$step} * 0.25rem);
+    }
+    .#{$prefix}gap-y-#{$step} {
+      row-gap: calc(#{$step} * 0.25rem);
+    }
+  }
+}
+
+@mixin generate-padding($prefix: '', $directions: true) {
+  @each $step in $space-keys {
+    $val: calc(#{$step} * 0.25rem);
+
+    .#{$prefix}p-#{$step} {
+      padding: $val;
+    }
+    .#{$prefix}px-#{$step} {
+      padding-left: $val;
+      padding-right: $val;
+    }
+    .#{$prefix}py-#{$step} {
+      padding-top: $val;
+      padding-bottom: $val;
+    }
+    @if $directions {
+      .#{$prefix}pt-#{$step} {
+        padding-top: $val;
+      }
+      .#{$prefix}pr-#{$step} {
+        padding-right: $val;
+      }
+      .#{$prefix}pb-#{$step} {
+        padding-bottom: $val;
+      }
+      .#{$prefix}pl-#{$step} {
+        padding-left: $val;
+      }
+    }
+  }
+}
+
+@mixin generate-margin($prefix: '', $directions: true) {
+  @each $step in $space-keys {
+    $val: calc(#{$step} * 0.25rem);
+
+    .#{$prefix}m-#{$step} {
+      margin: $val;
+    }
+    .#{$prefix}mx-#{$step} {
+      margin-left: $val;
+      margin-right: $val;
+    }
+    .#{$prefix}my-#{$step} {
+      margin-top: $val;
+      margin-bottom: $val;
+    }
+    @if $directions {
+      .#{$prefix}mt-#{$step} {
+        margin-top: $val;
+      }
+      .#{$prefix}mr-#{$step} {
+        margin-right: $val;
+      }
+      .#{$prefix}mb-#{$step} {
+        margin-bottom: $val;
+      }
+      .#{$prefix}ml-#{$step} {
+        margin-left: $val;
+      }
+    }
+  }
+}
+
+@mixin generate-auto-margins($prefix: '') {
+  .#{$prefix}mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .#{$prefix}ml-auto {
+    margin-left: auto;
+  }
+
+  .#{$prefix}mr-auto {
+    margin-right: auto;
+  }
+}
+
+@mixin generate-grid($prefix: '') {
+  @for $i from 1 through 12 {
+    .#{$prefix}grid-cols-#{$i} {
+      grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+    }
+    .#{$prefix}col-span-#{$i} {
+      grid-column: span #{$i} / span #{$i};
+    }
+  }
+
+  .#{$prefix}col-span-full {
+    grid-column: 1 / -1;
+  }
+
+  @for $i from 1 through 6 {
+    .#{$prefix}grid-rows-#{$i} {
+      grid-template-rows: repeat(#{$i}, minmax(0, 1fr));
+    }
+    .#{$prefix}row-span-#{$i} {
+      grid-row: span #{$i} / span #{$i};
+    }
+  }
+}
+
+// ============================================================================
+// DISPLAY
+// ============================================================================
+
+@mixin generate-display($prefix: '') {
+  .#{$prefix}block {
+    display: block;
+  }
+  .#{$prefix}inline-block {
+    display: inline-block;
+  }
+  .#{$prefix}inline {
+    display: inline;
+  }
+  .#{$prefix}flex {
+    display: flex;
+  }
+  .#{$prefix}inline-flex {
+    display: inline-flex;
+  }
+  .#{$prefix}grid {
+    display: grid;
+  }
+  .#{$prefix}inline-grid {
+    display: inline-grid;
+  }
+  .#{$prefix}hidden {
+    display: none;
+  }
+  .#{$prefix}contents {
+    display: contents;
+  }
+}
+
+// ============================================================================
+// FLEX DIRECTION
+// ============================================================================
+
+@mixin generate-flex-direction($prefix: '') {
+  .#{$prefix}flex-row {
+    flex-direction: row;
+  }
+  .#{$prefix}flex-col {
+    flex-direction: column;
+  }
+  .#{$prefix}flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .#{$prefix}flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+}
+
+// ============================================================================
+// FLEX WRAP
+// ============================================================================
+
+@mixin generate-flex-wrap($prefix: '') {
+  .#{$prefix}flex-wrap {
+    flex-wrap: wrap;
+  }
+  .#{$prefix}flex-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+
+// ============================================================================
+// FLEX SIZING
+// ============================================================================
+
+@mixin generate-flex-sizing($prefix: '') {
+  .#{$prefix}flex-1 {
+    flex: 1 1 0%;
+  }
+  .#{$prefix}flex-auto {
+    flex: 1 1 auto;
+  }
+  .#{$prefix}flex-initial {
+    flex: 0 1 auto;
+  }
+  .#{$prefix}flex-none {
+    flex: none;
+  }
+  .#{$prefix}grow {
+    flex-grow: 1;
+  }
+  .#{$prefix}grow-0 {
+    flex-grow: 0;
+  }
+  .#{$prefix}shrink {
+    flex-shrink: 1;
+  }
+  .#{$prefix}shrink-0 {
+    flex-shrink: 0;
+  }
+}
+
+// ============================================================================
+// ALIGNMENT
+// ============================================================================
+
+@mixin generate-alignment($prefix: '') {
+  .#{$prefix}items-start {
+    align-items: flex-start;
+  }
+  .#{$prefix}items-center {
+    align-items: center;
+  }
+  .#{$prefix}items-end {
+    align-items: flex-end;
+  }
+  .#{$prefix}items-baseline {
+    align-items: baseline;
+  }
+  .#{$prefix}items-stretch {
+    align-items: stretch;
+  }
+  .#{$prefix}justify-start {
+    justify-content: flex-start;
+  }
+  .#{$prefix}justify-center {
+    justify-content: center;
+  }
+  .#{$prefix}justify-end {
+    justify-content: flex-end;
+  }
+  .#{$prefix}justify-between {
+    justify-content: space-between;
+  }
+  .#{$prefix}justify-around {
+    justify-content: space-around;
+  }
+  .#{$prefix}justify-evenly {
+    justify-content: space-evenly;
+  }
+  .#{$prefix}self-auto {
+    align-self: auto;
+  }
+  .#{$prefix}self-start {
+    align-self: flex-start;
+  }
+  .#{$prefix}self-center {
+    align-self: center;
+  }
+  .#{$prefix}self-end {
+    align-self: flex-end;
+  }
+  .#{$prefix}self-stretch {
+    align-self: stretch;
+  }
+}
+
+// ============================================================================
+// POSITION
+// ============================================================================
+
+@mixin generate-position($prefix: '') {
+  .#{$prefix}relative {
+    position: relative;
+  }
+  .#{$prefix}absolute {
+    position: absolute;
+  }
+  .#{$prefix}fixed {
+    position: fixed;
+  }
+  .#{$prefix}sticky {
+    position: sticky;
+  }
+  .#{$prefix}static {
+    position: static;
+  }
+  .#{$prefix}inset-0 {
+    inset: 0;
+  }
+  .#{$prefix}top-0 {
+    top: 0;
+  }
+  .#{$prefix}right-0 {
+    right: 0;
+  }
+  .#{$prefix}bottom-0 {
+    bottom: 0;
+  }
+  .#{$prefix}left-0 {
+    left: 0;
+  }
+}
+
+// ============================================================================
+// OVERFLOW
+// ============================================================================
+
+@mixin generate-overflow($prefix: '') {
+  @each $val in $overflow-values {
+    .#{$prefix}overflow-#{$val} {
+      overflow: $val;
+    }
+    .#{$prefix}overflow-x-#{$val} {
+      overflow-x: $val;
+    }
+    .#{$prefix}overflow-y-#{$val} {
+      overflow-y: $val;
+    }
+  }
+}
+
+// ============================================================================
+// TEXT ALIGN
+// ============================================================================
+
+@mixin generate-text-align($prefix: '') {
+  .#{$prefix}text-left {
+    text-align: left;
+  }
+  .#{$prefix}text-center {
+    text-align: center;
+  }
+  .#{$prefix}text-right {
+    text-align: right;
+  }
+  .#{$prefix}text-justify {
+    text-align: justify;
+  }
+}
+
+// ============================================================================
+// VISIBILITY
+// ============================================================================
+
+@mixin generate-visibility($prefix: '') {
+  .#{$prefix}visible {
+    visibility: visible;
+  }
+  .#{$prefix}invisible {
+    visibility: hidden;
+  }
+}
+
+// ============================================================================
+// ORDER
+// ============================================================================
+
+@mixin generate-order($prefix: '') {
+  .#{$prefix}order-first {
+    order: -9999;
+  }
+  .#{$prefix}order-last {
+    order: 9999;
+  }
+  .#{$prefix}order-none {
+    order: 0;
+  }
+}
+
+// ============================================================================
+// WIDTH FRACTIONS
+// ============================================================================
+
+@mixin generate-width-fractions($prefix: '', $include-auto: false) {
+  @if $include-auto {
+    .#{$prefix}w-auto {
+      width: auto;
+    }
+  }
+
+  @each $name, $val in $size-fractions {
+    .#{$prefix}w-#{$name} {
+      width: $val;
+    }
+  }
+}
+
+// ============================================================================
+// MAX WIDTHS
+// ============================================================================
+
+@mixin generate-max-widths($prefix: '') {
+  @each $name, $val in $max-widths {
+    .#{$prefix}max-w-#{$name} {
+      max-width: $val;
+    }
+  }
+}

package/src/styles/utilities/_responsive.scss

@@ -0,0 +1,46 @@
+// ---------------------------------------------------------------------------
+// Responsive Utilities
+// ---------------------------------------------------------------------------
+// Breakpoint-prefixed layout utilities. Visual/tier classes are excluded —
+// responsive concerns are limited to the layout sphere.
+// ---------------------------------------------------------------------------
+
+@use 'sass:list';
+@use 'sass:string';
+@use '../variables' as *;
+@use 'mixins' as gen;
+
+// Escape leading digits for valid CSS class names (e.g. 2xl → \32 xl)
+@function escape-bp($name) {
+  $str: '#{$name}';
+  $first: string.slice($str, 1, 1);
+  $digits: ('0', '1', '2', '3', '4', '5', '6', '7', '8', '9');
+  @if list.index($digits, $first) {
+    @return '\\3' + $first + ' ' + string.slice($str, 2);
+  }
+  @return $str;
+}
+
+@each $bp-name, $bp-value in $breakpoints {
+  $bp: escape-bp($bp-name);
+
+  @media (min-width: #{$bp-value}) {
+    @include gen.generate-display('#{$bp}\\:');
+    @include gen.generate-flex-direction('#{$bp}\\:');
+    @include gen.generate-flex-wrap('#{$bp}\\:');
+    @include gen.generate-flex-sizing('#{$bp}\\:');
+    @include gen.generate-alignment('#{$bp}\\:');
+    @include gen.generate-grid('#{$bp}\\:');
+    @include gen.generate-position('#{$bp}\\:');
+    @include gen.generate-overflow('#{$bp}\\:');
+    @include gen.generate-gap('#{$bp}\\:');
+    @include gen.generate-padding('#{$bp}\\:', $directions: false);
+    @include gen.generate-margin('#{$bp}\\:', $directions: false);
+    @include gen.generate-auto-margins('#{$bp}\\:');
+    @include gen.generate-width-fractions('#{$bp}\\:', $include-auto: true);
+    @include gen.generate-max-widths('#{$bp}\\:');
+    @include gen.generate-text-align('#{$bp}\\:');
+    @include gen.generate-visibility('#{$bp}\\:');
+    @include gen.generate-order('#{$bp}\\:');
+  }
+}

package/src/styles/utilities/_sizing.scss

@@ -0,0 +1,62 @@
+// ---------------------------------------------------------------------------
+// Sizing Utilities
+// ---------------------------------------------------------------------------
+// Width, height, min/max sizing utilities.
+// ---------------------------------------------------------------------------
+
+@use '../variables' as *;
+@use 'mixins' as gen;
+
+// ============================================================================
+// FRACTIONAL & KEYWORD SIZES
+// ============================================================================
+
+@include gen.generate-width-fractions;
+
+@each $name, $val in $size-fractions {
+  @if $name != 'screen' {
+    .h-#{$name} {
+      height: $val;
+    }
+  }
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+// ============================================================================
+// MIN HEIGHT
+// ============================================================================
+
+.min-h-0 {
+  min-height: 0;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+// ============================================================================
+// MAX WIDTH
+// ============================================================================
+
+@include gen.generate-max-widths;
+
+// ============================================================================
+// FIXED SIZES (full spacing scale)
+// ============================================================================
+
+@each $key, $val in $spacing-steps {
+  .w-#{$key} {
+    width: $val;
+  }
+
+  .h-#{$key} {
+    height: $val;
+  }
+}

package/src/styles/utilities/_spacing.scss

@@ -0,0 +1,12 @@
+// ---------------------------------------------------------------------------
+// Spacing Utilities
+// ---------------------------------------------------------------------------
+// Margin, padding, and gap utilities.
+// ---------------------------------------------------------------------------
+
+@use 'mixins' as *;
+
+@include generate-gap;
+@include generate-padding;
+@include generate-margin;
+@include generate-auto-margins;