Backport toggle button group color fix

.github/workflows/main.yml

@@ -11,14 +11,14 @@ jobs:
   preflight:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       # Set node version
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
           node-version: '12.14.1'
 
       # Cache node_modules
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codaco/ui",
-  "version": "5.8.5",
+  "version": "5.8.6",
   "description": "Styles and React components for the Network Canvas project",
   "main": "lib/components/index.js",
   "license": "GPL-3.0-or-later",

src/components/Fields/ToggleButtonGroup.js

@@ -53,7 +53,7 @@ class ToggleButtonGroup extends PureComponent {
           onChange: this.handleClickOption,
         }}
         label={optionLabel}
-        color={`cat-color-seq-${index + 1}`}
+        color={`cat-color-seq-${index}`}
       />
     );
   };

src/styles/components/form/fields/_toggle-button.scss

@@ -106,8 +106,8 @@ $component-name: form-field-togglebutton;
   }
 }
 
-@for $i from 1 through 20 {
-  $sequence-number: $i % 11;
+@for $i from 0 through 20 {
+  $sequence-number: $i % 10 + 1;
   .form-field-togglebutton-cat-color-seq-#{$i} {
     .form-field-togglebutton__checkbox {
       &::before {