feat(svg-animations): theme switching for animations

Author: glassdimly

packages/micro-journeys/src/bolt-svg-animations/svg-animations.js

@@ -1,18 +1,28 @@
-import { props, define, hasNativeShadowDomSupport } from '@bolt/core/utils';
+import {
+  props,
+  define,
+  hasNativeShadowDomSupport,
+  withContext,
+} from '@bolt/core/utils';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { withLitHtml, html, convertSchemaToProps } from '@bolt/core';
 import * as SVGs from './svg';
 import styles from './svg-animations.scss';
 import schema from './svg-animations.schema';
+import { BoltInteractivePathwaysContext } from '../interactive-pathways';
 
 @define
-class SVGAnimations extends withLitHtml() {
+class SVGAnimations extends withContext(withLitHtml()) {
   static is = 'bolt-svg-animations';
 
   static props = {
     ...convertSchemaToProps(schema),
   };
 
+  static get consumes() {
+    return [[BoltInteractivePathwaysContext, 'theme']];
+  }
+
   constructor(self) {
     self = super(self);
     self.schema = schema;
@@ -21,18 +31,22 @@ class SVGAnimations extends withLitHtml() {
   }
 
   render() {
-    const { direction, animType, speed, theme } = this.validateProps(
-      this.props,
-    );
+    const props = this.validateProps(this.props);
+    this.theme = this.context.theme;
     const classes = {
       'c-bolt-svg-animations': true,
+      [`t-bolt-${this.theme}`]: this.theme,
     };
-    const SVGTag = SVGs[`${animType}`];
+    const SVGTag = SVGs[`${props.animType}`];
 
     return html`
       ${this.addStyles([styles])}
       <div class="${classMap(classes)}">
-        ${SVGTag({ speed, theme, direction })}
+        ${SVGTag({
+          speed: props.speed,
+          theme: this.theme,
+          direction: props.direction,
+        })}
       </div>
     `;
   }

packages/micro-journeys/src/bolt-svg-animations/svg-animations.schema.js

@@ -29,6 +29,7 @@ module.exports = {
     theme: {
       type: 'string',
       enum: ['light', 'dark'],
+      default: '',
       description:
         'control color scheme of component, not applicable to all animTypes',
     },

packages/micro-journeys/src/bolt-svg-animations/svg/connectionBand.js

@@ -18,7 +18,6 @@ export const connectionBand = ({ direction, theme }) => {
     backwards; animation-name: connectionArrowScroll; animation-timing-function:
     cubic-bezier(0, 0, 1, 1); }
   `;
-
   const gradientColors =
     theme === 'dark'
       ? svg`

packages/micro-journeys/src/bolt-svg-animations/svg/tripleConnectionBand.js

@@ -1,4 +1,3 @@
-import { html } from '@bolt/core/renderers/renderer-lit-html';
 import { svg } from 'lit-html';
 
 export const tripleConnectionBand = ({ speed, direction, theme }) => {