fix: spelling updates

plugins/viewport-plugin/README.md

@@ -19,7 +19,7 @@
 
 # Overview
 
-Inspired from the [playroom](https://github.com/seek-oss/playroom) project, this addon contains a `ViewportBlock` that you can integrate into any page, as well as a standalone `ViewportPage`
+inspired by the [playroom](https://github.com/seek-oss/playroom) project, this addon contains a `ViewportBlock` that you can integrate into any page, as well as a standalone `ViewportPage`
 
 # Getting Started
 

ui/design-tokens/src/Colors/Alta/AltaColor.tsx

@@ -8,7 +8,7 @@ import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block, as well as hex(string) and rgb values.
- * Inspired from [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta_web_icon_guide/Alta-Colors/UI-Palette.html).
+ * inspired by [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta_web_icon_guide/Alta-Colors/UI-Palette.html).
  */
 export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;

ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx

@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, expanding on hover.
- * Design inspired from [Antd](https://ant.design/docs/spec/colors).
+ * Design inspired by [Antd](https://ant.design/docs/spec/colors).
  */
 
 export const AntdHorzColor: FC<ColorBlockProps> = ({ name, color, hover }) => {

ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx

@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, expanding on hover.
- * Design inspired from [Antd](https://ant.design/docs/spec/colors).
+ * Design inspired by [Antd](https://ant.design/docs/spec/colors).
  */
 
 export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {

ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx

@@ -7,8 +7,8 @@ import { ColorBlockProps } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block with a title, as well as hex(string) and rgb values.
- * Design inspired from [Anvil](https://anvil.servicetitan.com/foundations/color/).
+ * Color item displaying the color as a color block with a dot suggesting the best text color and a block of text with the color title, name, and value.
+ * Design inspired by [Anvil](https://anvil.servicetitan.com/foundations/color/).
  */
 export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;

ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.tsx

@@ -44,7 +44,7 @@ const ContrastTest: FC<{
 };
 /**
  * Color item displaying the color as a block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests.
- * Design inspired from [Atlassian Design System](https://atlassian.design/foundations/color).
+ * Design inspired by [Atlassian Design System](https://atlassian.design/foundations/color).
  */
 export const AtlassianColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;

ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx

@@ -8,8 +8,8 @@ import { ColorBlockProps } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block and color aliases for various standard is Pantone, CMYK.
- * Design inspired from [Audi Design System](https://www.audi.com/ci/en/intro/basics/colours.html).
+ * Color item displaying the color as a color block and the values for RGB, RML, CMYK and Pantone.
+ * Design inspired by [Audi Design System](https://www.audi.com/ci/en/intro/basics/colours.html).
  */
 export const AudiDSColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;

ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx

@@ -8,9 +8,9 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block and color aliases for various standard is Pantone, CMYK.
+ * Color item displaying the color as a color block and the values for RGB, CMYK and Pantone.
  * If specified, will display the dark color as a bottom-right side triangle.
- * Design inspired from [Backpack](https://backpack.github.io/guidelines/colors).
+ * Design inspired by [Backpack](https://backpack.github.io/guidelines/colors).
  */
 export const BackpackColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =

ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx

@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name and hex value
- * Design inspired from [BaseWeb](https://baseweb.design/components/tokens/).
+ * Design inspired by [BaseWeb](https://baseweb.design/components/tokens/).
  */
 
 export const BaseWebColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx

@@ -9,7 +9,7 @@ import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block with values for rgb and Pantone colors.
- * Design inspired from [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
+ * Design inspired by [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
  */
 export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;

ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx

@@ -50,7 +50,7 @@ const ContrastTest: FC<{
 };
 /**
  * Color item displaying the color as a block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests.
- * Design inspired from [Bolt](https://boltdesignsystem.com/pattern-lab/?p=visual-styles-color-system).
+ * Design inspired by [Bolt](https://boltdesignsystem.com/pattern-lab/?p=visual-styles-color-system).
  */
 export const BoltColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =

ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx

@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name, sass variable name and hex value
- * Design inspired from [Canvas Design System](https://canvas.hubspot.com/styles/colors).
+ * Design inspired by [Canvas Design System](https://canvas.hubspot.com/styles/colors).
  */
 
 export const CanvasColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx

@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name, description and hex value
- * Design inspired from REI's [Cedar](https://rei.github.io/rei-cedar-docs/foundation/color/).
+ * Design inspired by REI's [Cedar](https://rei.github.io/rei-cedar-docs/foundation/color/).
  */
 
 export const CedarColor: FC<ColorBlockProps & { index?: number }> = ({

ui/design-tokens/src/Colors/CometColor/CometColor.tsx

@@ -9,7 +9,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name sass variable name and AA/AAA tests
- * Design inspired from [Comet](https://comet.discoveryeducation.com/visual-language/color.html).
+ * Design inspired by [Comet](https://comet.discoveryeducation.com/visual-language/color.html).
  */
 
 export const CometColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx

@@ -20,8 +20,8 @@ import {
 import { TableContainerProps, TableContainer } from '../../components';
 
 /**
- * Color item displaying as a row, with color, name, description, var and sas variables and contrast ratio.
- * Design inspired from [Duet](https://www.duetds.com/tokens/#color).
+ * Color item displaying as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status.
+ * Design inspired by [Duet](https://www.duetds.com/tokens/#color).
  */
 
 export const DuetColor: FC<ColorBlockProps> = props => (

ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx

@@ -39,8 +39,8 @@ const CopyItem: FC<{ name: string; value?: string }> = ({ name, value }) => {
   ) : null;
 };
 /**
- * Color item displaying the color as a block with values for hex, class and sass can be copied to clipboard on hover.
- * Design inspired from [E-Trade Design System](https://docs.etrade.design/colors).
+ * Color item displaying the color as a block with values for hex, class, and sass can be copied to clipboard on hover.
+ * Design inspired by [E-Trade Design System](https://docs.etrade.design/colors).
  */
 export const ETradeColor: FC<ColorBlockProps> = ({ name, color }) => {
   const [hover, setHover] = useState(false);

ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx

@@ -9,7 +9,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, with name and hex color on the side. If the color is a primary color, will display as a circle.
- * Design inspired from [Finastra](https://design.fusionfabric.cloud/foundations/colors).
+ * Design inspired by [Finastra](https://design.fusionfabric.cloud/foundations/colors).
  */
 
 export const FinastraColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx

@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a row with the sass var name and hex color.
- * Design inspired from Blooomberg BNA's [FishTank](https://fishtank.bna.com/colors).
+ * Design inspired by Blooomberg BNA's [FishTank](https://fishtank.bna.com/colors).
  */
 
 export const FishTankColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx

@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a row with a color circle and the sass var name and hex color.
- * Design inspired from [GOV.UK Design System](https://design-system.service.gov.uk/styles/colour/).
+ * Design inspired by [GOV.UK Design System](https://design-system.service.gov.uk/styles/colour/).
  */
 
 export const GovUKColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.tsx

@@ -7,8 +7,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
- * Color item displaying the color as a row, expanding on hover. Separate visualization (header) for primary color.
- * Design inspired from [HelpScout](https://style.helpscout.com/visual-elements/#color).
+ * Color item displaying the color as a row, expanding on hover. Separate visualization (header) for the primary color.
+ * Design inspired by [HelpScout](https://style.helpscout.com/visual-elements/#color).
  */
 
 export const HelpScoutColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.tsx

@@ -20,8 +20,8 @@ export type ColorDisplay = ColorDisplayTuple[number];
 
 export type IBMDLColorProps = ColorBlockProps & { display: ColorDisplay };
 /**
- * Color item displaying the color as a row with the color name and display option of hex, rgb, pms or cmyk color display.
- * Design inspired from IBM's [Design Language](https://www.ibm.com/design/language/color).
+ * Color item displaying the color as a row with the color name and display option of HEX, RGB, PMS, or CMYK color values.
+ * Design inspired by IBM's [Design Language](https://www.ibm.com/design/language/color).
  */
 
 export const IBMDLColor: FC<IBMDLColorProps> = ({

ui/design-tokens/src/Colors/LightningColor/LightningColor.tsx

@@ -14,8 +14,8 @@ export type LightningColorProps = {
   columns?: TableColumn[];
 } & ColorBlockProps;
 /**
- * Color item displaying as a row, with color, name, description, var and sas variables and contrast ratio. allows for custom columns.
- * Design inspired from Oracle's [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/#category-color).
+ * Color item displaying as a table row, with color, name, description, and allows for custom columns.
+ * Design inspired by Oracle's [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/#category-color).
  */
 
 export const LightningColor: FC<LightningColorProps> = props => (

ui/design-tokens/src/Colors/LiquidColor/LiquidColor.tsx

@@ -8,8 +8,8 @@ import { ColorBlockProps } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block with values for rgb and a palette of lighter and darker colors.
- * Design inspired from [Liquid Design System](https://liquid.emd.design/fundamentals/color/).
+ * Color item displaying the color as a block with the RGB value and a palette of lighter and darker colors.
+ * Design inspired by [Liquid Design System](https://liquid.emd.design/fundamentals/color/).
  */
 export const LiquidColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;

ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx

@@ -8,7 +8,7 @@ import { TableContainerProps, TableContainer } from '../../components';
 
 /**
  * Color item displaying as a table row, with color, name, sass variable name and hex value.
- * Design inspired from [Morningstar Design System](https://designsystem.morningstar.com/visual-language/color/?version=3.0.4&tab=backgrounds).
+ * Design inspired by [Morningstar Design System](https://designsystem.morningstar.com/visual-language/color/?version=3.0.4&tab=backgrounds).
  */
 
 export const MorningstarColor: FC<ColorBlockProps> = props => (

ui/design-tokens/src/Colors/OPatternColor/OPatternColor.tsx

@@ -8,8 +8,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { TableContainerProps, TableContainer } from '../../components';
 
 /**
- * Color item displaying as a table row, with color block, sass name, andhex, rgb and cmyk color values.
- * Design inspired from [OPattern](https://ux.opower.com/opattern/color.html).
+ * Color item displaying as a table row, with color block, sass name, and hex, RGB, and CMYK color values.
+ * Design inspired by [OPattern](https://ux.opower.com/opattern/color.html).
  */
 
 export const OPatternColor: FC<ColorBlockProps> = props => (

ui/design-tokens/src/Colors/PajamasColor/PajamasColor.tsx

@@ -8,8 +8,8 @@ import { ColorBlockProps } from '../../types';
 import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
- * Color item displaying the color as a table row, expanding on hover with display of contrast and passing level.
- * Design inspired from GitLab's [Pajamas](https://design.gitlab.com/product-foundations/colors/).
+ * Color item displaying the color as a table row, expanding on hover to display the contrast and passing level.
+ * Design inspired by GitLab's [Pajamas](https://design.gitlab.com/product-foundations/colors/).
  */
 
 export const PajamasColor: FC<ColorBlockProps> = ({ name, color, hover }) => {

ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.tsx

@@ -7,8 +7,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
- * Color item displaying the color as a row with a color circle with css var name and on click popup.
- * Design inspired from [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
+ * Color item displaying the color as a row with a color circle with CSS var name and on click popup.
+ * Design inspired by [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
  */
 
 export const PatternFlyColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/PhotonColor/PhotonColor.tsx

@@ -9,7 +9,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with a color block, name, hex value and AA/AAA tests for text and backgorund.
- * Design inspired from Firefox's [Photon Design System](https://design.firefox.com/photon/visuals/color.html).
+ * Design inspired by Firefox's [Photon Design System](https://design.firefox.com/photon/visuals/color.html).
  */
 
 export const PhotonColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/PrimerColor/PrimerColor.tsx

@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a row, with sass variable name. Separate visualization (header) for primary color.
- * Design inspired from GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
+ * Design inspired by GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
  */
 
 export const PrimerColor: FC<ColorBlockProps> = ({ name, color }) => {

ui/design-tokens/src/Colors/SeedsColor/SeedsColor.tsx

@@ -8,8 +8,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block with rgb and cmyk colors. Below the block are displayed the color name and description.
- * Design inspired from SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
+ * Color item displaying the color as a block with RGB and CMYK colors. The color name and description are displayed below the block.
+ * Design inspired by SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
  */
 export const SeedsColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =

ui/design-tokens/src/Colors/SeekColor/SeekColor.tsx

@@ -7,8 +7,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a cirlce with the hev value and variable name below.
- * Design inspired from [Seek OSS](https://seek-oss.github.io/seek-style-guide/palette).
+ * Color item displaying the color as a circle with the HEX value and variable name below.
+ * Design inspired by [Seek OSS](https://seek-oss.github.io/seek-style-guide/palette).
  */
 export const SeekColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =

ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx

@@ -11,7 +11,7 @@ import { TableContainerProps, TableContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color name, custom columns for contrast checks scss variable name and color block.
- * Design inspired from [Skyline](https://skyline.benevity.org/design-language/color/#hues).
+ * Design inspired by [Skyline](https://skyline.benevity.org/design-language/color/#hues).
  */
 
 export const SkylineColor: FC<ColorBlockProps> = props => (

ui/design-tokens/src/Colors/SolidColor/SolidColor.tsx

@@ -7,8 +7,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block. The css class, hex value and sass name are placed above the color block.
- * Design inspired from [Solid](https://solid.buzzfeed.com/colors.html).
+ * Color item displaying the color as a block. The CSS class, HEX value, and SASS name are placed above the color block.
+ * Design inspired by [Solid](https://solid.buzzfeed.com/colors.html).
  */
 export const SolidColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =

ui/design-tokens/src/Colors/UniformColor/UniformColor.tsx

@@ -8,7 +8,7 @@ import { TableContainerProps, TableContainer } from '../../components';
 
 /**
  * Color item displaying as a table row, with color block, color name and rgb value.
- * Design inspired from [Uniform](http://uniform.hudl.com/guidelines/colors/brand/design).
+ * Design inspired by [Uniform](http://uniform.hudl.com/guidelines/colors/brand/design).
  */
 
 export const UniformColor: FC<ColorBlockProps> = props => (

ui/design-tokens/src/Colors/VanillaColor/VanillaColor.tsx

@@ -7,7 +7,7 @@ import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a color block with sass variable name and hex color value.
- * Design inspired from [Vanilla](https://vanillaframework.io/docs/settings/color-settings).
+ * Design inspired by [Vanilla](https://vanillaframework.io/docs/settings/color-settings).
  */
 export const VanillaColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =

ui/design-tokens/src/Colors/XColor/XColor.tsx

@@ -8,8 +8,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a cirlce with the variable name, hev, rgb, cmyk and pantone values below.
- * Design inspired from Biteable's Design System [X](https://x.biteable.com/brand/).
+ * Color item displaying the color as a circle with the variable name, HEX, RGB, CMYK, and PANTONE values below.
+ * Design inspired by Biteable's Design System [X](https://x.biteable.com/brand/).
  */
 export const XColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =

ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.tsx

@@ -8,7 +8,7 @@ import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block with the color name and hex value.
- * Design inspired from [Zendesk Garden](https://zendeskgarden.github.io/react-components/theming/#!/PALETTE).
+ * Design inspired by [Zendesk Garden](https://zendeskgarden.github.io/react-components/theming/#!/PALETTE).
  */
 export const ZendeskColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;