From e750adad44ba36661bc0cdddc41960a68c31317e Mon Sep 17 00:00:00 2001
From: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com>
Date: Fri, 3 Sep 2021 21:16:41 +0200
Subject: [PATCH] chore(@3yourmind/kotti-ui): Remove British English Typos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Kotti’s language was always supposed to be en-US, so those are typos. There’s probably more, but they’re hard to find.
---
 packages/documentation/pages/usage/components/banner.vue  | 2 +-
 packages/documentation/pages/usage/components/steps.vue   | 2 +-
 packages/documentation/pages/usage/components/toaster.vue | 2 +-
 packages/documentation/pages/usage/utilities.vue          | 4 ++--
 packages/kotti-ui/source/kotti-style/utilities/_text.scss | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/documentation/pages/usage/components/banner.vue b/packages/documentation/pages/usage/components/banner.vue
index bbde943775..18b0117353 100644
--- a/packages/documentation/pages/usage/components/banner.vue
+++ b/packages/documentation/pages/usage/components/banner.vue
@@ -65,7 +65,7 @@ interface.
 
 ### Background
 
-You can use `banner-grey` to change the banner's background color,
+You can use `banner-gray` to change the banner's background color,
 this style is useful when you want add contrast to the page.
 
 <div class="element-example white">
diff --git a/packages/documentation/pages/usage/components/steps.vue b/packages/documentation/pages/usage/components/steps.vue
index 35577a4faf..a2ba64fb6c 100644
--- a/packages/documentation/pages/usage/components/steps.vue
+++ b/packages/documentation/pages/usage/components/steps.vue
@@ -32,7 +32,7 @@ Each `KtStep` has four elements:
 1. Indicator: The icon on the left, can be changed with the `icon` prop
 2. Line: The line under the icon, if the step is last in the group, you may want to use `hideLine` to disable the line
 3. Title: The bold text on the right side, given via `title` props.
-4. Description: The grey text under tilte, given via `description` props.
+4. Description: The gray text under title, given via `description` props.
 
 ## Steps
 
diff --git a/packages/documentation/pages/usage/components/toaster.vue b/packages/documentation/pages/usage/components/toaster.vue
index 0e0ca7008a..66e627f128 100644
--- a/packages/documentation/pages/usage/components/toaster.vue
+++ b/packages/documentation/pages/usage/components/toaster.vue
@@ -9,7 +9,7 @@ Toasters can deliver messages that the user needs to pay attention to without in
 
 ![Toaster Structure](~/assets/img/toaster_structure.png)
 
-1. Type Colour: Depends on the type of toaster. There are three colors:
+1. Type Color: Depends on the type of toaster. There are three colors:
 
    - `Green-500`: for success information
    - `Orange-500`: for warning message
diff --git a/packages/documentation/pages/usage/utilities.vue b/packages/documentation/pages/usage/utilities.vue
index 7624be5912..8a6ed898e9 100644
--- a/packages/documentation/pages/usage/utilities.vue
+++ b/packages/documentation/pages/usage/utilities.vue
@@ -8,7 +8,7 @@
     <div class="element-example white">
     	<h4>Text Color</h4>
     	<div class="text-primary">Text Primary</div>
-    	<div class="text-grey ">Text Grey</div>
+    	<div class="text-gray ">Text Gray</div>
     	<div class="text-success">Text Succes</div>
     	<div class="text-error">Text Error</div>
     	<div class="text-warning">Text Warning</div>
@@ -16,7 +16,7 @@
 
     ```html
     <div class="text-primary">Text Primary</div>
-    <div class="text-grey ">Text Grey</div>
+    <div class="text-gray ">Text Gray</div>
     <div class="text-success">Text Succes</div>
     <div class="text-error">Text Error</div>
     <div class="text-warning">Text Warning</div>
diff --git a/packages/kotti-ui/source/kotti-style/utilities/_text.scss b/packages/kotti-ui/source/kotti-style/utilities/_text.scss
index 7715cfebd1..bae709ed82 100644
--- a/packages/kotti-ui/source/kotti-style/utilities/_text.scss
+++ b/packages/kotti-ui/source/kotti-style/utilities/_text.scss
@@ -12,7 +12,7 @@
 
 $text-colors: (
 	text-primary: $primary-500,
-	text-grey: $lightgray-500,
+	text-gray: $lightgray-500,
 	text-success: $green-500,
 	text-error: $red-500,
 	text-warning: $orange-500,