@magmonium/one 0.0.4 → 0.0.7

package/sass/mixins/_display.sass

@@ -0,0 +1,210 @@
+// Display utilities and mixins
+
+// Basic display types
+@mixin display($value)
+  display: $value
+
+@mixin block
+  display: block
+
+@mixin inline
+  display: inline
+
+@mixin inline-block
+  display: inline-block
+
+@mixin none
+  display: none
+
+@mixin hidden
+  display: none
+
+@mixin show
+  display: block
+
+// Note: Flex display mixins have been moved to mixins/_flex.sass
+
+// Grid display
+@mixin grid
+  display: grid
+
+@mixin inline-grid
+  display: inline-grid
+
+// Table display
+@mixin table
+  display: table
+
+@mixin table-row
+  display: table-row
+
+@mixin table-cell
+  display: table-cell
+
+@mixin table-column
+  display: table-column
+
+@mixin table-row-group
+  display: table-row-group
+
+@mixin table-header-group
+  display: table-header-group
+
+@mixin table-footer-group
+  display: table-footer-group
+
+@mixin table-caption
+  display: table-caption
+
+@mixin table-column-group
+  display: table-column-group
+
+// List display
+@mixin list-item
+  display: list-item
+
+// Content flow
+@mixin flow-root
+  display: flow-root
+
+@mixin contents
+  display: contents
+
+// Legacy display values
+@mixin run-in
+  display: run-in
+
+@mixin compact
+  display: compact
+
+// Multi-keyword display values (CSS Display Module Level 3)
+@mixin block-flex
+  display: block flex
+
+@mixin inline-flex-display
+  display: inline flex
+
+@mixin block-grid
+  display: block grid
+
+@mixin inline-grid-display
+  display: inline grid
+
+// Visibility related (not display but commonly used together)
+@mixin visible
+  visibility: visible
+
+@mixin invisible
+  visibility: hidden
+
+@mixin collapse
+  visibility: collapse
+
+// Common display patterns
+@mixin hide-visually
+  position: absolute
+  width: 1px
+  height: 1px
+  margin: -1px
+  padding: 0
+  overflow: hidden
+  clip: rect(0, 0, 0, 0)
+  white-space: nowrap
+  border: 0
+
+@mixin show-visually
+  position: static
+  width: auto
+  height: auto
+  margin: 0
+  padding: 0
+  overflow: visible
+  clip: auto
+  white-space: normal
+  border: initial
+
+// Responsive display helpers
+@mixin hide-mobile
+  @media (max-width: 768px)
+    display: none
+
+@mixin show-mobile
+  @media (max-width: 768px)
+    display: block
+
+@mixin hide-tablet
+  @media (min-width: 769px) and (max-width: 1024px)
+    display: none
+
+@mixin show-tablet
+  @media (min-width: 769px) and (max-width: 1024px)
+    display: block
+
+@mixin hide-desktop
+  @media (min-width: 1025px)
+    display: none
+
+@mixin show-desktop
+  @media (min-width: 1025px)
+    display: block
+
+@mixin mobile-only
+  @media (max-width: 768px)
+    display: block
+  @media (min-width: 769px)
+    display: none
+
+@mixin tablet-only
+  @media (max-width: 768px)
+    display: none
+  @media (min-width: 769px) and (max-width: 1024px)
+    display: block
+  @media (min-width: 1025px)
+    display: none
+
+@mixin desktop-only
+  @media (max-width: 1024px)
+    display: none
+  @media (min-width: 1025px)
+    display: block
+
+// Print display helpers
+@mixin hide-print
+  @media print
+    display: none !important
+
+@mixin show-print
+  @media print
+    display: block !important
+
+@mixin print-only
+  display: none
+  @media print
+    display: block !important
+
+// Container query display helpers
+@mixin hide-container-small
+  @container (max-width: 400px)
+    display: none
+
+@mixin show-container-small
+  @container (max-width: 400px)
+    display: block
+
+@mixin hide-container-large
+  @container (min-width: 800px)
+    display: none
+
+@mixin show-container-large
+  @container (min-width: 800px)
+    display: block
+
+// Conditional display based on features
+@mixin display-if-supports($property: display, $value: grid)
+  @supports (#{$property}: #{$value})
+    display: #{$value}
+
+@mixin fallback-display($fallback: block, $modern: grid)
+  display: $fallback
+  @supports (display: #{$modern})
+    display: #{$modern}

package/sass/mixins/_flex.sass

@@ -0,0 +1,104 @@
+// Flex utilities and mixins
+
+// Flex container mixins
+@mixin flex
+  display: flex
+
+@mixin inline-flex
+  display: inline-flex
+
+@mixin flex-column
+  display: flex
+  flex-direction: column
+
+@mixin flex-row
+  display: flex
+  flex-direction: row
+
+@mixin flex-center
+  display: flex
+  align-items: center
+  justify-content: center
+
+@mixin flex-center-column
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+
+@mixin flex-start
+  display: flex
+  align-items: flex-start
+  justify-content: flex-start
+
+@mixin flex-end
+  display: flex
+  align-items: flex-end
+  justify-content: flex-end
+
+@mixin flex-between
+  display: flex
+  align-items: center
+  justify-content: space-between
+
+@mixin flex-around
+  display: flex
+  align-items: center
+  justify-content: space-around
+
+@mixin flex-evenly
+  display: flex
+  align-items: center
+  justify-content: space-evenly
+
+// Flex item mixins
+@mixin flex-1
+  flex: 1
+
+@mixin flex-auto
+  flex: auto
+
+@mixin flex-none
+  flex: none
+
+@mixin flex-grow($value: 1)
+  flex-grow: $value
+
+@mixin flex-shrink($value: 1)
+  flex-shrink: $value
+
+@mixin flex-basis($value)
+  flex-basis: $value
+
+// Alignment mixins
+@mixin align-items($value)
+  align-items: $value
+
+@mixin justify-content($value)
+  justify-content: $value
+
+@mixin align-self($value)
+  align-self: $value
+
+@mixin align-content($value)
+  align-content: $value
+
+// Direction and wrap
+@mixin flex-direction($value)
+  flex-direction: $value
+
+@mixin flex-wrap($value: wrap)
+  flex-wrap: $value
+
+@mixin flex-nowrap
+  flex-wrap: nowrap
+
+// Gap utilities
+@mixin gap($value)
+  gap: $value
+
+@mixin row-gap($value)
+  row-gap: $value
+
+@mixin column-gap($value)
+  column-gap: $value

package/sass/mixins/_form.sass

@@ -0,0 +1,68 @@
+=form-grid($gap: 1.25em, $columns: 12)
+  display: grid
+  grid-template-columns: repeat($columns, 1fr)
+  gap: $gap
+  padding: 1.25em 0
+
+  > *
+    grid-column: span $columns
+    min-width: 0
+
+  @for $i from 1 through $columns
+    .col-#{$i}
+      grid-column: span $i
+
+  @for $i from 1 through $columns
+    .col-start-#{$i}
+      grid-column-start: $i
+
+  @for $i from 1 through $columns
+    .col-end-#{$i}
+      grid-column-end: $i
+
+  @media (max-width: 768px)
+    @for $i from 1 through $columns
+      .col-md-#{$i}
+        grid-column: span $i
+
+    .col-md-auto
+      grid-column: span $columns
+
+  @media (max-width: 480px)
+    @for $i from 1 through $columns
+      .col-sm-#{$i}
+        grid-column: span $i
+
+    .col-sm-auto
+      grid-column: span $columns
+
+    > *:not([class*="col-sm-"])
+      grid-column: span $columns
+
+=form-spacing-utilities
+  .gap-xs
+    gap: calc(1.25em * 0.25)
+
+  .gap-sm
+    gap: calc(1.25em * 0.5)
+
+  .gap-md
+    gap: 1.25em
+
+  .gap-lg
+    gap: calc(1.25em * 1.5)
+
+  .gap-xl
+    gap: calc(1.25em * 2)
+
+  .mt-auto
+    margin-top: auto
+
+  .mb-auto
+    margin-bottom: auto
+
+  .ml-auto
+    margin-left: auto
+
+  .mr-auto
+    margin-right: auto

package/sass/mixins/_grid.sass

@@ -0,0 +1,273 @@
+// CSS Grid Layout Mixins - Comprehensive Grid System
+@use '../variables/spacing' as *
+
+// ===========================================
+// GRID DISPLAY MIXINS
+// ===========================================
+
+@mixin grid-layout
+  display: grid
+
+@mixin inline-grid-layout
+  display: inline-grid
+
+@mixin subgrid-layout
+  display: subgrid
+
+// ===========================================
+// GRID TEMPLATE MIXINS
+// ===========================================
+
+// Grid template rows
+@mixin grid-template-rows($rows)
+  grid-template-rows: #{$rows}
+
+// Grid template columns  
+@mixin grid-template-columns($cols)
+  grid-template-columns: #{$cols}
+
+// Grid template areas
+@mixin grid-template-areas($areas...)
+  $area-string: ""
+  @each $area in $areas
+    $area-string: $area-string + '"' + $area + '" '
+  grid-template-areas: #{$area-string}
+
+// Combined grid template
+@mixin grid-template($rows, $cols, $areas: null)
+  @include grid-template-rows($rows)
+  @include grid-template-columns($cols)
+  @if $areas
+    @include grid-template-areas($areas...)
+
+// ===========================================
+// GRID GAP MIXINS
+// ===========================================
+
+@mixin grid-gap($gap)
+  gap: $gap
+
+@mixin grid-row-gap($gap)
+  row-gap: $gap
+
+@mixin grid-column-gap($gap)
+  column-gap: $gap
+
+@mixin grid-gap-responsive($base: $grid-gutter-width)
+  gap: $base * 0.5
+  
+  @media (min-width: 768px)
+    gap: $base
+    
+  @media (min-width: 1024px)
+    gap: $base * 1.5
+
+// ===========================================
+// GRID ITEM PLACEMENT MIXINS
+// ===========================================
+
+// Grid area assignment
+@mixin grid-area($area)
+  grid-area: #{$area}
+
+// Grid row placement
+@mixin grid-row($start, $end: null)
+  @if $end
+    grid-row: #{$start} / #{$end}
+  @else
+    grid-row: #{$start}
+
+// Grid column placement
+@mixin grid-column($start, $end: null)
+  @if $end
+    grid-column: #{$start} / #{$end}
+  @else
+    grid-column: #{$start}
+
+// Grid item span
+@mixin grid-span-row($span)
+  grid-row: span #{$span}
+
+@mixin grid-span-column($span)
+  grid-column: span #{$span}
+
+@mixin grid-span($row-span: null, $col-span: null)
+  @if $row-span
+    @include grid-span-row($row-span)
+  @if $col-span
+    @include grid-span-column($col-span)
+
+// ===========================================
+// GRID ALIGNMENT MIXINS
+// ===========================================
+
+// Place items (align and justify items)
+@mixin place-items($align, $justify: $align)
+  place-items: #{$align} #{$justify}
+
+// Place content (align and justify content)
+@mixin place-content($align, $justify: $align)
+  place-content: #{$align} #{$justify}
+
+// Place self (align and justify self)
+@mixin place-self($align, $justify: $align)
+  place-self: #{$align} #{$justify}
+
+// Individual alignment properties (grid-specific)
+@mixin grid-align-items($value)
+  align-items: #{$value}
+
+@mixin grid-justify-items($value)
+  justify-items: #{$value}
+
+@mixin grid-align-content($value)
+  align-content: #{$value}
+
+@mixin grid-justify-content($value)
+  justify-content: #{$value}
+
+@mixin grid-align-self($value)
+  align-self: #{$value}
+
+@mixin grid-justify-self($value)
+  justify-self: #{$value}
+
+// ===========================================
+// GRID AUTO FLOW MIXINS
+// ===========================================
+
+@mixin grid-auto-flow($flow)
+  grid-auto-flow: #{$flow}
+
+@mixin grid-auto-rows($size)
+  grid-auto-rows: #{$size}
+
+@mixin grid-auto-columns($size)
+  grid-auto-columns: #{$size}
+
+// ===========================================
+// COMMON GRID PATTERNS
+// ===========================================
+
+// Three section layout (header, main, footer)
+@mixin three-section-grid($header-size: auto, $footer-size: auto, $gap: $grid-gutter-width)
+  @include grid-layout
+  @include grid-template-rows($header-size 1fr $footer-size)
+  @include grid-gap($gap)
+  @include place-items(stretch)
+
+// Sidebar layout
+@mixin sidebar-grid($sidebar-width: 250px, $gap: $grid-gutter-width)
+  @include grid-layout
+  @include grid-template-columns($sidebar-width 1fr)
+  @include grid-gap($gap)
+  min-height: 100vh
+
+// Center grid (perfect centering)
+@mixin center-grid($gap: 0)
+  @include grid-layout
+  @include place-items(center)
+  @include grid-gap($gap)
+
+// Auto-fit grid (responsive columns)
+@mixin auto-fit-grid($min-width: 250px, $gap: $grid-gutter-width)
+  @include grid-layout
+  @include grid-template-columns(repeat(auto-fit, minmax($min-width, 1fr)))
+  @include grid-gap($gap)
+
+// Auto-fill grid (fills container)
+@mixin auto-fill-grid($min-width: 250px, $gap: $grid-gutter-width)
+  @include grid-layout
+  @include grid-template-columns(repeat(auto-fill, minmax($min-width, 1fr)))
+  @include grid-gap($gap)
+
+// Card grid pattern
+@mixin card-grid($min-width: 280px, $max-cols: 4, $gap: $spacer)
+  @include auto-fit-grid($min-width, $gap)
+  
+  // Limit maximum columns
+  @media (min-width: calc(#{$min-width} * #{$max-cols} + #{$gap} * #{$max-cols - 1}))
+    @include grid-template-columns(repeat($max-cols, 1fr))
+
+// Masonry-style grid
+@mixin masonry-grid($cols: 3, $gap: $spacer)
+  @include grid-layout
+  @include grid-template-columns(repeat($cols, 1fr))
+  @include grid-gap($gap)
+  @include grid-auto-rows(min-content)
+
+// ===========================================
+// NAVIGATION-SPECIFIC MIXINS
+// ===========================================
+
+// Three-section navigation (perfect for sidebars)
+@mixin nav-three-section($header-size: auto, $footer-size: auto, $gap: 0)
+  @include three-section-grid($header-size, $footer-size, $gap)
+  
+  // Center content in middle section
+  > :nth-child(2)
+    @include place-self(center)
+
+// Horizontal navigation grid
+@mixin nav-horizontal($gap: $spacer)
+  @include grid-layout
+  @include grid-auto-flow(column)
+  @include grid-auto-columns(max-content)
+  @include place-items(center)
+  @include grid-gap($gap)
+
+// Responsive navigation that switches layout
+@mixin nav-responsive($mobile-layout: column, $desktop-layout: row, $breakpoint: 768px)
+  @include grid-layout
+  @include place-items(center)
+  
+  @if $mobile-layout == column
+    @include grid-auto-flow(row)
+    @include grid-template-columns(1fr)
+  @else
+    @include grid-auto-flow(column)
+    @include grid-auto-columns(max-content)
+  
+  @media (min-width: $breakpoint)
+    @if $desktop-layout == row
+      @include grid-auto-flow(column)
+      @include grid-auto-columns(max-content)
+    @else
+      @include grid-auto-flow(row)
+      @include grid-template-columns(1fr)
+
+// ===========================================
+// UTILITY MIXINS
+// ===========================================
+
+// Grid item order
+@mixin grid-order($order)
+  order: #{$order}
+
+// Grid with fallback for older browsers
+@mixin grid-with-fallback($fallback: block)
+  display: #{$fallback}
+  display: grid
+
+// Full bleed grid item (breaks out of grid)
+@mixin full-bleed
+  grid-column: 1 / -1
+
+// Grid debugging (for development)
+@mixin grid-debug($color: rgba(255, 0, 0, 0.1))
+  > *
+    background: #{$color}
+    border: 1px solid rgba(255, 0, 0, 0.3)
+
+// Responsive grid helper
+@mixin responsive-grid-columns($mobile: 1, $tablet: 2, $desktop: 3, $large: 4)
+  @include grid-template-columns(repeat($mobile, 1fr))
+  
+  @media (min-width: 576px)
+    @include grid-template-columns(repeat($tablet, 1fr))
+    
+  @media (min-width: 768px)
+    @include grid-template-columns(repeat($desktop, 1fr))
+    
+  @media (min-width: 1024px)
+    @include grid-template-columns(repeat($large, 1fr))

package/sass/mixins/_header.sass

@@ -0,0 +1,71 @@
+// Header mixins for h1-h6 styling
+@use 'sass:map'
+@use '../variables/typography' as t
+@use '../variables/colors' as c
+
+// Header mixin that takes level (1-6) and applies appropriate styles
+@mixin header($level: 1)
+  @if $level < 1 or $level > 6
+    @error "Header level must be between 1 and 6"
+  
+  // Font size based on level
+  font-size: map.get(t.$font-sizes, $level)
+  
+  // Font weight based on level (heavier for higher importance)
+  @if $level == 1
+    font-weight: t.$font-weight-bold
+  @else if $level == 2
+    font-weight: t.$font-weight-semibold
+  @else if $level == 3
+    font-weight: t.$font-weight-medium
+  @else
+    font-weight: t.$font-weight-normal
+  
+  // Color - darker for higher levels
+  @if $level <= 2
+    color: c.$text
+  @else if $level <= 4
+    color: c.$text-secondary
+  @else
+    color: c.$text-tertiary
+  
+  // Line height
+  line-height: t.$headings-line-height
+  
+  // Margin bottom
+  margin-bottom: t.$headings-margin-bottom
+  
+  // Font family
+  font-family: t.$headings-font-family or t.$font-family-base
+
+// Convenience mixins for each header level
+@mixin h1
+  @include header(1)
+
+@mixin h2
+  @include header(2)
+
+@mixin h3
+  @include header(3)
+
+@mixin h4
+  @include header(4)
+
+@mixin h5
+  @include header(5)
+
+@mixin h6
+  @include header(6)
+
+// Header with custom properties
+@mixin header-custom($level, $weight: null, $color: null, $size: null)
+  @include header($level)
+  
+  @if $weight
+    font-weight: $weight
+  
+  @if $color
+    color: $color
+  
+  @if $size
+    font-size: $size