lumina-sass 2.5.0 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lumina-sass",
-  "version": "2.5.0",
+  "version": "2.6.3",
   "description": "Lumina Sass design tokens, mixins and public sub-modules (flexbox, color, mix).",
   "main": "src/_index.sass",
   "sass": "src/_index.sass",
@@ -32,7 +32,7 @@
     "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:sass": "sass src/test/mixins.spec.sass src/test/mixins.spec.css",
+    "test:sass": "sass src/test/index.spec.sass src/test/index.spec.css",
     "test": "npm run test:sass"
   },
   "files": [

package/src/flexbox/_flexbox-row.sass

@@ -6,6 +6,9 @@
     align-items: center
     @include mix.flexbox-generator('flex-row')
 
+.flex-items-center
+    align-items: center
+    @include mix.flexbox-generator('flex')
 .flex-inline-flex-row
     @include mix.flexbox-generator('inline-flex-row')
 

package/src/map/_fonts.sass

@@ -7,7 +7,8 @@ $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
+  'Noto Sans SC': sans-serif, 'Noto Sans Arabic': sans-serif, 'Noto Sans Hebrew': sans-serif,
+  'Bootstrap': sans-serif, 'bootstrap-icons': sans-serif
 )
 
 $serif: (

package/src/mix/_generators.sass

@@ -94,15 +94,15 @@
 
   // Range track styling
   &::-webkit-slider-runnable-track
-    height: 0.4rem
+    block-size: 0.4rem
     background: #ddd
     border-radius: 0.2rem
 
   // Range thumb styling
   &::-webkit-slider-thumb
     -webkit-appearance: none
-    width: 1rem
-    height: 1rem
+    inline-size: 1rem
+    block-size: 1rem
     background: #0078d7
     border-radius: 50%
     margin-top: -0.3rem

package/src/mix/_media.sass

@@ -11,7 +11,7 @@
       @content
   @else if map.has-key(bp.$breakpoints, $breakpoint)
     $breakpoint-value: map.get(bp.$breakpoints, $breakpoint)
-    @media (max-width: $breakpoint-value)
+    @media (max-inline-size: $breakpoint-value)
       @content
   @else
     @media #{$breakpoint}
@@ -45,12 +45,12 @@
   @if $orientation == portrait
     $max-width: $width + 0.125rem
     $max-height: $height + 0.125rem
-    @media only screen and (min-width: $width) and (max-width: $max-width) and (min-height: $height) and (max-height: $max-height) and (orientation: portrait)
+    @media only screen and (min-inline-size: $width) and (max-inline-size: $max-width) and (min-block-size: $height) and (max-block-size: $max-height) and (orientation: portrait)
       @content
   @else if $orientation == landscape
     $max-height: $height + 0.125rem
     $max-width: $width + 0.125rem
-    @media only screen and (min-width: $height) and (max-width: $max-height) and (min-height: $width) and (max-height: $max-width) and (orientation: landscape)
+    @media only screen and (min-inline-size: $height) and (max-inline-size: $max-height) and (min-block-size: $width) and (max-block-size: $max-width) and (orientation: landscape)
       @content
   @else
     @error "Invalid orientation `#{$orientation}` – use portrait or landscape."

package/src/mix/_typography.sass

@@ -1,6 +1,8 @@
 
 @use 'sass:map'
 @use 'sass:list'
+@use 'sass:meta'
+@use 'sass:string'
 @use '../map/fonts' as fonts
 
 @mixin text-wrap-safe($inline: 0)
@@ -11,23 +13,26 @@
     overflow-wrap: anywhere
     min-inline-size: $inline
 
-@mixin font-style($font, $family: null, $line-height: null, $variant: null)
+@mixin font( $font:null, $size: 1rem, $family: null, $style: null, $weight: null, $line-height: null, $variant: null)
   $detected-family: font-family-of($font)
 
-  @if $detected-family != null
+  @if is-known-font($font)
     $family: $detected-family
+  
+  @else if $family == null
+    $family: $detected-family
+    @if $font != null
+      @warn "Font '#{$font}' not found in configuration map. Defaulting to stack: '#{$font}', #{$family}."
 
-  @if $line-height != null
-    line-height: $line-height
-
-  @if $variant != null
-    font-variant: $variant
-
-  font-family: $font, $family
+  @if meta.type-of($font) == 'list'
+    $last: list.nth($font, list.length($font))
+    @if $last == $family
+      $family: null
 
-@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, $line-height, $variant)
+    font-family: $font, $family
+  @else
+    font-family: $family
 
   @if $size != null
     font-size: $size
@@ -38,20 +43,52 @@
   @if $style != null
     font-style: $style
   
+  @if $line-height != null
+    line-height: $line-height
+
   @if $variant != null
     font-variant: $variant
 
-@mixin sans-serif($font, $size: 1rem, $weight: null, $style: null)
+@function get-default-stack($category)
+  @if not map.has-key(fonts.$fonts, $category)
+    @return null
+  $map: map.get(fonts.$fonts, $category)
+  $keys: map.keys($map)
+  $generic: $category
+  @if $category == 'mono'
+    $generic: monospace
+  @return list.append($keys, $generic)
+
+@mixin sans-serif($font: null, $size: 1rem, $weight: null, $style: null)
+  @if $font == null
+    $font: get-default-stack('sans-serif')
   @include font($font, $size, sans-serif, $style, $weight)
 
