docs: remove dev dep

docs: get back DM Sans as main font

docs: fix migration guides order

docs: improve tailwind-preset documentation

docs: add v10 migration guide

docs/package.json

@@ -125,8 +125,5 @@
     "uuid": "^8.3.2",
     "vfile-reporter": "^7.0.5",
     "webpack": "^5.76.0"
-  },
-  "devDependencies": {
-    "gatsby-plugin-postcss": "^6.11.0"
   }
 }

docs/src/documentation/02-foundation/11-tailwind/01-installation.mdx

@@ -1,6 +1,8 @@
 ---
 title: Installation
 description: Orbit tailwind preset is the abstraction above Orbit design tokens package. It provides the Orbit design tokens as Tailwind CSS configuration.
+redirect_from:
+  - /foundation/tailwind/installation/
 ---
 
 import README from "@kiwicom/orbit-tailwind-preset/README.md";

docs/src/documentation/05-development/04-migration-guides/v7.mdx → docs/src/documentation/05-development/04-migration-guides/01-v7.mdx

@@ -1,5 +1,5 @@
 ---
-title: V7
+title: v7
 description: How to migrate to Orbit 7.0.0
 redirect_from:
   - /migration-guides/v7/
@@ -8,7 +8,7 @@ redirect_from:
 # Orbit Migration Guide v7
 
 This migration guide focuses on the process of migrating from Orbit v6.4 to v7.0, as some breaking changes were introduced.
-With this guide we aim to walkthrough all the breaking changes and how they can be addressed, allowing the migration to be smoother and effortless.
+With this guide, we aim to walk through all the breaking changes and how they can be addressed, allowing the migration to be smoother and effortlessly.
 
 ## Breaking changes
 

docs/src/documentation/05-development/04-migration-guides/v9.mdx → docs/src/documentation/05-development/04-migration-guides/02-v9.mdx

@@ -1,5 +1,5 @@
 ---
-title: V9
+title: v9
 description: How to migrate to Orbit 9.0.0
 redirect_from:
   - /migration-guides/v9/
@@ -8,7 +8,7 @@ redirect_from:
 # Orbit Migration Guide v9
 
 This migration guide focuses on the process of migrating from Orbit v8.1.2 to v9.0, as some breaking changes were introduced.
-With this guide we aim to walkthrough all the breaking changes and how they can be addressed, allowing the migration to be smoother and effortless.
+With this guide, we aim to walk through all the breaking changes and how they can be addressed, allowing the migration to be smoother and effortlessly.
 
 This version of Orbit is **still** compatible with React 17 and doesn't make use of new features only available in React 18.
 

docs/src/documentation/05-development/04-migration-guides/03-v10.mdx

@@ -0,0 +1,129 @@
+---
+title: v10
+description: How to migrate to Orbit 10.0.0
+redirect_from:
+  - /migration-guides/v10/
+---
+
+# Orbit Migration Guide v10
+
+This migration guide focuses on the process of migrating from Orbit v9.1 to v10.0, as some breaking changes were introduced.
+With this guide, we aim to walk through all the breaking changes and how they can be addressed, allowing the migration to be smoother and effortlessly.
+
+This version of Orbit includes the first batch of components styled with Tailwind, instead of Styled Components. Note that you can keep using Styled Components, especially on your custom components. But we recommend start migrating them to Tailwind as well.
+
+Components in Tailwind should have the same API as before, so no breaking changes are expected in that regard. However, since some of the migrated components went through deep refactoring, we recommend being vigilant for unexpected and undocumented changes. Those should be reported so that we can fix them.
+
+## Breaking changes
+
+### Tailwind requirement
+
+As mentioned before, this version of Orbit includes the first batch of components styled with Tailwind. Therefore, Tailwind must be installed and configured in your project for you to be able to use these components.
+Please refer to the [official Tailwind documentation](https://tailwindcss.com/docs/installation) and the [Orbit's Tailwind setup documentation](/foundation/tailwind/installation) for more information on how to do that.
+
+As a summary, you should have Tailwind installed and configured in your project, as well as the Orbit preset for Tailwind included on the config file.
+
+### StyledBox removed
+
+The `StyledBox` component is no longer exported. This allowed custom Styled Components to target the `Box` components from Orbit and apply styles to it. Therefore, things like the following code will no longer work:
+
+```jsx
+import { StyledBox } from "@kiwicom/orbit-components";
+
+const SomeWrapper = styled.div`
+  height: 100%;
+
+  ${StyledBox} {
+    padding: 10px;
+  }
+`;
+```
+
+This could be used to add custom styles to the `Box` component, one of the exceptions we have in Orbit Design System.
+Instead of using `StyledBox`, you can now target the components by using the `.orbit-box` selector:
+
+```jsx
+const SomeWrapper = styled.div`
+  height: 100%;
+
+  .orbit-box {
+    padding: 10px;
+  }
+`;
+```
+
+### Using the styled function
+
+If you are using the `styled` function from Styled Components to wrap and overwrite the styles of Orbit components, we recommend ensuring that your custom styles are not being overwritten by the Tailwind classes. We don't provide support for such scenarios, so we recommend reevaluating the need to overwrite the styles of Orbit components.
+
+Exceptionally, the `Box` component accepts Tailwind classes to customize its styles, via the `className` prop. This is only recommended for styles that are not achievable with the props available on the component.
+
+**Before:**
+
+```jsx
+import styled from "styled-components";
+import { Box } from "@kiwicom/orbit-components";
+
+const CustomBox = styled(Box)`
+  ${({theme})} => css`
+    line-height: ${theme.orbit.lineHeightNormal};
+    padding: ${theme.orbit.spaceSmall};
+  `};
+`;
+```
+
+**Now:**
+
+```jsx
+import { Box } from "@kiwicom/orbit-components";
+
+const CustomBox = props => <Box className="leading-normal" padding="small" {...props} />;
+```
+
+### Align prop in Text
+
+The `Text` component features an `align` prop that directly matches the `text-align` CSS property. This property used to have a default value of `"left"` and Styled Components was automatically dealing with RTL and converting `"left"` to `"right"` when the browser was presenting a page in RTL.
+
+Now, this is no longer the case. Therefore, we have changed the default value to be `"start"` so that it keeps the same behavior as before. However, if you were using the `align` prop with the value `"left"` or `"right"` and relying on an automatic RTL conversion, you should now use `"start"` instead.
+
+Notice that `"left"` and `"right"` are still valid values, but they will not adjust to RTL anymore.
+
+### Icon prop in Card
+
+The `icon` prop was already deprecated in the `Card` and `CardSection` components and has finally been removed in this version.
+
+If needed, it is still possible to apply an icon (or similar) using layout components. For example:
+
+**Before:**
+
+```jsx
+<CardSection
+  icon={<CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />}
+  title={
+    <Stack direction="row" spacing="XXSmall" align="center">
+      <Text weight="bold">Cairo CAI</Text>
+      <FlightDirect size="small" />
+      <Text weight="bold">Dubai SHJ</Text>
+    </Stack>
+  }
+/>
+```
+
+**Now:**
+
+```jsx
+<CardSection
+  title={
+    <Stack direction="row" spacing="XSmall" align="center">
+      <Box>
+        <CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />
+      </Box>
+      <Stack direction="row" spacing="XXSmall" align="center">
+        <Text weight="bold">Cairo CAI</Text>
+        <FlightDirect size="small" />
+        <Text weight="bold">Dubai SHJ</Text>
+      </Stack>
+    </Stack>
+  }
+/>
+```

