lumina-sass 2.1.1 → 2.1.3

package/package.json

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

package/src/map/_icons.sass

@@ -1,20 +1,20 @@
 @use '../color/_index' as color
 
+
 $academic: ('school': (icon: "\F62F"), 'diploma': (icon: "\F153"))
-$boolean-controls: ('radio': (icon: '\F1D0'), 'checkbox': (icon: '\F272'))
-$utility-inputs: ('range': (icon: '\F0E7'), 'color': (icon: '\F4B0'), 'hidden': (icon: '\F0E7'))
-$documents: ('pdf': (icon: "\F63F"), 'default': (icon: ""))
-$buttons: ('file': (icon: '\F0E7'), 'submit': (icon: '\F0E7'), 'reset': (icon: '\F0E7'), 'button': (icon: '\F0E7'))
-$datetime-pickers: ('date': (icon: '\F073'), 'time': (icon: '\F017'), 'week': (icon: '\F4C0'), 'month': (icon: '\F4C1'), 'datetime-local': (icon: '\F017'))
-$input-controls: ('tel': (icon: '\F5BB'), 'url': (icon: '\F882'), 'text': (icon: '\F435'), 'search': (icon: '\F52A'), 'number': (icon: ' \F67F'), 'password': (icon: '\F44E'))
-$misc-icons: ('dir': (icon: "\F3D7"), 'globe': (icon: "\F882"), 'map-pin': (icon: "\F64B"), 'calendar': (icon: "\F1E7"), 'collaborator': (icon: "\F4D0"), 'alarm': (icon: "\F102"), 'cloud': (icon: "\F2C1"))
-$misc: ('pdf': (icon: "\F63D"), 'dot': (icon: "\F309"), 'email': (icon: "\F84B"), 'default': (icon: "\F82E"), 'calendar': (icon: "\F1F6"), 'telephone': (icon: "\F5C1"), 'code': (icon: "\F2C8"))
-$communication: ('mail': (icon: "\F32F"), 'github': (icon: "\F3ED"), 'ytube': (icon: "\F62B"), 'facebook': (icon: "\F344"), 'linkedin': (icon: "\F472"), 'instagram': (icon: "\F437"), 'twitter': (icon: "\F5EF"))
+$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'))
+$documents: ('pdf': (icon: "\F63D"), 'dir': (icon: "\F3D7"), 'default': (icon: "\F369"))
+$datetime-pickers: ( 'time': (icon: '\F3E5'), 'week': (icon: '\F1E6'), 'month': (icon: '\F1E7'),  'calendar': (icon: "\F1E7") )
+$input-controls: ('tel': (icon: '\F5BB'), 'url': (icon: '\F882'), 'text': (icon: '\F435'), 'search': (icon: '\F52A'), 'number': (icon: '\F67F'), 'password': (icon: '\F44E'))
+$misc-icons: ('dir': (icon: "\F3D7"), 'map-pin': (icon: "\F64B"), 'collaborator': (icon: "\F4D0"), 'alarm': (icon: "\F102"), 'cloud': (icon: "\F2C1"), 'dot': (icon: "\F309"),  'code': (icon: "\\F2C8"), 'default': (icon: "\F82E"))
+$communication: ('email': (icon: "\F84B"), 'mail': (icon: "\F32F"), 'github': (icon: "\F3ED"), 'ytube': (icon: "\F62B"), 'facebook': (icon: "\F344"), 'linkedin': (icon: "\F472"), 'instagram': (icon: "\\F437"), 'twitter': (icon: "\F5EF"))
 
 
 $icons: (
-    'misc': $misc, 'buttons': $buttons, 'utility-inputs': $utility-inputs,
-    'input-controls': $input-controls, 'boolean-controls': $boolean-controls,
-    'datetime-pickers': $datetime-pickers, 'document': $documents,
-    'communication': $communication, 'academic': $academic,
-    'misc-icons': $misc-icons)
+    'academic': $academic, 'document': $documents, 'misc-icons': $misc-icons,
+    'communication': $communication, 'utility-inputs': $utility-inputs,
+    'input-controls': $input-controls, 'video-controls': $video-controls,
+    'boolean-controls': $boolean-controls, 'datetime-pickers': $datetime-pickers,
+)

package/src/mix/_generators.sass

@@ -1,35 +1,49 @@
 @use 'sass:map' as map
+@use "sass:list" as list
+@use '../color/base' as base
+@use '../map/inputs' as inputs
 @use '../map/icons' as icon-map
 @use '../map/tag-theme' as tag-map
 @use '../map/flexbox' as flexbox-mapping
-@use '../map/inputs' as inputs
-@use "sass:list" as list
 
-@mixin icon-generator($name: null, $color: null, $font-family: 'bootstrap-icons')
+@function _icon-find($name)
+  @each $category, $maps in icon-map.$icons
+    @if map.has-key($maps, $name)
+      @return map.get($maps, $name)
+  @return null
+
+@mixin _icon-base($name, $color, $font-family)
+  $props: _icon-find($name)
+  @if $props
+    .#{$name}
+      &::before
+        content: map.get($props, icon)
+      @if $color
+        color: $color !important
+
+      font-family: $font-family
+  @else
+    @warn "Icon #{$name} not found in icon mapping."
+
+@mixin icon-generator($name: null, $color: rgb(64, 64, 64), $font-family: 'bootstrap-icons')
   @if icon-map.$icons
     @if $name == null
       @each $category, $maps in icon-map.$icons
         @each $icon, $props in $maps
           .#{$icon}
-            font-family: $font-family
             &::before
               content: map.get($props, icon)
             @if $color
-              color: $color
-    @else
-      $found: false
-      @each $category, $maps in icon-map.$icons
-        @if map.has-key($maps, $name)
-          $found: true
-          $props: map.get($maps, $name)
-          .#{$name}
+              color: $color !important
+
             font-family: $font-family
-            &::before
-              content: map.get($props, icon)
-            @if $color
-              color: $color
-      @if not $found
-        @warn "Icon #{$name} not found in icon mapping."
+    @else
+      $names: $name
+      @if type-of($name) != 'list'
+        $names: ($name)
+
+      @each $single in $names
+        @include _icon-base($single, $color, $font-family)
   @else
     @error "Icon mapping not found."
 
@@ -56,28 +70,26 @@
           @if $placeholder-color != null
             &::placeholder
               color: $placeholder-color
-          &:focus
+          &::focus
             outline: $focus-outline
   @else
     $category: null
     @each $cat, $list in inputs.$inputs
       @if list.index($list, $name)
         $category: $cat
-  
+
     @if $category == null
       @warn "Input '#{$name}' not found in inputs map. Check inputs/_inputs.sass for valid names."
-  
+
     input[type="#{$name}"]
       @each $prop, $val in $props
         #{$prop}: $val
       @if $placeholder-color != null
         &::placeholder
           color: $placeholder-color
-    
-      &:focus
+      &::focus
         outline: $focus-outline
 
-
   // Range track styling
   &::-webkit-slider-runnable-track
     height: 0.4rem