uikit 3.23.7 → 3.23.8-dev.ff7a25595

package/src/scss/components/dropbar.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Dropbar
 // Description:     Component to create a dropbar based on Drop component
 //
@@ -39,7 +41,7 @@
     padding: $dropbar-padding-top $dropbar-padding-horizontal $dropbar-padding-bottom $dropbar-padding-horizontal;
     background: $dropbar-background;
     color: $dropbar-color;
-    @if(mixin-exists(hook-dropbar)) {@include hook-dropbar();}
+    @if(meta.mixin-exists(hook-dropbar)) {@include hook-dropbar();}
 }
 
 /*
@@ -92,26 +94,26 @@
  ========================================================================== */
 
 .uk-dropbar-top {
-    @if(mixin-exists(hook-dropbar-top)) {@include hook-dropbar-top();}
+    @if(meta.mixin-exists(hook-dropbar-top)) {@include hook-dropbar-top();}
 }
 
 .uk-dropbar-bottom {
-    @if(mixin-exists(hook-dropbar-bottom)) {@include hook-dropbar-bottom();}
+    @if(meta.mixin-exists(hook-dropbar-bottom)) {@include hook-dropbar-bottom();}
 }
 
 .uk-dropbar-left {
-    @if(mixin-exists(hook-dropbar-left)) {@include hook-dropbar-left();}
+    @if(meta.mixin-exists(hook-dropbar-left)) {@include hook-dropbar-left();}
 }
 
 .uk-dropbar-right {
-    @if(mixin-exists(hook-dropbar-right)) {@include hook-dropbar-right();}
+    @if(meta.mixin-exists(hook-dropbar-right)) {@include hook-dropbar-right();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-dropbar-misc)) {@include hook-dropbar-misc();}
+@if(meta.mixin-exists(hook-dropbar-misc)) {@include hook-dropbar-misc();}
 
 // @mixin hook-dropbar(){}
 // @mixin hook-dropbar-top(){}

package/src/scss/components/dropdown.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Dropdown
 // Description:     Component to create a dropdown based on Drop component
 //
@@ -44,7 +46,7 @@
     padding: $dropdown-padding;
     background: $dropdown-background;
     color: $dropdown-color;
-    @if(mixin-exists(hook-dropdown)) {@include hook-dropdown();}
+    @if(meta.mixin-exists(hook-dropdown)) {@include hook-dropdown();}
 }
 
 /*
@@ -88,7 +90,7 @@
     /* 3 */
     padding: $dropdown-dropbar-padding-top 0 $dropdown-dropbar-padding-bottom 0;
     --uk-position-viewport-offset: #{$dropdown-dropbar-viewport-margin};
-    @if(mixin-exists(hook-dropdown-dropbar)) {@include hook-dropdown-dropbar();}
+    @if(meta.mixin-exists(hook-dropdown-dropbar)) {@include hook-dropdown-dropbar();}
 }
 
 /* Phone landscape and bigger */
@@ -108,7 +110,7 @@
 .uk-dropdown-dropbar-large {
     padding-top: $dropdown-dropbar-large-padding-top;
     padding-bottom: $dropdown-dropbar-large-padding-bottom;
-    @if(mixin-exists(hook-dropdown-dropbar-large)) {@include hook-dropdown-dropbar-large();}
+    @if(meta.mixin-exists(hook-dropdown-dropbar-large)) {@include hook-dropdown-dropbar-large();}
 }
 
 