-@mixin serif($font, $size: 1rem, $weight: null, $style: null)
+@mixin serif($font: null, $size: 1rem, $weight: null, $style: null)
+  @if $font == null
+    $font: get-default-stack('serif')
   @include font($font, $size, serif, $style, $weight)
 
-@mixin monospace($font, $size: 1rem, $weight: null, $style: null)
+@mixin monospace($font: null, $size: 1rem, $weight: null, $style: null)
+  @if $font == null
+    $font: get-default-stack('mono')
   @include font($font, $size, monospace, $style, $weight)
 
+@function is-known-font($font)
+  @if $font == null
+    @return false
+  @if map.has-key(fonts.$fonts, $font)
+    @return true
+  @each $category, $map in fonts.$fonts
+    @if map.has-key($map, $font)
+      @return true
+  @return false
+
 // Helper: return the generic family for a given font name using the fonts map.
 @function font-family-of($font)
+  @if $font == null
+    @return ('Nunito', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif)
+
   @if map.has-key(fonts.$fonts, $font)
     @if $font == 'mono'
       @return monospace
@@ -60,7 +97,9 @@
   @each $category, $map in fonts.$fonts
     @if map.has-key($map, $font)
       @return map.get($map, $font)
-  @return null
+
+  // Default fallback stack when font is not found
+  @return ('Nunito', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif)
 
 @mixin text-adjustments($alignment: null, $decoration: null)
   @if $alignment != null

package/src/mix/test/_buttons.spec.sass

@@ -0,0 +1,40 @@
+@use 'sass:meta'
+@use '../_buttons' as buttons
+@use '../../../node_modules/sass-true' as true
+
+@include true.test-module('Buttons')
+  @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
+          font-size: 1em
+          cursor: pointer
+          font-weight: bold
+          font-style: normal
+          position: relative
+          padding: 0.5em 1.5em
+          border-radius: 0.5em
+          display: inline-block
+          color: rgb(255, 248, 241)
+          background-color: rgb(252, 245, 235)
+          transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s
+
+          &: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
+

package/src/mix/test/_elements.spec.sass

@@ -0,0 +1,38 @@
+@use 'sass:meta'
+@use '../_elements' as elements
+@use '../../../node_modules/sass-true' as true
+
+@include true.test-module('Elements')
+  @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

package/src/mix/test/_generators.spec.sass

@@ -0,0 +1,63 @@
+@use 'sass:meta'
+@use '../_generators' as generators
+@use '../../../node_modules/sass-true' as true
+
+@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"]
+          cursor: text
+          font-size: 1rem
+          line-height: 1.5
+          padding: 0.5rem 1rem
+          border-radius: 0.5rem
+          box-sizing: border-box
+          focus-outline: rgb(0, 120, 215)
+          background-color: rgb(255, 255, 255)
+          border: rgb(204, 204, 204) solid 0.0625rem
+          outline: 0.0625rem solid rgb(0, 120, 215)
+        
+        input[type="text"]::focus
+          outline: rgb(0, 120, 215)
+        
+        &::-webkit-slider-runnable-track
+          block-size: 0.4rem
+          background: #ddd
+          border-radius: 0.2rem
+        
+        &::-webkit-slider-thumb
+          -webkit-appearance: none
+          inline-size: 1rem
+          block-size: 1rem
+          background: #0078d7
+          border-radius: 50%
+          margin-top: -0.3rem
+

package/src/mix/test/_media.spec.sass

@@ -0,0 +1,35 @@
+@use 'sass:meta'
+@use '../_media' as media
+@use '../../../node_modules/sass-true' as true
+
+@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-inline-size: 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-inline-size: 20rem) and (max-inline-size: 20.125rem) and (min-block-size: 30rem) and (max-block-size: 30.125rem) and (orientation: portrait)
+          color: white
+

package/src/mix/test/_misc-styling.spec.sass

@@ -0,0 +1,16 @@
+@use 'sass:meta'
+@use '../_misc-styling' as misc-styling
+@use '../../../node_modules/sass-true' as true
+
+@include true.test-module('Misc Styling')
+  @include true.test('Applies background and text color')
+    @include true.assert
+      @include true.output
+        .custom-bg
+          @include misc-styling.background-color(rgb(255, 0, 0), rgb(255, 255, 255))
+      
+      @include true.expect
+        .custom-bg
+          color: rgba(255, 255, 255, 1)
+          background-color: rgba(255, 0, 0, 1)
+

package/src/mix/test/_typography.spec.sass

