docs: fix typos (#509)

docs/components/alert.md

@@ -4,7 +4,7 @@ import SAlert from 'sefirot/components/SAlert.vue'
 
 # SAlert <Badge text="3.8.0" />
 
-`<SAlert>` is used to diaplay informative messages to the user.
+`<SAlert>` is used to display informative messages to the user.
 
 <Showcase
   path="/components/SAlert.vue"
@@ -39,7 +39,7 @@ import SAlert from '@globalbrain/sefirot/lib/components/SAlert.vue'
 
 ### Modes
 
-`<SAlert>` has 4 modes: `info`, `success`, `warning` and `error`. Each mode has different color and icon.
+`<SAlert>` has 4 modes: `info`, `success`, `warning` and `danger`. Each mode has different color and icon.
 
 - `info` - Use this mode to display informative messages or tips.
 - `success` - Use this mode to display that something has succeeded.

docs/components/avatar-stack.md

@@ -82,7 +82,7 @@ Defines the size of the component. The default is `medium`.
 
 ```ts
 interface Props {
-  size?: 'nano' | 'mini' | 'small' | 'medium' | 'large'
+  size?: 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 }
 ```
 

docs/components/avatar.md

@@ -45,7 +45,7 @@ Defines the size of the component. The default is `medium`.
 
 ```ts
 interface Props {
-  size?: 'nano' | 'mini' | 'small' | 'medium' | 'large'
+  size?: 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 }
 ```
 

docs/index.md

@@ -7,7 +7,7 @@ titleTemplate: false
 
 Sefirot is a collection of Vue Components for Global Brain Design System. Components are meant to be clean, sophisticated, and scalable.
 
-Sefirot is focused on being used within Global Brain's ecosystem. Hence, the design—UI/UX—of components is relatively fixed, and customization capability is limited. In exchange for customizability, we can create components that are more robust, dynamic, and clean.
+Sefirot is focused on being used within Global Brain's ecosystem. Hence, the design−UI/UX−of components is relatively fixed, and customization capability is limited. In exchange for customizability, we can create components that are more robust, dynamic, and clean.
 
 Feel free to leverage any component within this project. You may customize components how you see fit, and perhaps some features may be valuable to you. Any suggestions, requests, or questions are welcome.
 

docs/styles/colors.md

@@ -1,12 +1,12 @@
 # Colors
 
-Sefirot has varias fundamental colors. These colors are used through out the components to set basic visual branding for whole design system.
+Sefirot has various fundamental colors. These colors are used through out the components to set basic visual branding for whole design system.
 
 ## Basics
 
 The color scheme comes with 2 types of definitions. One is the "Base Colors", pure base colors which will not change depending on light and dark theme. The other is "Theme Colors", which will change depending on light and dark mode.
 
-Usually when usgin or customizing the colors, you would want to use "Theme Colors", however, some colors only exists in "Base Colors" when a single color covers both light and dark mode.
+Usually when using or customizing the colors, you would want to use "Theme Colors", however, some colors only exists in "Base Colors" when a single color covers both light and dark mode.
 
 In this doc, we wouldn't separate them but rather list the colors that are safe to use, and customize to avoid any confusion. If you're curious, you may find all list of colors at [`styles/variables.css`](https://github.com/globalbrain/sefirot/blob/main/lib/styles/variables.css) file.
 
@@ -23,7 +23,7 @@ Sefirot comes with 4 accent colors which is:
 - `warning` - Yellow color used for warning, attention needed info, etc.
 - `danger` - Red color used for error, deletion, dangerous info, etc.
 
-These colors also comes with 2 basic types `text`, `border`, `fg`, and `bg`. The colors should change slightly on how it is being use. For example, when using `info` (blue) color on text, it should be a bit brighter than when it is being used as background color (for example, background color of a button).
+These colors also comes with 2 basic types `text`, `border`, `fg`, and `bg`. The colors should change slightly on how it is being used. For example, when using `info` (blue) color on text, it should be a bit brighter than when it is being used as background color (for example, background color of a button).
 
 It's recommended to use one of `text`, `border`, `fg`, and `bg`. version of the color unless you're defining these colors for other purpose such as border colors or custom graphics.