@@ -117,7 +119,7 @@
  ========================================================================== */
 
 .uk-dropdown-nav {
-    @if(mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();}
+    @if(meta.mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();}
 }
 
 /*
@@ -126,14 +128,14 @@
 
 .uk-dropdown-nav > li > a {
     color: $dropdown-nav-item-color;
-    @if(mixin-exists(hook-dropdown-nav-item)) {@include hook-dropdown-nav-item();}
+    @if(meta.mixin-exists(hook-dropdown-nav-item)) {@include hook-dropdown-nav-item();}
 }
 
 /* Hover + Active */
 .uk-dropdown-nav > li > a:hover,
 .uk-dropdown-nav > li.uk-active > a {
     color: $dropdown-nav-item-hover-color;
-    @if(mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();}
+    @if(meta.mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();}
 }
 
 /*
@@ -142,7 +144,7 @@
 
 .uk-dropdown-nav .uk-nav-subtitle {
     font-size: $dropdown-nav-subtitle-font-size;
-    @if(mixin-exists(hook-dropdown-nav-subtitle)) {@include hook-dropdown-nav-subtitle();}
+    @if(meta.mixin-exists(hook-dropdown-nav-subtitle)) {@include hook-dropdown-nav-subtitle();}
 }
 
 /*
@@ -151,7 +153,7 @@
 
 .uk-dropdown-nav .uk-nav-header {
     color: $dropdown-nav-header-color;
-    @if(mixin-exists(hook-dropdown-nav-header)) {@include hook-dropdown-nav-header();}
+    @if(meta.mixin-exists(hook-dropdown-nav-header)) {@include hook-dropdown-nav-header();}
 }
 
 /*
@@ -160,7 +162,7 @@
 
 .uk-dropdown-nav .uk-nav-divider {
     border-top: $dropdown-nav-divider-border-width solid $dropdown-nav-divider-border;
-    @if(mixin-exists(hook-dropdown-nav-divider)) {@include hook-dropdown-nav-divider();}
+    @if(meta.mixin-exists(hook-dropdown-nav-divider)) {@include hook-dropdown-nav-divider();}
 }
 
 /*
@@ -176,7 +178,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-dropdown-misc)) {@include hook-dropdown-misc();}
+@if(meta.mixin-exists(hook-dropdown-misc)) {@include hook-dropdown-misc();}
 
 // @mixin hook-dropdown(){}
 // @mixin hook-dropdown-dropbar(){}

package/src/scss/components/dropnav.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Dropnav
 // Description:     Component to create dropdown/dropbar menus based on Drop component
 //
@@ -37,6 +39,6 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-dropnav-misc)) {@include hook-dropnav-misc();}
+@if(meta.mixin-exists(hook-dropnav-misc)) {@include hook-dropnav-misc();}
 
 // @mixin hook-dropnav-misc(){}

package/src/scss/components/flex.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Flex
 // Description:     Utilities for layouts based on flexbox
 //
@@ -303,6 +305,6 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-flex-misc)) {@include hook-flex-misc();}
+@if(meta.mixin-exists(hook-flex-misc)) {@include hook-flex-misc();}
 
 // @mixin hook-flex-misc(){}

package/src/scss/components/form-range.scss

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "sass:math";
+
 // Name:            Form Range
 // Description:     Styles for the range input type
 //
@@ -41,7 +44,7 @@
     width: 100%;
     /* 7 */
     background: transparent;
-    @if(mixin-exists(hook-form-range)) {@include hook-form-range();}
+    @if(meta.mixin-exists(hook-form-range)) {@include hook-form-range();}
 }
 
 /* Focus */
