@kirbydesign/designsystem 4.0.8 → 4.0.9

package/bundles/kirbydesign-designsystem.umd.js

@@ -1477,9 +1477,11 @@
         ColorHelper.getColorBrightness = function (name) {
             return ColorHelper.getColor(name + '-color-brightness');
         };
-        ColorHelper.getThemeColorRgbString = function (name) {
+        ColorHelper.getThemeColorRgbString = function (name, opacity) {
             var rgbValue = ColorHelper.getColor(name + '-rgb');
-            return "rgb(" + rgbValue + ")";
+            return opacity
+                ? "rgba(" + rgbValue + ", " + ColorHelper.opacityThreshold(opacity) + ")"
+                : "rgb(" + rgbValue + ")";
         };
         ColorHelper.getThemeTextColorRgbString = function (name) {
             var rgbValue = ColorHelper.getTextColor(name + '-rgb');
@@ -1538,6 +1540,13 @@
             var found = styles$1.kirbyTextColors[camelCaseKey];
             return found || null;
         };
+        ColorHelper.opacityThreshold = function (opacity) {
+            if (0 <= opacity && opacity <= 1) {
+                return opacity;
+            }
+            console.warn("Opacity value must be between 0 and 1. Current value is: " + opacity + ".");
+            return 1;
+        };
         return ColorHelper;
     }());
     ColorHelper.brandColors = ColorHelper.mapToKirbyColorArray(styles$1.brandColors);
@@ -4389,7 +4398,7 @@
     };
 
     var fontSize$2 = DesignTokenHelper.fontSize;
-    var getThemeColorHexString$1 = ColorHelper.getThemeColorHexString;
+    var getThemeColorHexString$1 = ColorHelper.getThemeColorHexString, getThemeColorRgbString = ColorHelper.getThemeColorRgbString;
     var CHART_TYPES_CONFIG = {
         bar: {
             type: 'bar',
@@ -4463,6 +4472,7 @@
         line: {
             type: 'line',
             options: {
+                backgroundColor: getThemeColorRgbString('semi-light', 0.5),
                 scales: {
                     x: {
                         grid: {
@@ -4576,7 +4586,7 @@
     var CHART_SCALES = [chart_js.CategoryScale, chart_js.LinearScale];
     var CHART_ELEMENTS = [chart_js.BarElement, chart_js.LineElement, chart_js.PointElement];
     var CHART_CONTROLLERS = [chart_js.BarController, chart_js.LineController];
-    var CHART_PLUGINS = [annotationPlugin__default['default']];
+    var CHART_PLUGINS = [annotationPlugin__default['default'], chart_js.Filler];
     /* Order matters; defaults must be merged after register as
        register modifies the Chart.defaults objects */
     chart_js.Chart.register.apply(chart_js.Chart, __spread([chart_js.Legend], CHART_SCALES, CHART_ELEMENTS, CHART_CONTROLLERS, CHART_PLUGINS));