@magmonium/one 0.0.3 → 0.0.5

package/sass/utilities/_backgrounds.sass

@@ -0,0 +1,285 @@
+// Background utility classes derived from mixins
+@use '../mixins/backgrounds' as bg
+
+// Basic background colors
+.bg-primary
+  @include bg.bg-primary
+
+.bg-secondary
+  @include bg.bg-secondary
+
+.bg-surface
+  @include bg.bg-surface
+
+.bg-overlay
+  @include bg.bg-overlay
+
+// Status backgrounds
+.bg-success
+  @include bg.bg-success
+
+.bg-warning
+  @include bg.bg-warning
+
+.bg-error
+  @include bg.bg-error
+
+.bg-info
+  @include bg.bg-info
+
+.bg-danger
+  @include bg.bg-danger
+
+// Brand backgrounds
+.bg-brand-primary
+  @include bg.bg-brand-primary
+
+.bg-brand-secondary
+  @include bg.bg-brand-secondary
+
+// Basic colors
+.bg-transparent
+  @include bg.bg-transparent
+
+.bg-black
+  @include bg.bg-black
+
+.bg-white
+  @include bg.bg-white
+
+// Grayscale backgrounds
+.bg-gray-100
+  @include bg.bg-gray-100
+
+.bg-gray-200
+  @include bg.bg-gray-200
+
+.bg-gray-300
+  @include bg.bg-gray-300
+
+.bg-gray-400
+  @include bg.bg-gray-400
+
+.bg-gray-500
+  @include bg.bg-gray-500
+
+.bg-gray-600
+  @include bg.bg-gray-600
+
+.bg-gray-700
+  @include bg.bg-gray-700
+
+.bg-gray-800
+  @include bg.bg-gray-800
+
+.bg-gray-900
+  @include bg.bg-gray-900
+
+// Background size utilities
+.bg-cover
+  @include bg.bg-cover
+
+.bg-contain
+  @include bg.bg-contain
+
+.bg-auto
+  @include bg.bg-auto
+
+// Background repeat utilities
+.bg-repeat
+  @include bg.bg-repeat
+
+.bg-no-repeat
+  @include bg.bg-no-repeat
+
+.bg-repeat-x
+  @include bg.bg-repeat-x
+
+.bg-repeat-y
+  @include bg.bg-repeat-y
+
+// Background position utilities
+.bg-position-center
+  @include bg.bg-position-center
+
+.bg-position-top
+  @include bg.bg-position-top
+
+.bg-position-bottom
+  @include bg.bg-position-bottom
+
+.bg-position-left
+  @include bg.bg-position-left
+
+.bg-position-right
+  @include bg.bg-position-right
+
+// Background attachment utilities
+.bg-fixed
+  @include bg.bg-fixed
+
+.bg-local
+  @include bg.bg-local
+
+.bg-scroll
+  @include bg.bg-scroll
+
+// Glass morphism effect
+.bg-glass
+  @include bg.bg-glass
+
+.bg-glass-light
+  @include bg.bg-glass(8px, 0.15)
+
+.bg-glass-heavy
+  @include bg.bg-glass(20px, 0.05)
+
+// Background transitions
+.bg-transition
+  @include bg.bg-transition
+
+.bg-transition-fast
+  @include bg.bg-transition(0.15s)
+
+.bg-transition-slow
+  @include bg.bg-transition(0.5s)
+
+// Pattern backgrounds
+.bg-stripes-light
+  @include bg.bg-stripes(#f8f9fa, #ffffff)
+
+.bg-stripes-dark
+  @include bg.bg-stripes(#343a40, #495057)
+
+.bg-dots-light
+  @include bg.bg-dots(rgba(0, 0, 0, 0.1))
+
+.bg-dots-dark
+  @include bg.bg-dots(rgba(255, 255, 255, 0.1))
+
+.bg-checkerboard
+  @include bg.bg-checkerboard
+
+.bg-checkerboard-dark
+  @include bg.bg-checkerboard(#495057, #343a40)
+
+// Background clip utilities
+.bg-clip-text
+  @include bg.bg-clip-text
+
+.bg-clip-padding
+  @include bg.bg-clip-padding
+
+.bg-clip-border
+  @include bg.bg-clip-border
+
+// Responsive backgrounds
+@media (max-width: 768px)
+  .bg-white-mobile
+    @include bg.bg-white
+
+  .bg-gray-100-mobile
+    @include bg.bg-gray-100
+
+  .bg-transparent-mobile
+    @include bg.bg-transparent
+
+@media (min-width: 769px)
+  .bg-surface-desktop
+    @include bg.bg-surface
+
+  .bg-gray-50-desktop
+    @include bg.bg-gray-100
+
+// Hover states
+.bg-hover-primary
+  &:hover
+    @include bg.bg-primary
+
+.bg-hover-secondary
+  &:hover
+    @include bg.bg-secondary
+
+.bg-hover-success
+  &:hover
+    @include bg.bg-success
+
+.bg-hover-warning
+  &:hover
+    @include bg.bg-warning
+
+.bg-hover-error
+  &:hover
+    @include bg.bg-error
+
+.bg-hover-white
+  &:hover
+    @include bg.bg-white
+
+.bg-hover-gray-100
+  &:hover
+    @include bg.bg-gray-100
+
+.bg-hover-gray-200
+  &:hover
+    @include bg.bg-gray-200
+
+.bg-hover-transparent
+  &:hover
+    @include bg.bg-transparent
+
+// Focus states
+.bg-focus-primary
+  &:focus
+    @include bg.bg-primary
+
+.bg-focus-secondary
+  &:focus
+    @include bg.bg-secondary
+
+// Active states
+.bg-active-primary
+  &:active, &.active
+    @include bg.bg-primary
+
+.bg-active-secondary
+  &:active, &.active
+    @include bg.bg-secondary
+
+// Theme adaptive backgrounds
+.bg-adaptive-surface
+  @include bg.bg-theme-adaptive(#ffffff)
+
+.bg-adaptive-elevated
+  @include bg.bg-theme-adaptive(#f8f9fa)
+
+.bg-adaptive-overlay
+  @include bg.bg-theme-adaptive(rgba(255, 255, 255, 0.9))
+
+// Print safe backgrounds
+.bg-print-safe
+  @include bg.bg-print-safe
+
+// Gradient backgrounds
+.bg-gradient-primary
+  @include bg.bg-gradient-vertical(var(--brand-primary, #007bff), var(--brand-secondary, #6c757d))
+
+.bg-gradient-success
+  @include bg.bg-gradient-diagonal(var(--color-success, #28a745), #20c997)
+
+.bg-gradient-warning
+  @include bg.bg-gradient-horizontal(var(--color-warning, #ffc107), #fd7e14)
+
+.bg-gradient-info
+  @include bg.bg-gradient-radial(var(--color-info, #17a2b8), #007bff)
+
+// Combined effect classes
+.bg-interactive
+  @include bg.bg-surface
+  @include bg.bg-transition
+
+  &:hover
+    @include bg.bg-gray-100
+
+  &:active
+    @include bg.bg-gray-200

package/sass/utilities/_borders.sass

@@ -0,0 +1,138 @@
+// Border Utility Classes
+@use '../mixins/borders' as *
+@use '../variables/borders' as *
+
+// Generate border width utility classes for all border sizes
+@each $key, $value in $border-widths
+  // Border all sides
+  .border-#{$key}
+    @include border($key)
+  
+  // Directional borders
+  .border-t-#{$key}
+    @include border-top($key)
+  
+  .border-r-#{$key}
+    @include border-right($key)
+  
+  .border-b-#{$key}
+    @include border-bottom($key)
+  
+  .border-l-#{$key}
+    @include border-left($key)
+  
+  // Axis borders
+  .border-x-#{$key}
+    @include border-x($key)
+  
+  .border-y-#{$key}
+    @include border-y($key)
+
+// Size aliases for border widths (following spacing pattern)
+@each $key, $value in $border-widths
+  $size-name: null
+  @if $key == 0
+    $size-name: 'xs'
+  @else if $key == 1
+    $size-name: 'sm'
+  @else if $key == 2
+    $size-name: 'md'
+  @else if $key == 3
+    $size-name: 'lg'
+  @else if $key == 4
+    $size-name: 'xl'
+  @else if $key == 5
+    $size-name: 'xxl'
+
+  @if $size-name
+    // Border width aliases
+    .border-#{$size-name}
+      @include border($key)
+    
+    .border-t-#{$size-name}
+      @include border-top($key)
+    
+    .border-r-#{$size-name}
+      @include border-right($key)
+    
+    .border-b-#{$size-name}
+      @include border-bottom($key)
+    
+    .border-l-#{$size-name}
+      @include border-left($key)
+    
+    .border-x-#{$size-name}
+      @include border-x($key)
+    
+    .border-y-#{$size-name}
+      @include border-y($key)
+
+// Border style utility classes (excluding solid)
+@each $style in $border-styles
+  .border-#{$style}
+    border-style: $style
+
+// Border radius utility classes
+@each $key, $value in $border-radius-sizes
+  .rounded-#{$key}
+    @include border-radius($key)
+  
+  // Directional border radius
+  .rounded-t-#{$key}
+    @include border-radius-top($key)
+  
+  .rounded-b-#{$key}
+    @include border-radius-bottom($key)
+  
+  .rounded-l-#{$key}
+    @include border-radius-left($key)
+  
+  .rounded-r-#{$key}
+    @include border-radius-right($key)
+
+// Special border radius classes
+.rounded-circle
+  @include border-radius(circle)
+
+.rounded-pill
+  @include border-radius(pill)
+
+// Border radius size aliases
+@each $key, $value in $border-radius-sizes
+  @if $key != 'pill' and $key != 'circle'
+    $size-name: null
+    @if $key == 0
+      $size-name: 'xs'
+    @else if $key == 1
+      $size-name: 'sm'
+    @else if $key == 2
+      $size-name: 'md'
+    @else if $key == 3
+      $size-name: 'lg'
+    @else if $key == 4
+      $size-name: 'xl'
+    @else if $key == 5
+      $size-name: 'xxl'
+
+    @if $size-name
+      .rounded-#{$size-name}
+        @include border-radius($key)
+      
+      .rounded-t-#{$size-name}
+        @include border-radius-top($key)
+      
+      .rounded-b-#{$size-name}
+        @include border-radius-bottom($key)
+      
+      .rounded-l-#{$size-name}
+        @include border-radius-left($key)
+      
+      .rounded-r-#{$size-name}
+        @include border-radius-right($key)
+
+// Special utility classes
+.no-border
+  @include no-border
+
+.border-reset
+  @include border-reset

package/sass/utilities/_colors.sass

@@ -0,0 +1,166 @@
+// Color utility classes derived from mixins
+@use '../mixins/colors' as colors
+
+// Note: Basic text styling classes have been moved to utilities/_text.sass
+// The following are color-only utility classes
+
+// Status colors
+.text-success
+  @include colors.text-success
+
+.text-warning
+  @include colors.text-warning
+
+.text-error
+  @include colors.text-error
+
+.text-info
+  @include colors.text-info
+
+.text-danger
+  @include colors.text-danger
+
+// Brand colors
+.text-brand-primary
+  @include colors.text-brand-primary
+
+.text-brand-secondary
+  @include colors.text-brand-secondary
+
+// Link colors
+.text-link
+  @include colors.text-link
+
+.text-link-visited
+  @include colors.text-link-visited
+
+// Grayscale colors
+.text-black
+  @include colors.text-black
+
+.text-white
+  @include colors.text-white
+
+.text-gray-100
+  @include colors.text-gray-100
+
+.text-gray-200
+  @include colors.text-gray-200
+
+.text-gray-300
+  @include colors.text-gray-300
+
+.text-gray-400
+  @include colors.text-gray-400
+
+.text-gray-500
+  @include colors.text-gray-500
+
+.text-gray-600
+  @include colors.text-gray-600
+
+.text-gray-700
+  @include colors.text-gray-700
+
+.text-gray-800
+  @include colors.text-gray-800
+
+.text-gray-900
+  @include colors.text-gray-900
+
+// Theme-aware colors
+.text-on-light
+  @include colors.text-on-light
+
+.text-on-dark
+  @include colors.text-on-dark
+
+// Opacity variations
+.text-opacity-10
+  @include colors.text-opacity(0.1)
+
+.text-opacity-25
+  @include colors.text-opacity(0.25)
+
+.text-opacity-50
+  @include colors.text-opacity(0.5)
+
+.text-opacity-75
+  @include colors.text-opacity(0.75)
+
+.text-opacity-90
+  @include colors.text-opacity(0.9)
+
+.text-transparent
+  @include colors.text-transparent
+
+// Color transitions
+.text-transition
+  @include colors.color-transition
+
+.text-transition-fast
+  @include colors.color-transition(0.15s)
+
+.text-transition-slow
+  @include colors.color-transition(0.5s)
+
+// High contrast for accessibility
+.text-high-contrast
+  @include colors.text-high-contrast
+
+.text-high-contrast-inverse
+  @include colors.text-high-contrast-inverse
+
+// Print colors
+.text-print-only
+  @include colors.text-print-only
+
+// Note: Responsive text color classes moved to utilities/_text.sass
+// Keeping only non-conflicting color utilities
+
+// Responsive text colors (color-only)
+@media (max-width: 768px)
+  .text-white-mobile
+    @include colors.text-white
+
+// Note: Hover states for primary/secondary text moved to utilities/_text.sass
+
+.text-hover-success
+  &:hover
+    @include colors.text-success
+
+.text-hover-warning
+  &:hover
+    @include colors.text-warning
+
+.text-hover-error
+  &:hover
+    @include colors.text-error
+
+.text-hover-white
+  &:hover
+    @include colors.text-white
+
+.text-hover-black
+  &:hover
+    @include colors.text-black
+
+// Note: Interactive states for primary/secondary text moved to utilities/_text.sass
+
+// State combinations (color-only)
+.text-interactive
+  @include colors.text-link
+  @include colors.color-transition
+
+  &:focus
+    @include colors.text-info
+
+// Theme adaptive classes
+.text-adaptive-primary
+  @include colors.text-theme-adaptive(#333333)
+
+.text-adaptive-secondary
+  @include colors.text-theme-adaptive(#666666)
+
+.text-adaptive-muted
+  @include colors.text-theme-adaptive(#999999)