fix(spinner): use new brand colors

src/components/spinner/examples/spinner-color.scss

@@ -1,13 +1,13 @@
 :host {
-    --spinner-color-1: rgb(var(--color-cyan-darker));
-    --spinner-color-2: rgb(var(--color-cyan-dark));
-    --spinner-color-3: rgb(var(--color-cyan-default));
-    --spinner-color-4: rgb(var(--color-cyan-light));
-    --spinner-color-4: rgb(var(--color-cyan-lighter));
-    --spinner-color-5: rgb(var(--color-gray-lighter));
-    --spinner-color-6: rgb(var(--color-cyan-lighter));
-    --spinner-color-7: rgb(var(--color-cyan-light));
-    --spinner-color-8: rgb(var(--color-cyan-default));
-    --spinner-color-9: rgb(var(--color-cyan-dark));
-    --spinner-color-10: rgb(var(--color-cyan-darker));
+    --spinner-color-1: rgb(var(--lime-brand-color-lime-green));
+    --spinner-color-2: rgb(var(--lime-brand-color-ocean-teal));
+    --spinner-color-3: rgb(var(--lime-brand-color-aqua));
+    --spinner-color-4: rgb(var(--lime-brand-color-bubble-gum));
+    --spinner-color-4: rgb(var(--lime-brand-color-sunny-orange));
+    --spinner-color-5: rgb(var(--lime-brand-color-lime-green));
+    --spinner-color-6: rgb(var(--lime-brand-color-ocean-teal));
+    --spinner-color-7: rgb(var(--lime-brand-color-aqua));
+    --spinner-color-8: rgb(var(--lime-brand-color-bubble-gum));
+    --spinner-color-9: rgb(var(--lime-brand-color-sunny-orange));
+    --spinner-color-10: rgb(var(--lime-brand-color-aqua));
 }

src/components/spinner/spinner.scss

@@ -3,30 +3,30 @@
 @use '../../style/internal/lime-theme';
 
 /**
- * @prop --spinner-color-1: 1st animated stroke color, defaults to `--lime-brand-color-deep-red`.
- * @prop --spinner-color-2: 2nd animated stroke color, defaults to `--lime-brand-color-sellable-orange`.
- * @prop --spinner-color-3: 3rd animated stroke color, defaults to `--lime-brand-color-simple-blue`.
- * @prop --spinner-color-4: 4th animated stroke color, defaults to `--lime-brand-color-orange`.
- * @prop --spinner-color-5: 5th animated stroke color, defaults to `--lime-brand-color-lime-green`.
- * @prop --spinner-color-6: 6th animated stroke color, defaults to `--lime-brand-color-yellow`.
- * @prop --spinner-color-7: 7th animated stroke color, defaults to `--lime-brand-color-flexible-turquoise`.
- * @prop --spinner-color-8: 8th animated stroke color, defaults to `--lime-brand-color-loving-magenta`.
- * @prop --spinner-color-9: 9th animated stroke color, defaults to `--lime-brand-color-dark-blue`.
- * @prop --spinner-color-10: 10th animated stroke color, defaults to `--lime-brand-color-light-grey`.
+ * @prop --spinner-color-1: 1st animated stroke color, defaults to `--lime-brand-color-lime-green`.
+ * @prop --spinner-color-2: 2nd animated stroke color, defaults to `--lime-brand-color-ocean-teal`.
+ * @prop --spinner-color-3: 3rd animated stroke color, defaults to `--lime-brand-color-aqua`.
+ * @prop --spinner-color-4: 4th animated stroke color, defaults to `--lime-brand-color-bubble-gum`.
+ * @prop --spinner-color-5: 5th animated stroke color, defaults to `--lime-brand-color-sunny-orange`.
+ * @prop --spinner-color-6: 6th animated stroke color, defaults to `--lime-brand-color-lime-green`.
+ * @prop --spinner-color-7: 7th animated stroke color, defaults to `--lime-brand-color-ocean-teal`.
+ * @prop --spinner-color-8: 8th animated stroke color, defaults to `--lime-brand-color-aqua`.
+ * @prop --spinner-color-9: 9th animated stroke color, defaults to `--lime-brand-color-bubble-gum`.
+ * @prop --spinner-color-10: 10th animated stroke color, defaults to `--lime-brand-color-sunny-orange`.
  */
 
 $stroke-width-normal: 4;
 $stroke-width-thick: 10;
-$colors: var(--spinner-color-1, rgb(var(--lime-brand-color-deep-red))),
-    var(--spinner-color-2, rgb(var(--lime-brand-color-sellable-orange))),
-    var(--spinner-color-3, rgb(var(--lime-brand-color-simple-blue))),
-    var(--spinner-color-4, rgb(var(--lime-brand-color-orange))),
-    var(--spinner-color-5, rgb(var(--lime-brand-color-lime-green))),
-    var(--spinner-color-6, rgb(var(--lime-brand-color-yellow))),
-    var(--spinner-color-7, rgb(var(--lime-brand-color-flexible-turquoise))),
-    var(--spinner-color-8, rgb(var(--lime-brand-color-loving-magenta))),
-    var(--spinner-color-9, rgb(var(--lime-brand-color-dark-blue))),
-    var(--spinner-color-9, rgb(var(--lime-brand-color-light-grey)));
+$colors: var(--spinner-color-1, rgb(var(--lime-brand-color-lime-green))),
+    var(--spinner-color-2, rgb(var(--lime-brand-color-ocean-teal))),
+    var(--spinner-color-3, rgb(var(--lime-brand-color-aqua))),
+    var(--spinner-color-4, rgb(var(--lime-brand-color-bubble-gum))),
+    var(--spinner-color-5, rgb(var(--lime-brand-color-sunny-orange))),
+    var(--spinner-color-6, rgb(var(--lime-brand-color-lime-green))),
+    var(--spinner-color-7, rgb(var(--lime-brand-color-ocean-teal))),
+    var(--spinner-color-8, rgb(var(--lime-brand-color-aqua))),
+    var(--spinner-color-9, rgb(var(--lime-brand-color-bubble-gum))),
+    var(--spinner-color-10, rgb(var(--contrast-700)));
 $dash: 63;
 $duration: length($colors) * 1s;
 $duration-alt: math.div($duration, length($colors));