@@ -65,26 +68,26 @@
 .uk-range::-webkit-slider-runnable-track {
     height: $form-range-track-height;
     background: $form-range-track-background;
-    @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
+    @if(meta.mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
 }
 
 .uk-range:focus::-webkit-slider-runnable-track,
 /* 1 */
 .uk-range:active::-webkit-slider-runnable-track {
     background: $form-range-track-focus-background;
-    @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
+    @if(meta.mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
 }
 
 /* Firefox */
 .uk-range::-moz-range-track {
     height: $form-range-track-height;
     background: $form-range-track-background;
-    @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
+    @if(meta.mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
 }
 
 .uk-range:focus::-moz-range-track {
     background: $form-range-track-focus-background;
-    @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
+    @if(meta.mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
 }
 
 /*
@@ -97,13 +100,13 @@
 .uk-range::-webkit-slider-thumb {
     /* 1 */
     -webkit-appearance: none;
-    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
+    margin-top: (math.floor(($form-range-thumb-height * 0.5)) * -1);
     /* 2 */
     height: $form-range-thumb-height;
     width: $form-range-thumb-width;
     border-radius: $form-range-thumb-border-radius;
     background: $form-range-thumb-background;
-    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
+    @if(meta.mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
 }
 
 /* Firefox */
@@ -113,17 +116,17 @@
     /* 2 */
     height: $form-range-thumb-height;
     width: $form-range-thumb-width;
-    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
+    margin-top: (math.floor(($form-range-thumb-height * 0.5)) * -1);
     border-radius: $form-range-thumb-border-radius;
     background: $form-range-thumb-background;
-    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
+    @if(meta.mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-form-range-misc)) {@include hook-form-range-misc();}
+@if(meta.mixin-exists(hook-form-range-misc)) {@include hook-form-range-misc();}
 
 // @mixin hook-form-range(){}
 // @mixin hook-form-range-track(){}

package/src/scss/components/form.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Form
 // Description:     Styles for forms
 //
@@ -206,7 +208,7 @@
     padding: 0 $form-padding-horizontal;
     background: $form-background;
     color: $form-color;
-    @if(mixin-exists(hook-form)) {@include hook-form();}
+    @if(meta.mixin-exists(hook-form)) {@include hook-form();}
 }
 
 /*
@@ -222,7 +224,7 @@
     vertical-align: middle;
     /* 1 */
     display: inline-block;
-    @if(mixin-exists(hook-form-single-line)) {@include hook-form-single-line();}
+    @if(meta.mixin-exists(hook-form-single-line)) {@include hook-form-single-line();}
 }
 
 /* 2 */
@@ -239,7 +241,7 @@
     padding-top: $form-padding-vertical;
     padding-bottom: $form-padding-vertical;
     vertical-align: top;
-    @if(mixin-exists(hook-form-multi-line)) {@include hook-form-multi-line();}
+    @if(meta.mixin-exists(hook-form-multi-line)) {@include hook-form-multi-line();}
 }
 
 .uk-select[multiple],
@@ -252,7 +254,7 @@
     outline: none;
     background-color: $form-focus-background;
     color: $form-focus-color;
-    @if(mixin-exists(hook-form-focus)) {@include hook-form-focus();}
+    @if(meta.mixin-exists(hook-form-focus)) {@include hook-form-focus();}
 }
 
 /* Disabled */
@@ -261,7 +263,7 @@
 .uk-textarea:disabled {
     background-color: $form-disabled-background;
     color: $form-disabled-color;
-    @if(mixin-exists(hook-form-disabled)) {@include hook-form-disabled();}
+    @if(meta.mixin-exists(hook-form-disabled)) {@include hook-form-disabled();}
 }
 
 /*
@@ -327,7 +329,7 @@ textarea.uk-form-large,
 .uk-form-danger,
 .uk-form-danger:focus {
     color: $form-danger-color;
-    @if(mixin-exists(hook-form-danger)) {@include hook-form-danger();}
+    @if(meta.mixin-exists(hook-form-danger)) {@include hook-form-danger();}
 }
 
 /*
@@ -337,7 +339,7 @@ textarea.uk-form-large,
 .uk-form-success,
 .uk-form-success:focus {
     color: $form-success-color;
-    @if(mixin-exists(hook-form-success)) {@include hook-form-success();}
+    @if(meta.mixin-exists(hook-form-success)) {@include hook-form-success();}
 }
 
 /*
@@ -346,11 +348,11 @@ textarea.uk-form-large,
 
 .uk-form-blank {
     background: none;
-    @if(mixin-exists(hook-form-blank)) {@include hook-form-blank();}
+    @if(meta.mixin-exists(hook-form-blank)) {@include hook-form-blank();}
 }
 
 .uk-form-blank:focus {
-    @if(mixin-exists(hook-form-blank-focus)) {@include hook-form-blank-focus();}
+    @if(meta.mixin-exists(hook-form-blank-focus)) {@include hook-form-blank-focus();}
 }
 
 
@@ -454,7 +456,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
     /* 6 */
     background-repeat: no-repeat;
     background-position: 50% 50%;
-    @if(mixin-exists(hook-form-radio)) {@include hook-form-radio();}
+    @if(meta.mixin-exists(hook-form-radio)) {@include hook-form-radio();}
 }
 
 .uk-radio { border-radius: 50%; }
