lumina-sass 2.4.1 → 2.5.0

package/package.json

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

package/src/mix/_buttons.sass

@@ -0,0 +1,36 @@
+@use 'sass:color'
+@use 'misc-styling' as *
+@use 'typography' as typo
+@use '../color/palette/groovy-70s' as *
+
+@mixin base-btn($bg-color: $groovy-70s-cream, $text-color: $groovy-70s-warm-white, $border-color: null, $size: 1em, $weight: bold)
+
+    @if $border-color == null
+        border: none
+    @else
+        border: 1px solid $border-color
+
+    margin: 0.5em
+    cursor: pointer
+    position: relative
+    padding: 0.5em 1.5em
+    border-radius: 0.5em
+    display: inline-block
+    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s
+    
+    @include background-color($bg-color, $text-color)
+    @include typo.font($size: $size, $weight: $weight)
+    
+
+    &:hover
+        transform: scale(1.05)
+        background-color: color.adjust($bg-color, $lightness: -5%)
+
+    &:active
+        transform: scale(0.95)
+        background-color: color.adjust($bg-color, $lightness: -10%)
+
+    &:disabled
+        opacity: 0.3
+        cursor: not-allowed
+        pointer-events: none

package/src/mix/_elements.sass

@@ -0,0 +1,34 @@
+@use 'typography' as typo
+@use '../color/alerts' as *
+
+@mixin link-color($color, $color-hover, $color-active, $color-visited)
+
+    a
+        [aria-disabled="true"]
+            color: $disabled
+            cursor: not-allowed
+            pointer-events: none
+            text-decoration: none
+
+        &:active
+            color: $color-active
+        
+        &.external-link
+            text-decoration: underline
+
+        @media (hover: hover)
+
+            &:hover
+                color: $color-hover
+                border-radius: 0.5em
+
+        &:visited
+            color: $color-visited
+        
+
+        h1, h2, h3, h4, h5, h6
+            color: $color !important
+
+        color: $color
+        cursor: pointer
+        @include typo.text-adjustments()

package/src/mix/_index.sass

@@ -1,3 +1,6 @@
 @forward 'media'
 @forward 'typography'
-@forward 'generators'
+@forward 'generators'
+@forward 'buttons'
+@forward 'elements'
+@forward 'misc-styling'

package/src/mix/_media.sass

@@ -54,46 +54,3 @@
       @content
   @else
     @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)
-  &
-    video.portrait-media
-      @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%
-
-    // Image and picture handling
-    picture,
-    img
-      inline-size: 100%
-      object-fit: $object-fit
-      
-      @if $width != null and $length != null
-        @include aspect-ratio($width, $length)
-
-      @if $position != null or $percentage != null
-        object-position: $position $percentage
-
-    picture
-      img
-        inline-size: 100%
-        object-fit: $object-fit
-
-        @if $width != null and $length != null
-          @include aspect-ratio($width, $length)
-
-        @if $position != null or $percentage != null
-          object-position: $position $percentage
-
-      figcaption
-          @include typo.font($size: $size, $style: $style)
-
-@mixin aspect-ratio($width: 16, $length: 9)
-  aspect-ratio: #{$width} / #{$length}

package/src/mix/_misc-styling.sass

@@ -0,0 +1,3 @@
+@mixin background-color($bg-color, $text-color)
+    color: rgba($text-color, 1)
+    background-color: rgba($bg-color, 1)

package/src/mix/_typography.sass

@@ -60,4 +60,15 @@
   @each $category, $map in fonts.$fonts
     @if map.has-key($map, $font)
       @return map.get($map, $font)
-  @return null
+  @return null
+
+@mixin text-adjustments($alignment: null, $decoration: null)
+  @if $alignment != null
+    text-align: $alignment
+
+  @if $decoration != null
+    text-decoration: $decoration
+
+  @if $alignment == null and $decoration == null
+    text-decoration: none
+    @warn "No parameters provided for text-adjustments mixin. Default value present."

package/src/test/mixins.spec.sass

@@ -1,8 +1,11 @@
 @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
+@use '../mix/_buttons' as buttons
+@use '../mix/_elements' as elements
+@use '../mix/_generators' as generators
+@use '../mix/_misc-styling' as misc-styling
+@use '../../node_modules/sass-true' as true
 
 @include true.test-module('Icon Generator')
   @include true.test('Generates school icon class')
@@ -139,41 +142,95 @@
     @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.test-module('Styling (Native)')
+  @include true.test('Applies typography font styling to figcaption')
     @include true.assert
       @include true.output
-        @include media.aspect-ratio(16, 9)
+        figure figcaption
+          @include typo.font($style: italic)
       
       @include true.expect
-        aspect-ratio: 16 / 9
+        figure figcaption
+          font-style: italic
 
-  @include true.test('Generates figure structure')
+@include true.test-module('Tags and Elements')
+  @include true.test('Applies background and text color')
     @include true.assert
       @include true.output
-        figure
-          @include media.figure()
+        .custom-bg
+          @include misc-styling.background-color(rgb(255, 0, 0), rgb(255, 255, 255))
       
       @include true.expect
-        figure video.portrait-media
-          aspect-ratio: 16 / 9
-          max-inline-size: 20rem !important
-        
-        figure video.landscape-media
-          aspect-ratio: 16 / 9
-          object-position: center 35%
-        
-        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-style: italic
+        .custom-bg
+          color: rgba(255, 255, 255, 1)
+          background-color: rgba(255, 0, 0, 1)
+
+  @include true.test('Applies base button styling')
+    @include true.assert
+      @include true.output
+        button
+          @include buttons.base-btn()
+      
+      @include true.expect
+        button
+          border: none
+          margin: 0.5em
+          cursor: pointer
+          position: relative
+          padding: 0.5em 1.5em
+          border-radius: 0.5em
+          display: inline-block
+          transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s
+          color: rgb(255, 248, 241)
+          background-color: rgb(252, 245, 235)
+          font-size: 1em
+          font-weight: bold
+          font-style: normal
+
+          &:hover
+            transform: scale(1.05)
+            background-color: rgb(248.6739130435, 233.9130434783, 212.8260869565)
+
+          &:active
+            transform: scale(0.95)
+            background-color: rgb(245.347826087, 222.8260869565, 190.652173913)
+
+          &:disabled
+            opacity: 0.3
+            cursor: not-allowed
+
+  @include true.test('Applies link colors and properties')
+    @include true.assert
+      @include true.output
+        @include elements.link-color(rgb(0, 0, 255), rgb(0, 0, 200), rgb(0, 0, 150), rgb(128, 0, 128))
+      
+      @include true.expect
+        a
+          color: rgb(0, 0, 255)
+          cursor: pointer
+          text-decoration: none
+
+          [aria-disabled="true"]
+            color: rgb(160, 160, 160)
+            cursor: not-allowed
+            pointer-events: none
+            text-decoration: none
+
+          &:active
+            color: rgb(0, 0, 150)
+
+          &.external-link
+            text-decoration: underline
+
+          @media (hover: hover)
+            &:hover
+              color: rgb(0, 0, 200)
+              border-radius: 0.5em
+
+          &:visited
+            color: rgb(128, 0, 128)
+
+          h1, h2, h3, h4, h5, h6
+            color: rgb(0, 0, 255) !important
 
 @include true.report