refactor(chart-themes): replace repeating brushes styles with a CSS v…

…ariable

This reduces the amount of generated CSS by quite a few lines.

sass/themes/_functions.scss

@@ -44,7 +44,7 @@
 
         // Special case for chart brushes
         @if $value == 'series' {
-            $result: map.merge($result, (#{$key}: #{color.chart-brushes()}));
+            $result: map.merge($result, (#{$key}: var(--chart-brushes)));
         }
     }
 

sass/themes/charts/_theme.scss

@@ -1,4 +1,5 @@
 @use '../mixins' as *;
+@use '../../color/functions' as color;
 @use './category-chart-theme' as *;
 @use './data-chart-theme' as *;
 @use './doughnut-chart-theme' as *;
@@ -12,6 +13,15 @@
 @use './sparkline-theme' as *;
 
 @mixin chart-themes($schema, $target: 'angular') {
+    :root {
+        @include css-vars-from-theme(
+            (
+                chart-brushes: color.chart-brushes(),
+            ),
+            'ig'
+        );
+    }
+
     @include css-vars(category-chart-theme($schema: $schema, $target: $target));
     @include css-vars(data-chart-theme($schema: $schema, $target: $target));
     @include css-vars(doughnut-chart-theme($schema: $schema, $target: $target));

test/_themes.spec.scss

@@ -109,7 +109,7 @@ $schema: (
                 hover-foreground: color-mix(in oklch, var(--ig-secondary-700-contrast) 100%, transparent),
                 border-style: solid,
                 border-radius: .125rem,
-                brushes: #{chart-brushes()},
+                brushes: var(--chart-brushes),
                 resting-elevation: var(--ig-elevation-2),
                 _meta: (
                     version: 1

test/e2e/theme.scss

@@ -20,6 +20,4 @@
     $handmade-palette: mocks.$handmade-palette;
 
     @include palette($handmade-palette);
-
-    color: color($handmade-palette, 'primary', 300);
 }