lumina-sass 2.1.4 → 2.3.0

package/README.md

@@ -104,6 +104,7 @@ A complete set of flexbox mixins and maps to help you build layouts quickly.
 To learn how to contribute or understand the release process, please see:
 
 - [**Development Guide**](docs/developer/development.md) - Project structure and setup rules.
+- [**Testing Guide**](docs/developer/testing.md) - How to write and run Sass unit tests.
 - [**Releasing & Publishing**](docs/developer/releasing.md) - Details on the release process.
 
 ---
@@ -182,7 +183,11 @@ lumina-sass/
 ---
 
 ## 6️⃣ Testing & Verification Workflow
-1. **Local import test**
+1. **Run Unit Tests**
+   ```bash
+   npm test
+   ```
+2. **Local import test**
    ```bash
    node -e "import 'lumina-sass/flexbox'"   # should succeed
    node -e "import 'lumina-sass/utils'"     # should fail
@@ -217,6 +222,7 @@ lumina-sass/
 | Activate LTS Node | `fnm use lts` |
 | Install dependencies | `npm install` |
 | Build the package | `npm run build` |
+| Run tests | `npm test` |
 | Serve demo (optional) | `npm run serve` |
 | Stage a file | `git add <path>` |
 | Signed commit (example) | `git commit -S -m "feat: description of change."` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lumina-sass",
-  "version": "2.1.4",
+  "version": "2.3.0",
   "description": "Lumina Sass design tokens, mixins and public sub-modules (flexbox, color, mix).",
   "main": "src/_index.sass",
   "sass": "src/_index.sass",
@@ -32,7 +32,8 @@
     "dev": "npm run build && npm run serve",
     "build:demo": "sass demo/style.sass demo/style.css",
     "build": "sass src/_index.sass test/index.css && sass src/color/_index.sass test/color.css && sass src/mix/_index.sass test/mix.css && sass src/flexbox/_index.sass test/flexbox.css && sass src/flexbox/_index.sass test/flexbox.css",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test:sass": "sass src/test/mixins.spec.sass src/test/mixins.spec.css",
+    "test": "npm run test:sass"
   },
   "files": [
     "src"
@@ -42,6 +43,7 @@
   "devDependencies": {
     "http-server": "^14.1.1",
     "sass": "^1.85.1",
+    "sass-true": "^10.1.0",
     "standard-version": "^9.5.0"
   }
 }

package/src/map/_fonts.sass

@@ -1,105 +1,30 @@
-@use 'sass:list'
+@use 'sass:map'
 
-// Font family collections used throughout the project.
-// The lists are deliberately extensive to cover most common web‑safe and Google‑font families.
-
-// Sans‑serif fonts – primary list referenced by `fonts.$sans-serif`.
 $sans-serif: (
-  'Roboto',
-  'Helvetica',
-  'Arial',
-  'Work Sans',
-  'Nunito',
-  'Open Sans',
-  'Lato',
-  'Montserrat',
-  'Source Sans Pro',
-  'Inter',
-  'Tahoma',
-  'Verdana',
-  'Gill Sans',
-  'Futura',
-  'Ubuntu',
-  'Noto Sans',
-  'Noto Sans KR',
-  'Noto Sans JP',
-  'Noto Sans SC',
-  'Noto Sans Arabic',
-  'Noto Sans Hebrew'
+  'Roboto': sans-serif, 'Helvetica': sans-serif, 'Arial': sans-serif,
+  'Work Sans': sans-serif, 'Nunito': sans-serif, 'Open Sans': sans-serif,
+  'Lato': sans-serif, 'Montserrat': sans-serif, 'Source Sans Pro': sans-serif,
+  'Inter': sans-serif, 'Tahoma': sans-serif, 'Verdana': sans-serif,
+  'Gill Sans': sans-serif, 'Futura': sans-serif, 'Ubuntu': sans-serif,
+  'Noto Sans': sans-serif, 'Noto Sans KR': sans-serif, 'Noto Sans JP': sans-serif,
+  'Noto Sans SC': sans-serif, 'Noto Sans Arabic': sans-serif, 'Noto Sans Hebrew': sans-serif
 )
 
-// Serif fonts – provided for completeness, may be used elsewhere.
 $serif: (
-  'Georgia',
-  'Times New Roman',
-  'Palatino',
-  'Libre Baskerville',
-  'Merriweather',
-  'PT Serif',
-  'Noto Serif',
-  'Noto Serif KR',
-  'Noto Serif JP',
-  'Noto Serif SC'
+  'Georgia': serif, 'Times New Roman': serif, 'Palatino': serif,
+  'Libre Baskerville': serif, 'Merriweather': serif, 'PT Serif': serif,
+  'Noto Serif': serif, 'Noto Serif KR': serif, 'Noto Serif JP': serif,
+  'Noto Serif SC': serif
 )
 
-// Monospace fonts – useful for code blocks and UI elements.
 $mono: (
-  'Courier New',
-  'Consolas',
-  'Ubuntu Mono',
-  'Source Code Pro',
-  'Fira Code',
-  'Inconsolata',
-  'Menlo',
-  'Monaco',
-  'Noto Mono'
+  'Courier New': monospace, 'Consolas': monospace, 'Ubuntu Mono': monospace,
+  'Source Code Pro': monospace, 'Fira Code': monospace, 'Inconsolata': monospace,
+  'Menlo': monospace, 'Monaco': monospace, 'Noto Mono': monospace
 )
 
-// Map each font name to its generic family. This is used by `font-family-of()`.
-$font-family: (
-  // Sans‑serif
-  'Roboto': sans-serif,
-  'Helvetica': sans-serif,
-  'Arial': sans-serif,
-  'Work Sans': sans-serif,
-  'Nunito': sans-serif,
-  'Open Sans': sans-serif,
-  'Lato': sans-serif,
-  'Montserrat': sans-serif,
-  'Source Sans Pro': sans-serif,
-  'Inter': sans-serif,
-  'Tahoma': sans-serif,
-  'Verdana': sans-serif,
-  'Gill Sans': sans-serif,
-  'Futura': sans-serif,
-  'Ubuntu': sans-serif,
-  'Noto Sans': sans-serif,
-  'Noto Sans KR': sans-serif,
-  'Noto Sans JP': sans-serif,
-  'Noto Sans SC': sans-serif,
-  'Noto Sans Arabic': sans-serif,
-  'Noto Sans Hebrew': sans-serif,
-
-  // Serif
-  'Georgia': serif,
-  'Times New Roman': serif,
-  'Palatino': serif,
-  'Libre Baskerville': serif,
-  'Merriweather': serif,
-  'PT Serif': serif,
-  'Noto Serif': serif,
-  'Noto Serif KR': serif,
-  'Noto Serif JP': serif,
-  'Noto Serif SC': serif,
-
-  // Monospace
-  'Courier New': monospace,
-  'Consolas': monospace,
-  'Ubuntu Mono': monospace,
-  'Source Code Pro': monospace,
-  'Fira Code': monospace,
-  'Inconsolata': monospace,
-  'Menlo': monospace,
-  'Monaco': monospace,
-  'Noto Mono': monospace
+$fonts: (
+  'mono': $mono,
+  'serif': $serif,
+  'sans-serif': $sans-serif
 )

package/src/map/_icons.sass

@@ -1,7 +1,7 @@
 @use '../color/_index' as color
 
 
-$academic: ('school': (icon: "\F62F"), 'diploma': (icon: "\F153"))
+$academic: ('school': (icon: "\F671"), 'diploma': (icon: "\F11D"))
 $utility-inputs: ('color': (icon: '\F4B0'), 'hidden': (icon: '\F0E7'))
 $boolean-controls: ('radio': (icon: '\F110'), 'checkbox': (icon: '\F272'))
 $video-controls: ('play-video': (icon: '\F4F4'), 'pause-video': (icon: '\F4C4'))

package/src/mix/_generators.sass

@@ -18,11 +18,11 @@
   @if $props
     .#{$name}
       &::before
-        content: map.get($props, icon)
-      @if $color
-        color: $color !important
+        @if $color
+          color: $color !important
 
-      font-family: $font-family
+        font-family: $font-family
+        content: map.get($props, icon)
   @else
     @warn "Icon #{$name} not found in icon mapping."
 
@@ -33,11 +33,12 @@
         @each $icon, $props in $maps
           .#{$icon}
             &::before
-              content: map.get($props, icon)
-            @if $color
-              color: $color !important
+              @if $color
+                color: $color !important
 
-            font-family: $font-family
+              font-family: $font-family
+              content: map.get($props, icon)
+              
     @else
       $names: $name
       @if meta.type-of($name) != 'list'

package/src/mix/_media.sass

@@ -26,9 +26,11 @@
 /* Semantic Media Query Helpers – delegate through the base mixin */
 @mixin prefers-color-scheme($mode)
   @include media-queries-base('(prefers-color-scheme: #{$mode})')
+    @content
 
 @mixin prefers-orientation($orientation)
   @include media-queries-base('orientation', $orientation)
+    @content
 
 // Device media query helper – generates a media query for a single device
 @mixin device-media($device, $orientation: portrait)
@@ -58,19 +60,19 @@
     // Portrait video – forced 9:16 ratio
     video.portrait-media
       max-inline-size: 20em !important
-      @include mix.aspect-ratio($width: 9, $length: 16)
+      @include aspect-ratio(9, 16)
 
     // Landscape video – default ratio
     video.landscape-media
       object-position: center 35%
-      @include mix.aspect-ratio()
+      @include aspect-ratio()
 
     // Image and picture handling
     picture,
     img
       inline-size: 100%
       object-fit: $object-fit
-      @include mix.aspect-ratio($width, $length)
+      @include aspect-ratio($width, $length)
       @if $position != null or $percentage != null
         object-position: $position $percentage
 
@@ -79,16 +81,13 @@
       img
         inline-size: 100%
         object-fit: $object-fit
-        @include mix.aspect-ratio($width, $length)
+        @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, $style)
+          @include typo.font($size: $size, $style: $style)
 
 @mixin aspect-ratio($width: 16, $length: 9)
-    aspect-ratio: calc($width / $length)/ $length
-
-    @include aspect-ratio(9, 16)
-    aspect-ratio: calc($width / $length)/ $length
+  aspect-ratio: #{$width} / #{$length}

package/src/mix/_typography.sass

@@ -38,8 +38,23 @@
   @if $style != null
     font-style: $style
 
+@mixin font-sans($font, $size: 1rem, $weight: normal, $style: normal)
+  @include font($font, $size, sans-serif, $style, $weight)
+
+@mixin font-serif($font, $size: 1rem, $weight: normal, $style: normal)
+  @include font($font, $size, serif, $style, $weight)
+
+@mixin font-mono($font, $size: 1rem, $weight: normal, $style: normal)
+  @include font($font, $size, monospace, $style, $weight)
+
 // Helper: return the generic family for a given font name using the fonts map.
 @function font-family-of($font)
-  @if map.has-key(fonts.$font-family, $font)
-    @return map.get(fonts.$font-family, $font)
+  @if map.has-key(fonts.$fonts, $font)
+    @if $font == 'mono'
+      @return monospace
+    @return $font
+
+  @each $category, $map in fonts.$fonts
+    @if map.has-key($map, $font)
+      @return map.get($map, $font)
   @return null

package/src/test/mixins.spec.sass

@@ -0,0 +1,185 @@
+@use 'sass:meta'
+@use '../../node_modules/sass-true' as true
+@use '../mix/_generators' as generators
+@use '../mix/_media' as media
+@use '../mix/_typography' as typo
+
+@include true.test-module('Icon Generator')
+  @include true.test('Generates school icon class')
+    @include true.assert
+      @include true.output
+        @include generators.icon-generator('school')
+      
+      @include true.expect
+        .school
+          &::before
+            color: rgb(64, 64, 64) !important
+            font-family: 'bootstrap-icons'
+            content: "\F671"
+
+@include true.test-module('Flexbox Generator')
+  @include true.test('Generates flex-row properties')
+    @include true.assert
+      @include true.output
+        @include generators.flexbox-generator('flex-row')
+      
+      @include true.expect
+        display: flex
+        flex-wrap: nowrap
+        flex-direction: row
+
+@include true.test-module('Input Generator')
+  @include true.test('Generates text input type')
+    @include true.assert
+      @include true.output
+        @include generators.input-generator('text')
+      
+      @include true.expect
+        input[type="text"]
+          border: rgb(204, 204, 204) solid 1px
+          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)
+          focus-outline: rgb(0, 120, 215)
+          cursor: text
+        
+        input[type="text"]::focus
+          outline: rgb(0, 120, 215)
+        
+        &::-webkit-slider-runnable-track
+          height: 0.4rem
+          background: #ddd
+          border-radius: 0.2rem
+        
+        &::-webkit-slider-thumb
+          -webkit-appearance: none
+          width: 1rem
+          height: 1rem
+          background: #0078d7
+          border-radius: 50%
+          margin-top: -0.3rem
+
+@include true.test-module('Media Queries')
+  @include true.test('Generates max-width media query for breakpoint md')
+    @include true.assert
+      @include true.output
+        @include media.media-queries('md')
+          color: blue
+      
+      @include true.expect
+        @media (max-width: 64rem)
+          color: blue
+
+  @include true.test('Generates prefers-color-scheme')
+    @include true.assert
+      @include true.output
+        @include media.prefers-color-scheme(dark)
+          background: black
+      
+      @include true.expect
+        @media (prefers-color-scheme: dark)
+          background: black
+
+  @include true.test('Generates device-media for iphone')
+    @include true.assert
+      @include true.output
+        @include media.device-media('iphone')
+          color: white
+      
+      @include true.expect
+        @media only screen and (min-width: 20rem) and (max-width: 20.125rem) and (min-height: 30rem) and (max-height: 30.125rem) and (orientation: portrait)
+          color: white
+
+@include true.test-module('Typography')
+  @include true.test('Generates font styles')
+    @include true.assert
+      @include true.output
+        @include typo.font($size: 2rem, $weight: bold)
+      
+      @include true.expect
+        font-size: 2rem
+        font-weight: bold
+        font-style: normal
+
+  @include true.test('Generates font-sans styles')
+    @include true.assert
+      @include true.output
+        @include typo.font-sans('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.assert
+      @include true.output
+        @include typo.font-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.assert
+      @include true.output
+        @include typo.font-mono('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)
+
+  @include true.test('Detects generic category names')
+    @include true.assert-equal(typo.font-family-of('mono'), monospace)
+    @include true.assert-equal(typo.font-family-of('serif'), serif)
+
+@include true.test-module('Layout Helpers')
+  @include true.test('Generates aspect-ratio')
+    @include true.assert
+      @include true.output
+        @include media.aspect-ratio(16, 9)
+      
+      @include true.expect
+        aspect-ratio: 16 / 9
+
+  @include true.test('Generates figure structure')
+    @include true.assert
+      @include true.output
+        @include media.figure()
+      
+      @include true.expect
+        figure video.portrait-media
+          max-inline-size: 20em !important
+          aspect-ratio: 9 / 16
+        
+        figure video.landscape-media
+          object-position: center 35%
+          aspect-ratio: 16 / 9
+        
+        figure picture, figure img
+          inline-size: 100%
+          object-fit: cover
+          aspect-ratio: 16 / 9
+        
+        figure picture img
+          inline-size: 100%
+          object-fit: cover
+          aspect-ratio: 16 / 9
+        
+        figure picture figcaption
+          font-weight: normal
+          font-style: italic
+
+@include true.report