docs/tailwind.config.ts

@@ -7,6 +7,13 @@ export default {
     "./src/**/*.{js,jsx,ts,tsx}",
     path.join(path.dirname(require.resolve("@kiwicom/orbit-components")), "**/*.js"),
   ],
+  theme: {
+    extend: {
+      fontFamily: {
+        base: "Dm Sans, sans-serif",
+      },
+    },
+  },
   presets: [
     orbitComponentsPreset({
       disablePreflight: false,

packages/orbit-tailwind-preset/README.md

@@ -2,8 +2,6 @@
 
 This package contains the Orbit Tailwind preset.
 
-The default exported preset includes all of the Orbit's foundation styles (typography, colors, spacing, etc…) and all the needed configuration for component-specific classes used internally.
-
 ## Installation
 
 ```bash
@@ -16,23 +14,36 @@ or with npm:
 npm install --save-dev @kiwicom/orbit-tailwind-preset
 ```
 
-## Usage
+The default exported preset (`orbitComponentsPreset`) includes all of the Orbit's foundation styles (typography, colors, spacing, etc…) and all the needed configuration for component-specific classes used internally.
+
+The `orbitComponentsPreset` function accepts an optional object with one property, `disablePreflight`, which is `false` by default. When set to `true`, it disables the normalization of the browser's default styles. We recommend leaving it enabled, as it avoids the need to reset the browser's default styles manually. The normalization is done by the [Tailwind CSS Preflight](https://tailwindcss.com/docs/preflight) plugin.
+
+## Configuration
 
 In your `tailwind.config.js` file (or equivalent), add the following:
 
 ```js
 const orbitComponentsPreset = require("@kiwicom/orbit-tailwind-preset");
 
 module.exports = {
+  content: [
+    // ...
+    "./node_modules/@kiwicom/orbit-components/**/*.js",
+  ],
   presets: [
     orbitComponentsPreset({
-      // Enable normalizing of the browser's default styles, which is disabled by default
-      disablePreflight: false,
+      disablePreflight: false, // default value
     }),
   ],
 };
 ```
 
+The `content` property is required for Tailwind to [know which files to scan for classes](https://tailwindcss.com/docs/content-configuration). It should include the path to all your source files that use Tailwind classes. The path to the `@kiwicom/orbit-components` package is required for the component-specific classes to be scanned and built into the final CSS.
+
+The `presets` property is required for Tailwind to [know which presets to use](https://tailwindcss.com/docs/presets). It should include the `orbitComponentsPreset` function, which returns the Orbit Tailwind preset.
+
+## Usage
+
 As an example, the classes applied below become available right away. They apply, respectively, the CSS properties `color` with the value of the palette token `blueNormal` and `padding` with the value of the spacing token `small`. Both tokens are available on the `@kiwicom/orbit-design-tokens` package.
 
 ```html

yarn.lock

@@ -1336,7 +1336,7 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2", "@babel/runtime@^7.9.6":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2", "@babel/runtime@^7.9.6":
   version "7.22.6"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz"
   integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==