@@ -464,7 +466,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .uk-checkbox:focus {
     background-color: $form-radio-focus-background;
     outline: none;
-    @if(mixin-exists(hook-form-radio-focus)) {@include hook-form-radio-focus();}
+    @if(meta.mixin-exists(hook-form-radio-focus)) {@include hook-form-radio-focus();}
 }
 
 /*
@@ -475,7 +477,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .uk-checkbox:checked,
 .uk-checkbox:indeterminate {
     background-color: $form-radio-checked-background;
-    @if(mixin-exists(hook-form-radio-checked)) {@include hook-form-radio-checked();}
+    @if(meta.mixin-exists(hook-form-radio-checked)) {@include hook-form-radio-checked();}
 }
 
 /* Focus */
@@ -483,7 +485,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .uk-checkbox:checked:focus,
 .uk-checkbox:indeterminate:focus {
     background-color: $form-radio-checked-focus-background;
-    @if(mixin-exists(hook-form-radio-checked-focus)) {@include hook-form-radio-checked-focus();}
+    @if(meta.mixin-exists(hook-form-radio-checked-focus)) {@include hook-form-radio-checked-focus();}
 }
 
 /*
@@ -501,7 +503,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .uk-radio:disabled,
 .uk-checkbox:disabled {
     background-color: $form-radio-disabled-background;
-    @if(mixin-exists(hook-form-radio-disabled)) {@include hook-form-radio-disabled();}
+    @if(meta.mixin-exists(hook-form-radio-disabled)) {@include hook-form-radio-disabled();}
 }
 
 .uk-radio:disabled:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-disabled-icon-color); }
@@ -530,7 +532,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
     /* 4 */
     font-size: $form-legend-font-size;
     line-height: $form-legend-line-height;
-    @if(mixin-exists(hook-form-legend)) {@include hook-form-legend();}
+    @if(meta.mixin-exists(hook-form-legend)) {@include hook-form-legend();}
 }
 
 
@@ -593,7 +595,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  ========================================================================== */
 
 .uk-form-label {
-    @if(mixin-exists(hook-form-label)) {@include hook-form-label();}
+    @if(meta.mixin-exists(hook-form-label)) {@include hook-form-label();}
 }
 
 
