chore: replace usage of 'colour' with 'color' in comments/docs

src/components/Select/styles.js

@@ -1,4 +1,4 @@
-const borderColour = '#ababab';
+const borderColor = '#ababab';
 
 const defaultStyle = {
   option: (styles, { isFocused, isSelected, isDisabled }) => {
@@ -32,8 +32,8 @@ const defaultStyle = {
     ...(state.isFocused
       ? {
           boxShadow: 0,
-          ':hover': { borderColor: borderColour },
-          borderColor: borderColour,
+          ':hover': { borderColor },
+          borderColor,
         }
       : {}),
     minHeight: 26,

src/components/SvgSymbol/styles.scss

@@ -23,7 +23,7 @@
   @include size(200);
   @include size(250);
 
-  // Colours. Classes look like `.aui--svg-symbol-component-gray-light`.
+  // Colors. Classes look like `.aui--svg-symbol-component-gray-light`.
   @include fill('color-disabled', $color-gray-light);
   @include fill('cyan-dark', $color-cyan-dark);
   @include fill('gray', $color-gray);

src/components/Tag/styles.scss

@@ -24,7 +24,7 @@
   line-height: 0;
 
   &.tag-component-inverse {
-    // explicit .tag-component to force override of `.accent-n` inverse bg/fill colours
+    // explicit .tag-component to force override of `.accent-n` inverse bg/fill colors
     background-color: $color-tag-inverse;
     border-left: 4px solid;
     color: $color-text-light;

src/styles/bootstrapOverrides/Button.scss

@@ -25,7 +25,7 @@
   }
 }
 
-// Use `.btn-inverse` and add a normal style like `info` to add colours.
+// Use `.btn-inverse` and add a normal style like `info` to add colors.
 .btn-inverse {
   // :not(:disabled) is used instead of :enabled as various elements (a, div, span)
   // are styled as buttons but do not have an :enabled state

src/styles/color.scss

@@ -45,7 +45,7 @@ $color-status-light-red: #f9b7b0;
 $color-status-light-blue: #c1e1ec;
 $color-status-light-green: #c5e6dc;
 
-// Usage: Use these values, not the colours directly
+// Usage: Use these values, not the colors directly
 
 // Informative
 $color-primary: $color-blue;

www/examples/Alert.mdx

@@ -15,7 +15,7 @@ import DesignNotes from '../containers/DesignNotes.jsx';
 <DesignNotes>
   <div>
     <p>
-      Alert messages are used to provide action-based feedback. The most common message colours used are
+      Alert messages are used to provide action-based feedback. The most common message colors used are
       <span className="text-green">Success</span> and <span className="text-red">Error</span>.<span className="text-orange">
         Warning
       </span> is rarely used as a flash message, and occasionally

www/examples/Button.mdx

@@ -37,7 +37,7 @@ import DesignNotes from '../containers/DesignNotes.jsx';
 ### Design Notes
 
 <DesignNotes>
-  Primary buttons display filled with a colour and inverted white text eg.{' '}
+  Primary buttons display filled with a color and inverted white text eg.{' '}
   <span className="text-blue text-bold">Blue</span>, <span className="text-green text-bold">Green</span> and used
   commonly for Sign off, Save, Apply, Approve etc.
   <br />
@@ -48,8 +48,8 @@ import DesignNotes from '../containers/DesignNotes.jsx';
   </span> and used commonly for eg. Edit, Cancel, Add Product, Close etc.
   <br />
   <br />
-  <span className="text-bold">Inverted coloured buttons</span> are used as second primary actions alongside a primary
-  action. Use the same colour for the border and text eg. <span className="text-blue text-bold">Blue</span>,{' '}
+  <span className="text-bold">Inverted colored buttons</span> are used as second primary actions alongside a primary
+  action. Use the same color for the border and text eg. <span className="text-blue text-bold">Blue</span>,{' '}
   <span className="text-green text-bold">Green</span>, <span className="text-red text-bold">Red</span> eg. Cancel
   Campaign, Save, Reject etc.
   <br />

www/examples/Toast.mdx

@@ -34,7 +34,7 @@ render(Example);
     <p>
       Toasts are used to provide action-based feedback. The Toast.Container can be defined at the highest app layer,
       while the Toast.Notification can be used multiple times to create multiple notifications. The themes show
-      different colours like:
+      different colors like:
     </p>
     <p>
       <span className="text-green">Success</span>