@magmonium/one 0.0.4 → 0.0.5

package/sass/utilities/_grid.sass

@@ -0,0 +1,502 @@
+// CSS Grid Utility Classes - Comprehensive Grid System
+@use '../mixins/grid' as grid
+
+// ===========================================
+// GRID DISPLAY UTILITIES
+// ===========================================
+
+.grid-container
+  @include grid.grid-layout
+
+.inline-grid-container
+  @include grid.inline-grid-layout
+
+// ===========================================
+// GRID TEMPLATE UTILITIES
+// ===========================================
+
+// Grid template rows
+.grid-rows-1
+  @include grid.grid-template-rows(1fr)
+
+.grid-rows-2
+  @include grid.grid-template-rows(repeat(2, 1fr))
+
+.grid-rows-3
+  @include grid.grid-template-rows(repeat(3, 1fr))
+
+.grid-rows-4
+  @include grid.grid-template-rows(repeat(4, 1fr))
+
+.grid-rows-5
+  @include grid.grid-template-rows(repeat(5, 1fr))
+
+.grid-rows-6
+  @include grid.grid-template-rows(repeat(6, 1fr))
+
+// Common row patterns
+.grid-rows-auto-1fr
+  @include grid.grid-template-rows(auto 1fr)
+
+.grid-rows-1fr-auto
+  @include grid.grid-template-rows(1fr auto)
+
+.grid-rows-auto-1fr-auto
+  @include grid.grid-template-rows(auto 1fr auto)
+
+.grid-rows-auto
+  @include grid.grid-template-rows(repeat(auto-fit, auto))
+
+// Grid template columns
+.grid-cols-1
+  @include grid.grid-template-columns(1fr)
+
+.grid-cols-2
+  @include grid.grid-template-columns(repeat(2, 1fr))
+
+.grid-cols-3
+  @include grid.grid-template-columns(repeat(3, 1fr))
+
+.grid-cols-4
+  @include grid.grid-template-columns(repeat(4, 1fr))
+
+.grid-cols-5
+  @include grid.grid-template-columns(repeat(5, 1fr))
+
+.grid-cols-6
+  @include grid.grid-template-columns(repeat(6, 1fr))
+
+.grid-cols-12
+  @include grid.grid-template-columns(repeat(12, 1fr))
+
+// Common column patterns
+.grid-cols-auto-1fr
+  @include grid.grid-template-columns(auto 1fr)
+
+.grid-cols-1fr-auto
+  @include grid.grid-template-columns(1fr auto)
+
+.grid-cols-auto-1fr-auto
+  @include grid.grid-template-columns(auto 1fr auto)
+
+.grid-cols-auto
+  @include grid.grid-template-columns(repeat(auto-fit, minmax(0, 1fr)))
+
+// Auto-fit responsive columns
+.grid-cols-auto-sm
+  @include grid.grid-template-columns(repeat(auto-fit, minmax(150px, 1fr)))
+
+.grid-cols-auto-md
+  @include grid.grid-template-columns(repeat(auto-fit, minmax(200px, 1fr)))
+
+.grid-cols-auto-lg
+  @include grid.grid-template-columns(repeat(auto-fit, minmax(250px, 1fr)))
+
+.grid-cols-auto-xl
+  @include grid.grid-template-columns(repeat(auto-fit, minmax(300px, 1fr)))
+
+// ===========================================
+// GRID GAP UTILITIES
+// ===========================================
+
+.gap-0
+  @include grid.grid-gap(0)
+
+.gap-1
+  @include grid.grid-gap(0.25rem)
+
+.gap-2
+  @include grid.grid-gap(0.5rem)
+
+.gap-3
+  @include grid.grid-gap(0.75rem)
+
+.gap-4
+  @include grid.grid-gap(1rem)
+
+.gap-5
+  @include grid.grid-gap(1.25rem)
+
+.gap-6
+  @include grid.grid-gap(1.5rem)
+
+.gap-8
+  @include grid.grid-gap(2rem)
+
+.gap-10
+  @include grid.grid-gap(2.5rem)
+
+.gap-12
+  @include grid.grid-gap(3rem)
+
+// Row and column specific gaps
+.gap-x-0
+  @include grid.grid-column-gap(0)
+
+.gap-x-1
+  @include grid.grid-column-gap(0.25rem)
+
+.gap-x-2
+  @include grid.grid-column-gap(0.5rem)
+
+.gap-x-3
+  @include grid.grid-column-gap(0.75rem)
+
+.gap-x-4
+  @include grid.grid-column-gap(1rem)
+
+.gap-x-6
+  @include grid.grid-column-gap(1.5rem)
+
+.gap-y-0
+  @include grid.grid-row-gap(0)
+
+.gap-y-1
+  @include grid.grid-row-gap(0.25rem)
+
+.gap-y-2
+  @include grid.grid-row-gap(0.5rem)
+
+.gap-y-3
+  @include grid.grid-row-gap(0.75rem)
+
+.gap-y-4
+  @include grid.grid-row-gap(1rem)
+
+.gap-y-6
+  @include grid.grid-row-gap(1.5rem)
+
+// ===========================================
+// GRID ALIGNMENT UTILITIES
+// ===========================================
+
+// Place items
+.place-items-start
+  @include grid.place-items(start)
+
+.place-items-end
+  @include grid.place-items(end)
+
+.place-items-center
+  @include grid.place-items(center)
+
+.place-items-stretch
+  @include grid.place-items(stretch)
+
+// Place content
+.place-content-start
+  @include grid.place-content(start)
+
+.place-content-end
+  @include grid.place-content(end)
+
+.place-content-center
+  @include grid.place-content(center)
+
+.place-content-stretch
+  @include grid.place-content(stretch)
+
+.place-content-between
+  @include grid.place-content(space-between)
+
+.place-content-around
+  @include grid.place-content(space-around)
+
+.place-content-evenly
+  @include grid.place-content(space-evenly)
+
+// Place self
+.place-self-start
+  @include grid.place-self(start)
+
+.place-self-end
+  @include grid.place-self(end)
+
+.place-self-center
+  @include grid.place-self(center)
+
+.place-self-stretch
+  @include grid.place-self(stretch)
+
+// Individual alignment utilities
+.grid-justify-items-start
+  @include grid.grid-justify-items(start)
+
+.grid-justify-items-end
+  @include grid.grid-justify-items(end)
+
+.grid-justify-items-center
+  @include grid.grid-justify-items(center)
+
+.grid-justify-items-stretch
+  @include grid.grid-justify-items(stretch)
+
+.grid-align-items-start
+  @include grid.grid-align-items(start)
+
+.grid-align-items-end
+  @include grid.grid-align-items(end)
+
+.grid-align-items-center
+  @include grid.grid-align-items(center)
+
+.grid-align-items-stretch
+  @include grid.grid-align-items(stretch)
+
+.grid-justify-self-start
+  @include grid.grid-justify-self(start)
+
+.grid-justify-self-end
+  @include grid.grid-justify-self(end)
+
+.grid-justify-self-center
+  @include grid.grid-justify-self(center)
+
+.grid-justify-self-stretch
+  @include grid.grid-justify-self(stretch)
+
+.grid-align-self-start
+  @include grid.grid-align-self(start)
+
+.grid-align-self-end
+  @include grid.grid-align-self(end)
+
+.grid-align-self-center
+  @include grid.grid-align-self(center)
+
+.grid-align-self-stretch
+  @include grid.grid-align-self(stretch)
+
+// ===========================================
+// GRID ITEM SPAN UTILITIES
+// ===========================================
+
+// Column spans
+.col-span-1
+  @include grid.grid-span-column(1)
+
+.col-span-2
+  @include grid.grid-span-column(2)
+
+.col-span-3
+  @include grid.grid-span-column(3)
+
+.col-span-4
+  @include grid.grid-span-column(4)
+
+.col-span-5
+  @include grid.grid-span-column(5)
+
+.col-span-6
+  @include grid.grid-span-column(6)
+
+.col-span-full
+  @include grid.grid-column(1, -1)
+
+// Row spans
+.row-span-1
+  @include grid.grid-span-row(1)
+
+.row-span-2
+  @include grid.grid-span-row(2)
+
+.row-span-3
+  @include grid.grid-span-row(3)
+
+.row-span-4
+  @include grid.grid-span-row(4)
+
+.row-span-5
+  @include grid.grid-span-row(5)
+
+.row-span-6
+  @include grid.grid-span-row(6)
+
+.row-span-full
+  @include grid.grid-row(1, -1)
+
+// ===========================================
+// GRID AUTO FLOW UTILITIES
+// ===========================================
+
+.grid-flow-row
+  @include grid.grid-auto-flow(row)
+
+.grid-flow-col
+  @include grid.grid-auto-flow(column)
+
+.grid-flow-row-dense
+  @include grid.grid-auto-flow(row dense)
+
+.grid-flow-col-dense
+  @include grid.grid-auto-flow(column dense)
+
+// ===========================================
+// COMMON GRID PATTERNS
+// ===========================================
+
+// Three section layouts
+.grid-three-section
+  @include grid.three-section-grid
+
+.grid-nav-three-section
+  @include grid.nav-three-section
+
+// Sidebar layouts
+.grid-sidebar
+  @include grid.sidebar-grid
+
+.grid-sidebar-sm
+  @include grid.sidebar-grid(200px)
+
+.grid-sidebar-lg
+  @include grid.sidebar-grid(300px)
+
+// Center layouts
+.grid-center
+  @include grid.center-grid
+
+// Card grids
+.grid-cards
+  @include grid.card-grid
+
+.grid-cards-sm
+  @include grid.card-grid(200px, 3)
+
+.grid-cards-lg
+  @include grid.card-grid(350px, 3)
+
+// Auto-fit grids
+.grid-auto-fit
+  @include grid.auto-fit-grid
+
+.grid-auto-fit-sm
+  @include grid.auto-fit-grid(150px)
+
+.grid-auto-fit-md
+  @include grid.auto-fit-grid(250px)
+
+.grid-auto-fit-lg
+  @include grid.auto-fit-grid(350px)
+
+// Masonry grids
+.grid-masonry-2
+  @include grid.masonry-grid(2)
+
+.grid-masonry-3
+  @include grid.masonry-grid(3)
+
+.grid-masonry-4
+  @include grid.masonry-grid(4)
+
+// Navigation grids
+.grid-nav-horizontal
+  @include grid.nav-horizontal
+
+.grid-nav-responsive
+  @include grid.nav-responsive
+
+// ===========================================
+// RESPONSIVE GRID UTILITIES
+// ===========================================
+
+@media (max-width: 480px)
+  .grid-cols-xs-1
+    @include grid.grid-template-columns(1fr)
+    
+  .grid-cols-xs-2
+    @include grid.grid-template-columns(repeat(2, 1fr))
+
+@media (min-width: 481px) and (max-width: 768px)
+  .grid-cols-sm-1
+    @include grid.grid-template-columns(1fr)
+    
+  .grid-cols-sm-2
+    @include grid.grid-template-columns(repeat(2, 1fr))
+    
+  .grid-cols-sm-3
+    @include grid.grid-template-columns(repeat(3, 1fr))
+
+@media (min-width: 769px) and (max-width: 1024px)
+  .grid-cols-md-1
+    @include grid.grid-template-columns(1fr)
+    
+  .grid-cols-md-2
+    @include grid.grid-template-columns(repeat(2, 1fr))
+    
+  .grid-cols-md-3
+    @include grid.grid-template-columns(repeat(3, 1fr))
+    
+  .grid-cols-md-4
+    @include grid.grid-template-columns(repeat(4, 1fr))
+
+@media (min-width: 1025px)
+  .grid-cols-lg-1
+    @include grid.grid-template-columns(1fr)
+    
+  .grid-cols-lg-2
+    @include grid.grid-template-columns(repeat(2, 1fr))
+    
+  .grid-cols-lg-3
+    @include grid.grid-template-columns(repeat(3, 1fr))
+    
+  .grid-cols-lg-4
+    @include grid.grid-template-columns(repeat(4, 1fr))
+    
+  .grid-cols-lg-5
+    @include grid.grid-template-columns(repeat(5, 1fr))
+    
+  .grid-cols-lg-6
+    @include grid.grid-template-columns(repeat(6, 1fr))
+
+// ===========================================
+// GRID ORDER UTILITIES
+// ===========================================
+
+.order-1
+  @include grid.grid-order(1)
+
+.order-2
+  @include grid.grid-order(2)
+
+.order-3
+  @include grid.grid-order(3)
+
+.order-4
+  @include grid.grid-order(4)
+
+.order-5
+  @include grid.grid-order(5)
+
+.order-first
+  @include grid.grid-order(-1)
+
+.order-last
+  @include grid.grid-order(9999)
+
+// ===========================================
+// UTILITY PATTERNS FOR COMMON LAYOUTS
+// ===========================================
+
+// Full bleed (breaks out of grid)
+.full-bleed
+  @include grid.full-bleed
+
+// Dashboard layout
+.grid-dashboard
+  @include grid.grid
+  @include grid.grid-template-areas("sidebar header", "sidebar main", "sidebar footer")
+  @include grid.grid-template-columns(250px 1fr)
+  @include grid.grid-template-rows(auto 1fr auto)
+  
+  .sidebar
+    @include grid.grid-area(sidebar)
+    
+  .header
+    @include grid.grid-area(header)
+    
+  .main
+    @include grid.grid-area(main)
+    
+  .footer
+    @include grid.grid-area(footer)