@@ -607,7 +609,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .uk-form-stacked .uk-form-label {
     display: block;
     margin-bottom: $form-stacked-margin-bottom;
-    @if(mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
+    @if(meta.mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
 }
 
 /*
@@ -621,7 +623,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
     .uk-form-horizontal .uk-form-label {
         display: block;
         margin-bottom: $form-stacked-margin-bottom;
-        @if(mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
+        @if(meta.mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
     }
 
 }
@@ -633,7 +635,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
         width: $form-horizontal-label-width;
         margin-top: $form-horizontal-label-margin-top;
         float: left;
-        @if(mixin-exists(hook-form-horizontal-label)) {@include hook-form-horizontal-label();}
+        @if(meta.mixin-exists(hook-form-horizontal-label)) {@include hook-form-horizontal-label();}
     }
 
     .uk-form-horizontal .uk-form-controls { margin-left: $form-horizontal-controls-margin-left; }
@@ -668,7 +670,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
     align-items: center;
     /* 4 */
     color: $form-icon-color;
-    @if(mixin-exists(hook-form-icon)) {@include hook-form-icon();}
+    @if(meta.mixin-exists(hook-form-icon)) {@include hook-form-icon();}
 }
 
 /*
@@ -704,7 +706,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-form-misc)) {@include hook-form-misc();}
+@if(meta.mixin-exists(hook-form-misc)) {@include hook-form-misc();}
 
 // @mixin hook-form(){}
 // @mixin hook-form-single-line(){}

package/src/scss/components/grid.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Grid
 // Description:     Component to create responsive, fluid and nestable grids
 //
@@ -193,7 +195,7 @@
     top: 0;
     bottom: 0;
     border-left: $grid-divider-border-width solid $grid-divider-border;
-    @if(mixin-exists(hook-grid-divider-horizontal)) {@include hook-grid-divider-horizontal();}
+    @if(meta.mixin-exists(hook-grid-divider-horizontal)) {@include hook-grid-divider-horizontal();}
 }
 
 /* Vertical */
@@ -203,7 +205,7 @@
     left: 0;
     right: 0;
     border-top: $grid-divider-border-width solid $grid-divider-border;
-    @if(mixin-exists(hook-grid-divider-vertical)) {@include hook-grid-divider-vertical();}
+    @if(meta.mixin-exists(hook-grid-divider-vertical)) {@include hook-grid-divider-vertical();}
 }
 
 /*
@@ -375,7 +377,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-grid-misc)) {@include hook-grid-misc();}
+@if(meta.mixin-exists(hook-grid-misc)) {@include hook-grid-misc();}
 
 // @mixin hook-grid-divider-horizontal(){}
 // @mixin hook-grid-divider-vertical(){}

package/src/scss/components/heading.scss

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "sass:string";
+
 // Name:            Heading
 // Description:     Styles for headings
 //
@@ -45,37 +48,37 @@ $heading-3xlarge-font-size-l:                    15rem !default;
 .uk-heading-small {
     font-size: $heading-small-font-size;
     line-height: $heading-small-line-height;
-    @if(mixin-exists(hook-heading-small)) {@include hook-heading-small();}
+    @if(meta.mixin-exists(hook-heading-small)) {@include hook-heading-small();}
 }
 
 .uk-heading-medium {
     font-size: $heading-medium-font-size;
     line-height: $heading-medium-line-height;
-    @if(mixin-exists(hook-heading-medium)) {@include hook-heading-medium();}
+    @if(meta.mixin-exists(hook-heading-medium)) {@include hook-heading-medium();}
 }
 
 .uk-heading-large {
     font-size: $heading-large-font-size;
     line-height: $heading-large-line-height;
-    @if(mixin-exists(hook-heading-large)) {@include hook-heading-large();}
+    @if(meta.mixin-exists(hook-heading-large)) {@include hook-heading-large();}
 }
 
 .uk-heading-xlarge {
     font-size: $heading-xlarge-font-size;
     line-height: $heading-xlarge-line-height;
-    @if(mixin-exists(hook-heading-xlarge)) {@include hook-heading-xlarge();}
+    @if(meta.mixin-exists(hook-heading-xlarge)) {@include hook-heading-xlarge();}
 }
 
 .uk-heading-2xlarge {
     font-size: $heading-2xlarge-font-size;
     line-height: $heading-2xlarge-line-height;
-    @if(mixin-exists(hook-heading-2xlarge)) {@include hook-heading-2xlarge();}
+    @if(meta.mixin-exists(hook-heading-2xlarge)) {@include hook-heading-2xlarge();}
 }
 
 .uk-heading-3xlarge {
     font-size: $heading-3xlarge-font-size;
     line-height: $heading-3xlarge-line-height;
-    @if(mixin-exists(hook-heading-3xlarge)) {@include hook-heading-3xlarge();}
+    @if(meta.mixin-exists(hook-heading-3xlarge)) {@include hook-heading-3xlarge();}
 }
 
 /* Tablet Landscape and bigger */
@@ -116,7 +119,7 @@ $heading-primary-font-size:                      $heading-primary-font-size-l *
 .uk-heading-primary {
     font-size: $heading-primary-font-size;
     line-height: $heading-primary-line-height;
-    @if(mixin-exists(hook-heading-primary)) {@include hook-heading-primary();}
+    @if(meta.mixin-exists(hook-heading-primary)) {@include hook-heading-primary();}
 }
 }
 
@@ -156,7 +159,7 @@ $heading-hero-font-size:                         $heading-hero-font-size-l * 0.5
 .uk-heading-hero {
     font-size: $heading-hero-font-size;
     line-height: $heading-hero-line-height;
-    @if(mixin-exists(hook-heading-hero)) {@include hook-heading-hero();}
+    @if(meta.mixin-exists(hook-heading-hero)) {@include hook-heading-hero();}
 }
 }
 
