@pushwoosh/dumb-components 1.1.199 → 1.1.201

package/Skeleton/styles.js

@@ -1,13 +1,18 @@
 import styled, { keyframes, css } from 'styled-components';
-import { Color } from '@pushwoosh/kit-constants';
+import { Color, THEME_ATTRIBUTE } from '@pushwoosh/kit-constants';
 import { toCssValue } from '@pushwoosh/kit-helpers';
 const pulseKeyframe = keyframes(["0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}"]);
+const accentKeyframe = keyframes(["0%,100%{background-color:", ";}33%{background-color:", ";}66%{background-color:", ";}"], Color.BRIGHT, Color.SUCCESS, Color.EXCEPTIONAL);
+// Only when the caller left the colour to us: an explicit `color` is intent, not a default.
+const accentCycleCss = css(["[", "='dark'] &{animation:", " 1.5s ease-in-out 0.5s infinite,", " 3s linear infinite;}@media (prefers-reduced-motion:reduce){[", "='dark'] &{animation:", " 1.5s ease-in-out 0.5s infinite;background-color:", ";}}"], THEME_ATTRIBUTE, pulseKeyframe, accentKeyframe, THEME_ATTRIBUTE, pulseKeyframe, Color.BRIGHT);
 const borderRadiusCss = css(["border-radius:", ";"], ({
   borderRadius
 }) => typeof borderRadius === 'undefined' ? 'initial' : toCssValue(borderRadius));
-const skeletonCommonCss = css(["background-color:", ";animation:", " 1.5s ease-in-out 0.5s infinite;"], ({
+const skeletonCommonCss = css(["background-color:", ";animation:", " 1.5s ease-in-out 0.5s infinite;", ""], ({
   color
-}) => color || Color.FORM, pulseKeyframe);
+}) => color || Color.FORM, pulseKeyframe, ({
+  color
+}) => !color && accentCycleCss);
 /** Pulsing rectangular loading placeholder of a fixed `width`/`height`. */
 export const RectangularSkeleton = styled.div.withConfig({
   displayName: "RectangularSkeleton",

package/Spinner/styles.js

@@ -1,17 +1,22 @@
-import styled, { keyframes } from 'styled-components';
-import { Color } from '@pushwoosh/kit-constants';
+import styled, { css, keyframes } from 'styled-components';
+import { Color, THEME_ATTRIBUTE } from '@pushwoosh/kit-constants';
 import { SizeInPxBySpinnerSizeMap } from './maps';
 const rotate = keyframes(["from{transform:rotate(0deg);}to{transform:rotate(360deg);}"]);
+const cycleAccents = keyframes(["0%,100%{color:", ";}25%{color:", ";}50%{color:", ";}75%{color:", ";}"], Color.BRIGHT, Color.DANGER, Color.SUCCESS, Color.EXCEPTIONAL);
+// Only when the caller left the colour to us: an explicit `color` is intent, not a default.
+const accentCycle = css(["[", "='dark'] &{animation:", " 4s linear infinite;}@media (prefers-reduced-motion:reduce){[", "='dark'] &{animation:none;color:", ";}}"], THEME_ATTRIBUTE, cycleAccents, THEME_ATTRIBUTE, Color.BRIGHT);
 export const SpinnerBox = styled.div.withConfig({
   displayName: "SpinnerBox",
   componentId: "sc-y39y31-0"
-})(["width:", ";height:", ";color:", ";line-height:0;user-select:none;"], ({
+})(["width:", ";height:", ";color:", ";line-height:0;user-select:none;", ""], ({
   size
 }) => SizeInPxBySpinnerSizeMap[size], ({
   size
 }) => SizeInPxBySpinnerSizeMap[size], ({
   color
-}) => color || Color.CURRENT);
+}) => color || Color.CURRENT, ({
+  color
+}) => !color && accentCycle);
 export const SpinnerAnimate = styled.div.withConfig({
   displayName: "SpinnerAnimate",
   componentId: "sc-y39y31-1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.199",
+  "version": "1.1.201",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",