package/sass/utilities/_index.sass

@@ -0,0 +1,17 @@
+// Utilities index - exports all utility classes
+
+@forward 'spacing'
+@forward 'borders'
+@forward 'flex'
+@forward 'grid'
+@forward 'position'
+@forward 'sizing'
+@forward 'display'
+@forward 'colors'
+@forward 'backgrounds'
+@forward 'backdrops'
+@forward 'links'
+@forward 'text'
+@forward 'lists'
+@forward 'input'
+@forward 'popup'

package/sass/utilities/_input.sass

@@ -0,0 +1,14 @@
+@use '../variables/colors' as *
+
+.input-error
+  display: flex
+  align-items: center
+  gap: calc(1.25em * 0.4)
+  color: $error
+  font-size: calc(1.25em * 0.6)
+  margin-top: calc(1.25em * 0.4)
+
+  &::before
+    content: '⚠'
+    font-size: calc(1.25em * 0.8)
+    flex-shrink: 0

package/sass/utilities/_links.sass

@@ -0,0 +1,136 @@
+// Link utility classes derived from mixins
+@use '../mixins/links' as links
+@use '../variables/colors' as *
+
+// Basic link variants
+.link-primary
+  @include links.link-base
+  @include links.link-states($mm, $mm-lite, $mm-dark)
+  @include links.link-underline('hover')
+
+.link-secondary
+  @include links.link-base
+  @include links.link-states($text-secondary, $text, $text)
+  @include links.link-underline('hover')
+
+.link-muted
+  @include links.link-base
+  @include links.link-states($text-tertiary, $text-secondary, $text)
+  @include links.link-underline('hover')
+
+.link-clean
+  @include links.link-base
+  @include links.link-states($text, $mm, $mm-dark)
+  @include links.link-underline('none')
+
+// Status-colored links
+.link-success
+  @include links.link-base
+  @include links.link-states($success, $success, $success)
+
+.link-warning
+  @include links.link-base
+  @include links.link-states($warning, $warning, $warning)
+
+.link-error
+  @include links.link-base
+  @include links.link-states($error, $error, $error)
+
+// Underline variants
+.link-underline
+  @include links.link-underline('always')
+
+.link-no-underline
+  @include links.link-underline('none')
+
+.link-underline-hover
+  @include links.link-underline('hover')
+
+// External link
+.link-external
+  @include links.link-base
+  @include links.link-states($mm, $mm-lite, $mm-dark)
+  @include links.link-external
+
+// Disabled link
+.link-disabled
+  @include links.link-disabled
+
+// Button-style links
+.link-button
+  @include links.link-base
+  @include links.link-button
+  @include links.link-states($text, $mm, $mm-dark)
+  background-color: $frame
+  border: 1px solid $border
+
+.link-button-primary
+  @include links.link-base
+  @include links.link-button
+  @include links.link-states($inverse-text, $inverse-text, $inverse-text)
+  background-color: $mm
+  border: 1px solid $mm
+  
+  &:hover
+    background-color: $mm-lite
+    border-color: $mm-lite
+
+.link-button-secondary
+  @include links.link-base
+  @include links.link-button
+  @include links.link-states($mm, $mm-dark, $mm-dark)
+  background-color: transparent
+  border: 1px solid $mm
+  
+  &:hover
+    background-color: $mm
+    color: $inverse-text
+
+// Link sizes
+.link-sm
+  font-size: 0.875rem
+
+.link-lg
+  font-size: 1.125rem
+
+.link-xl
+  font-size: 1.25rem
+
+// Link with icon classes
+.link-with-icon
+  @include links.link-with-icon
+
+.link-with-icon-right
+  @include links.link-with-icon('right')
+
+// Navigation link styles
+.link-nav
+  @include links.link-base
+  @include links.link-states($text-secondary, $text, $mm)
+  @include links.link-underline('none')
+  display: block
+  padding: 0.5rem 1rem
+  border-radius: 4px
+  transition: all 0.2s ease-in-out
+  
+  &:hover
+    background-color: $bg-focus
+    
+  &.active
+    background-color: $highlight
+    color: $mm
+    font-weight: 500
+
+// Breadcrumb link styles
+.link-breadcrumb
+  @include links.link-base
+  @include links.link-states($text-secondary, $text, $mm)
+  @include links.link-underline('hover')
+  font-size: 0.875rem
+
+// Footer link styles
+.link-footer
+  @include links.link-base
+  @include links.link-states($text-tertiary, $text-secondary, $text)
+  @include links.link-underline('hover')
+  font-size: 0.875rem

package/sass/utilities/_lists.sass

@@ -0,0 +1,4 @@
+@use '../mixins/lists' as lists
+
+ul.menu
+  +lists.list-app-nav