@@ -0,0 +1,123 @@
+@use 'sass:meta'
+@use '../_typography' as typo
+@use '../../../node_modules/sass-true' as true
+
+@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
+
+  @include true.test('Generates sans-serif styles')
+    @include true.assert
+      @include true.output
+        @include typo.sans-serif('Roboto', $size: 1.5rem)
+      
+      @include true.expect
+        font-family: "Roboto", sans-serif
+        font-size: 1.5rem
+
+  @include true.test('Generates serif styles')
+    @include true.assert
+      @include true.output
+        @include typo.serif('Georgia', $size: 1.2rem)
+      
+      @include true.expect
+        font-family: "Georgia", serif
+        font-size: 1.2rem
+
+  @include true.test('Generates monospace styles')
+    @include true.assert
+      @include true.output
+        @include typo.monospace('Fira Code', $weight: 500)
+      
+      @include true.expect
+        font-family: "Fira Code", monospace
+        font-size: 1rem
+        font-weight: 500
+
+  @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('Provides fallbacks for unknown fonts in font-family-of')
+    @include true.assert-equal(typo.font-family-of('MyCustomFont'), ('Nunito', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif))
+
+  @include true.test('Generates fallback for unknown font')
+    @include true.assert
+      @include true.output
+        @include typo.font('MyCustomFont')
+      
+      @include true.expect
+        font-family: "MyCustomFont", "Nunito", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
+
+  @include true.test('Generates fallback for unknown font')
+    @include true.assert
+      @include true.output
+        @include typo.font()
+      
+      @include true.expect
+        font-family: "Nunito", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
+
+  @include true.test('Does not overwrite explicit fallback override for unknown font')
+    @include true.assert
+      @include true.output
+        @include typo.font('MyCustomFont', $family: serif)
+      
+      @include true.expect
+        font-family: "MyCustomFont", serif
+
+  @include true.test('Generates default fallback stack when no font is provided')
+    @include true.assert
+      @include true.output
+        @include typo.font()
+      
+      @include true.expect
+        font-family: "Nunito", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
+        font-size: 1rem
+
+  @include true.test('Generates default system sans-serif stack when no font is provided')
+    @include true.assert
+      @include true.output
+        @include typo.sans-serif()
+      
+      @include true.expect
+        font-family: "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", "Bootstrap", "bootstrap-icons", sans-serif
+        font-size: 1rem
+
+  @include true.test('Generates default system serif stack when no font is provided')
+    @include true.assert
+      @include true.output
+        @include typo.serif()
+      
+      @include true.expect
+        font-family: "Georgia", "Times New Roman", "Palatino", "Libre Baskerville", "Merriweather", "PT Serif", "Noto Serif", "Noto Serif KR", "Noto Serif JP", "Noto Serif SC", serif
+        font-size: 1rem
+
+  @include true.test('Generates default system monospace stack when no font is provided')
+    @include true.assert
+      @include true.output
+        @include typo.monospace()
+      
+      @include true.expect
+        font-family: "Courier New", "Consolas", "Ubuntu Mono", "Source Code Pro", "Fira Code", "Inconsolata", "Menlo", "Monaco", "Noto Mono", monospace
+        font-size: 1rem
+
+@include true.test-module('Styling (Native)')
+  @include true.test('Applies typography font styling to figcaption')
+    @include true.assert
+      @include true.output
+        figure figcaption
+          @include typo.font($style: italic)
+      
+      @include true.expect
+        figure figcaption
+          font-style: italic
+

package/src/test/index.spec.sass

@@ -0,0 +1,11 @@
+@use '../../node_modules/sass-true' as true
+
+// Import all colocated Sass tests here
+@use '../mix/test/media.spec'
+@use '../mix/test/buttons.spec'
+@use '../mix/test/elements.spec'
+@use '../mix/test/generators.spec'
+@use '../mix/test/typography.spec'
+@use '../mix/test/misc-styling.spec'
+
+@include true.report

package/src/test/mixins.spec.sass

@@ -1,236 +0,0 @@
-@use 'sass:meta'
-@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')
-    @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 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: 0.0625rem 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
-
-  @include true.test('Generates sans-serif styles')
-    @include true.assert
-      @include true.output
-        @include typo.sans-serif('Roboto', $size: 1.5rem)
-      
-      @include true.expect
-        font-family: "Roboto", sans-serif
-        font-size: 1.5rem
-
-  @include true.test('Generates serif styles')
-    @include true.assert
-      @include true.output
-        @include typo.serif('Georgia', $size: 1.2rem)
-      
-      @include true.expect
-        font-family: "Georgia", serif
-        font-size: 1.2rem
-
-  @include true.test('Generates monospace styles')
-    @include true.assert
-      @include true.output
-        @include typo.monospace('Fira Code', $weight: 500)
-      
-      @include true.expect
-        font-family: "Fira Code", monospace
-        font-size: 1rem
-        font-weight: 500
-
-  @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('Styling (Native)')
-  @include true.test('Applies typography font styling to figcaption')
-    @include true.assert
-      @include true.output
-        figure figcaption
-          @include typo.font($style: italic)
-      
-      @include true.expect
-        figure figcaption
-          font-style: italic
-
-@include true.test-module('Tags and Elements')
-  @include true.test('Applies background and text color')
-    @include true.assert
-      @include true.output
-        .custom-bg
-          @include misc-styling.background-color(rgb(255, 0, 0), rgb(255, 255, 255))
-      
-      @include true.expect
-        .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