@ulu/frontend 0.1.0-beta.4 → 0.1.0-beta.6

package/scss/components/_popover.scss

@@ -156,8 +156,8 @@ $config: (
     display: none;
     position: absolute;
     z-index: get("z-index") + 1;
-    background-color: get("background-color");
-    color: get("color");
+    background-color: color.get(get("background-color"));
+    color: color.get(get("color"));
     width: get("width");
     max-width: get("max-width");
     box-shadow: get("box-shadow");
@@ -189,18 +189,18 @@ $config: (
   #{ $prefix }__header {
     overflow: hidden;
     padding: get("header-padding-y") get("padding");
-    color: get("header-color");
-    background-color: get("header-background-color");
+    color: color.get(get("header-color"));
+    background-color: color.get(get("header-background-color"));
   }
   #{ $prefix }__header--media {
     padding: 0;
-    background-color: get("header-media-background-color");
+    background-color: color.get(get("header-media-background-color"));
   }
   #{ $prefix }__footer {
     box-shadow: get("box-shadow-footer") color.get(get("box-shadow-footer-color"));
     padding: get("footer-padding-y") get("padding");
-    color: get("footer-color");
-    background-color: get("footer-background-color");
+    color: color.get(get("footer-color"));
+    background-color: color.get(get("footer-background-color"));
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
@@ -215,8 +215,8 @@ $config: (
   #{ $prefix }--tooltip {
     width: get("tooltip-width");
     max-width: min(get("max-width"), get("tooltip-max-width"));
-    color: get("tooltip-color");
-    background-color: get("tooltip-background-color");
+    color: color.get(get("tooltip-color"));
+    background-color: color.get(get("tooltip-background-color"));
     pointer-events: none;
     #{ $prefix }__inner {
       padding: get("tooltip-padding");

package/scss/components/_rule.scss

@@ -5,7 +5,6 @@
 @use "sass:map";
 @use "../utils";
 @use "../element";
-@use "../color";
 @use "../selector";
 
 /// Module Settings

package/scss/components/_scroll-slider.scss

@@ -89,7 +89,7 @@ $config: (
   
   #{ $prefix } {
     position: relative; // for controls
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     margin: get("margin-top") 0 get("margin-bottom") 0;
   }
   #{ $prefix }--cards {

package/scss/components/_skip-link.scss

@@ -7,6 +7,7 @@
 @use "sass:meta";
 
 @use "../element";
+@use "../color";
 @use "../layout";
 @use "../selector";
 @use "../utils";
@@ -83,7 +84,7 @@ $config: (
     left: 50%;
     transform: translateX(-50%);
     padding: get("padding");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     font-weight: bold;
     box-shadow: get("box-shadow");
     border-bottom-left-radius: get("border-radius");

package/scss/components/_slider.scss

@@ -43,11 +43,11 @@ $config: (
   "button-height": 2.5rem,
   "button-width": 2.5rem,
   "dot-background-color" : transparent,
-  "dot-background-color-hover" : color.get("link"),
-  "dot-background-color-selected" : color.get("link"),
-  "dot-border-color" : color.get("link"),
-  "dot-border-color-hover" : color.get("link"),
-  "dot-border-color-selected" : color.get("link"),
+  "dot-background-color-hover" : "link",
+  "dot-background-color-selected" : "link",
+  "dot-border-color" : "link",
+  "dot-border-color-hover" : "link",
+  "dot-border-color-selected" : "link",
   "dot-border-radius" : 50%,
   "dot-border-width" : 2px,
   "dot-size" :  1rem,
@@ -83,7 +83,7 @@ $config: (
   $slide-padding-x: get("button-width") + get("button-margin");
   #{ $prefix } {
     position: relative; // for controls
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     margin: get("margin-top") 0 get("margin-bottom") 0;
   }
   #{ $prefix }__track,
@@ -114,17 +114,17 @@ $config: (
     display: block;
     width: get("dot-size");
     height: get("dot-size");
-    background-color: get("dot-background-color");
-    border: get("dot-border-width") solid get("dot-border-color");
+    background-color: color.get(get("dot-background-color"));
+    border: get("dot-border-width") solid color.get(get("dot-border-color"));
     border-radius: get("dot-border-radius");
     &:hover {
-      background-color: get("dot-background-color-hover");
+      background-color: color.get(get("dot-background-color-hover"));
     }
   }
   #{ $prefix-plugin }__nav-button--active,
   #{ $prefix-plugin }__nav-button--active:hover {
-    background-color: get("dot-background-color-selected");
-    border-color: get("dot-border-color-selected");
+    background-color: color.get(get("dot-background-color-selected"));
+    border-color: color.get(get("dot-border-color-selected"));
   }
   #{ $prefix-plugin }__control-button,
   #{ $prefix-plugin }__nav-button {

package/scss/components/_tabs.scss

@@ -157,7 +157,7 @@ $config: (
       z-index: 1;
       padding: get("tabpanel-padding");
       overflow: hidden;
-      background-color: get("tabpanel-background-color");
+      background-color: color.get(get("tabpanel-background-color"));
     }
   }
   // For images, etc that should fill tabpanel

package/scss/components/_tag.scss

@@ -144,7 +144,7 @@ $styles: (
       border: map.get($style, "border"); 
       border-radius: map.get($style, "border-radius"); 
       border-color: color.get(map.get($style, "border-color")); 
-      border-width: color.get(map.get($style, "border-width")); 
+      border-width: map.get($style, "border-width"); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding");  
       @if (typography.has-size($type-size)) {