lumina-sass 2.3.0 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lumina-sass",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Lumina Sass design tokens, mixins and public sub-modules (flexbox, color, mix).",
   "main": "src/_index.sass",
   "sass": "src/_index.sass",

package/src/map/_inputs.sass

@@ -14,14 +14,14 @@ $inputs: (
 )
 
 $default-input-props: (
-  border: rgb(204, 204, 204) solid 1px,
+  border: rgb(204, 204, 204) solid 0.0625rem,
   padding: 0.5rem 1rem,
   "border-radius": 0.5rem,
   "background-color": rgb(255, 255, 255),
   "font-size": 1rem,
   "line-height": 1.5,
   "box-sizing": border-box,
-  outline: 1px solid rgb(0, 120, 215),
+  outline: 0.0625rem solid rgb(0, 120, 215),
   "focus-outline": rgb(0, 120, 215),
   cursor: text
 )

package/src/mix/_media.sass

@@ -56,36 +56,42 @@
     @error "Invalid orientation `#{$orientation}` – use portrait or landscape."
 
 @mixin figure($object-fit: cover, $size: null, $style: italic, $width: 16, $length: 9, $position: null, $percentage: null)
-  figure
-    // Portrait video – forced 9:16 ratio
+  &
     video.portrait-media
-      max-inline-size: 20em !important
-      @include aspect-ratio(9, 16)
+      @if $width != null and $length != null
+        @include aspect-ratio($width, $length)
+
+      max-inline-size: 20rem !important
 
     // Landscape video – default ratio
     video.landscape-media
+      @if $width != null and $length != null
+        @include aspect-ratio($width, $length)
       object-position: center 35%
-      @include aspect-ratio()
 
     // Image and picture handling
     picture,
     img
       inline-size: 100%
       object-fit: $object-fit
-      @include aspect-ratio($width, $length)
+      
+      @if $width != null and $length != null
+        @include aspect-ratio($width, $length)
+
       @if $position != null or $percentage != null
         object-position: $position $percentage
 
-    // Nested <picture><img> – duplicate settings for readability
     picture
       img
         inline-size: 100%
         object-fit: $object-fit
-        @include aspect-ratio($width, $length)
+
+        @if $width != null and $length != null
+          @include aspect-ratio($width, $length)
+
         @if $position != null or $percentage != null
           object-position: $position $percentage
 
-      // Figcaption styling if size provided
       figcaption
           @include typo.font($size: $size, $style: $style)
 

package/src/mix/_typography.sass

@@ -13,21 +13,21 @@
 
 @mixin font-style($font, $family: null, $line-height: null, $variant: null)
   $detected-family: font-family-of($font)
+
   @if $detected-family != null
     $family: $detected-family
+
   @if $line-height != null
     line-height: $line-height
+
   @if $variant != null
     font-variant: $variant
-  // Always include a fallback family.
+
   font-family: $font, $family
 
-@mixin font( $font: null, $size: 1rem, $family: null, $style: normal, $weight: normal)
+@mixin font( $font:null, $size: 1rem, $family: null, $style: null, $weight: null, $line-height: null, $variant: null)
   @if $font != null
-    @include font-style($font, $family)
-
-  @else if $family != null
-    font-family: $family
+    @include font-style($font, $family, $line-height, $variant)
 
   @if $size != null
     font-size: $size
@@ -37,14 +37,17 @@
 
   @if $style != null
     font-style: $style
+  
+  @if $variant != null
+    font-variant: $variant
 
-@mixin font-sans($font, $size: 1rem, $weight: normal, $style: normal)
+@mixin sans-serif($font, $size: 1rem, $weight: null, $style: null)
   @include font($font, $size, sans-serif, $style, $weight)
 
-@mixin font-serif($font, $size: 1rem, $weight: normal, $style: normal)
+@mixin serif($font, $size: 1rem, $weight: null, $style: null)
   @include font($font, $size, serif, $style, $weight)
 
-@mixin font-mono($font, $size: 1rem, $weight: normal, $style: normal)
+@mixin monospace($font, $size: 1rem, $weight: null, $style: null)
   @include font($font, $size, monospace, $style, $weight)
 
 // Helper: return the generic family for a given font name using the fonts map.

package/src/test/mixins.spec.sass

@@ -36,14 +36,14 @@
       
       @include true.expect
         input[type="text"]
-          border: rgb(204, 204, 204) solid 1px
+          border: rgb(204, 204, 204) solid 0.0625rem
           padding: 0.5rem 1rem
           border-radius: 0.5rem
           background-color: rgb(255, 255, 255)
           font-size: 1rem
           line-height: 1.5
           box-sizing: border-box
-          outline: 1px solid rgb(0, 120, 215)
+          outline: 0.0625rem solid rgb(0, 120, 215)
           focus-outline: rgb(0, 120, 215)
           cursor: text
         
@@ -103,40 +103,34 @@
       @include true.expect
         font-size: 2rem
         font-weight: bold
-        font-style: normal
 
-  @include true.test('Generates font-sans styles')
+  @include true.test('Generates sans-serif styles')
     @include true.assert
       @include true.output
-        @include typo.font-sans('Roboto', $size: 1.5rem)
+        @include typo.sans-serif('Roboto', $size: 1.5rem)
       
       @include true.expect
         font-family: "Roboto", sans-serif
         font-size: 1.5rem
-        font-weight: normal
-        font-style: normal
 
-  @include true.test('Generates font-serif styles')
+  @include true.test('Generates serif styles')
     @include true.assert
       @include true.output
-        @include typo.font-serif('Georgia', $size: 1.2rem)
+        @include typo.serif('Georgia', $size: 1.2rem)
       
       @include true.expect
         font-family: "Georgia", serif
         font-size: 1.2rem
-        font-weight: normal
-        font-style: normal
 
-  @include true.test('Generates font-mono styles')
+  @include true.test('Generates monospace styles')
     @include true.assert
       @include true.output
-        @include typo.font-mono('Fira Code', $weight: 500)
+        @include typo.monospace('Fira Code', $weight: 500)
       
       @include true.expect
         font-family: "Fira Code", monospace
         font-size: 1rem
         font-weight: 500
-        font-style: normal
 
   @include true.test('Returns correct font-family for known font')
     @include true.assert-equal(typo.font-family-of('Open Sans'), sans-serif)
@@ -157,16 +151,17 @@
   @include true.test('Generates figure structure')
     @include true.assert
       @include true.output
-        @include media.figure()
+        figure
+          @include media.figure()
       
       @include true.expect
         figure video.portrait-media
-          max-inline-size: 20em !important
-          aspect-ratio: 9 / 16
+          aspect-ratio: 16 / 9
+          max-inline-size: 20rem !important
         
         figure video.landscape-media
-          object-position: center 35%
           aspect-ratio: 16 / 9
+          object-position: center 35%
         
         figure picture, figure img
           inline-size: 100%
@@ -179,7 +174,6 @@
           aspect-ratio: 16 / 9
         
         figure picture figcaption
-          font-weight: normal
           font-style: italic
 
 @include true.report