@@ -191,7 +194,7 @@ $heading-hero-font-size:                         $heading-hero-font-size-l * 0.5
 .uk-heading-divider {
     padding-bottom: $heading-divider-padding-bottom;
     border-bottom: $heading-divider-border-width solid $heading-divider-border;
-    @if(mixin-exists(hook-heading-divider)) {@include hook-heading-divider();}
+    @if(meta.mixin-exists(hook-heading-divider)) {@include hook-heading-divider();}
 }
 
 
@@ -218,7 +221,7 @@ $heading-hero-font-size:                         $heading-hero-font-size-l * 0.5
     height: $heading-bullet-height;
     margin-right: $heading-bullet-margin-right;
     border-left: $heading-bullet-border-width solid $heading-bullet-border;
-    @if(mixin-exists(hook-heading-bullet)) {@include hook-heading-bullet();}
+    @if(meta.mixin-exists(hook-heading-bullet)) {@include hook-heading-bullet();}
 }
 
 
@@ -251,12 +254,12 @@ $heading-hero-font-size:                         $heading-hero-font-size-l * 0.5
     content: "";
     /* 1 */
     position: absolute;
-    top: unquote('calc(#{$heading-line-top} - (#{$heading-line-height} / 2))');
+    top: string.unquote('calc(#{$heading-line-top} - (#{$heading-line-height} / 2))');
     /* 2 */
     width: $heading-line-width;
     /* 3 */
     border-bottom: $heading-line-border-width solid $heading-line-border;
-    @if(mixin-exists(hook-heading-line)) {@include hook-heading-line();}
+    @if(meta.mixin-exists(hook-heading-line)) {@include hook-heading-line();}
 }
 
 .uk-heading-line > ::before {
@@ -272,7 +275,7 @@ $heading-hero-font-size:                         $heading-hero-font-size-l * 0.5
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-heading-misc)) {@include hook-heading-misc();}
+@if(meta.mixin-exists(hook-heading-misc)) {@include hook-heading-misc();}
 
 // @mixin hook-heading-small(){}
 // @mixin hook-heading-medium(){}

package/src/scss/components/height.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Height
 // Description:     Utilities for heights
 //
@@ -49,6 +51,6 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-height-misc)) {@include hook-height-misc();}
+@if(meta.mixin-exists(hook-height-misc)) {@include hook-height-misc();}
 
 // @mixin hook-height-misc(){}

package/src/scss/components/icon.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Icon
 // Description:     Component to create icons
 //
@@ -125,19 +127,19 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
     color: $icon-link-color;
     /* 1 */
     text-decoration: none !important;
-    @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();}
+    @if(meta.mixin-exists(hook-icon-link)) {@include hook-icon-link();}
 }
 
 .uk-icon-link:hover {
     color: $icon-link-hover-color;
-    @if(mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();}
+    @if(meta.mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();}
 }
 
 /* OnClick + Active */
 .uk-icon-link:active,
 .uk-active > .uk-icon-link {
     color: $icon-link-active-color;
-    @if(mixin-exists(hook-icon-link-active)) {@include hook-icon-link-active();}
+    @if(meta.mixin-exists(hook-icon-link-active)) {@include hook-icon-link-active();}
 }
 
 /*
@@ -157,14 +159,14 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    @if(mixin-exists(hook-icon-button)) {@include hook-icon-button();}
+    @if(meta.mixin-exists(hook-icon-button)) {@include hook-icon-button();}
 }
 
 /* Hover */
 .uk-icon-button:hover {
     background-color: $icon-button-hover-background;
     color: $icon-button-hover-color;
-    @if(mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();}
+    @if(meta.mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();}
 }
 
 /* OnClick + Active */
@@ -172,14 +174,14 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 .uk-active > .uk-icon-button {
     background-color: $icon-button-active-background;
     color: $icon-button-active-color;
-    @if(mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();}
+    @if(meta.mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-icon-misc)) {@include hook-icon-misc();}
+@if(meta.mixin-exists(hook-icon-misc)) {@include hook-icon-misc();}
 
 // @mixin hook-icon-link(){}
 // @mixin hook-icon-link-hover(){}