ci(changesets): versioning packages

common/config/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @fuel-ui/config
 
+## 0.14.0
+
+### Minor Changes
+
+- Chore: Forked stitches packages to improve typing and class generation.
+  Feat: Added a new flexible and custom theme system. [Read the RFC for all details](https://github.com/FuelLabs/fuel-ui/issues/224) and [check out an example of usage](https://github.com/FuelLabs/fuel-ui/tree/feat/theme-system/examples/custom-theme).
+  Feat: Updated `Flex`, `BoxCentered`, `Grid`, and `Stack` components to be used within `Box` as namespaced components _[BREAKING CHANGE]_:
+  ```tsx
+  import { Box } from '@fuel-ui/react';
+  function App() {
+    return <Box.Flex>Hello world</Box.Flex>;
+  }
+  ```
+  Feat: Introduced a new polymorphic components system where as props automatically adjust prop typings. Any HTML element can be used in the component prop. For example, using an a tag will render an anchor:
+  ```tsx
+  import { Button } from '@fuel-ui/react';
+  import { IconExternalLink } from '@tabler/icons-react';
+  function Demo() {
+    return (
+      <Button
+        component="a"
+        href="#"
+        variant="outlined"
+        leftIcon={<IconExternalLink size={18} />}
+      >
+        Open in new tab
+      </Button>
+    );
+  }
+  ```
+  Feat: Refined the default light theme for better clarity and simplicity:
+  ```tsx
+  import {
+    ThemeProvider,
+    darkTheme,
+    lightTheme,
+    useFuelTheme,
+  } from '@fuel-ui/react';
+  function ThemeWrapper(props: any) {
+    const isDark = useSomeHookToDetectIsDark();
+    const { setTheme } = useFuelTheme();
+    useEffect(() => {
+      setTheme(isDark ? darkTheme : lightTheme);
+    }, [isDark]);
+    return <ThemeProvider>{props.children}</ThemeProvider>;
+  }
+  ```
+  Feat: Added new design tokens in this release. All color tokens are now auto-generated using the `design-system/tokens `project, based on the [Stitches design tokens pattern](https://stitches.dev/docs/tokens) and [Radix Colors](https://www.radix-ui.com/colors). Important notes about the new tokens:
+  - Always reference the semantic value of a token when using a color, e.g., use `$intentsPrimary9` instead of `$green9`.
+  - Semantic colors are available for all necessary layer styles and inputs. A `layer` mixin has been introduced to simplify token usage (see `Button/styles.ts` implementation for more details).
+  - New tokens are generated in the `design-tokens/tokens/build/tokens-raw.ts` file after running `pnpm build` inside the package.
+  - Understanding and following the new token system is crucial for easy light/dark theme switching.
+  - The number of colors and variations in `Button`, `Tag`, and `Badge` has been reduced to only include design system intents.
+    Chore: Removed `color` prop from `Button` and all derived/related components. Use `intent` instead.
+  ````tsx
+  import { Button } from '@fuel-ui/react'
+  function Demo() {
+  return <Button intent='base'>Cancel</Button>
+  }
+  ```, by [@pedronauck](https://github.com/pedronauck) (See [#228](https://github.com/FuelLabs/fuel-ui/pull/228))
+  ````
+
 ## 0.13.0
 
 ### Minor Changes

common/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuel-ui/config",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "Apache-2.0",
   "main": "./index.js",
   "publishConfig": {

common/test-utils/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @fuel-ui/test-utils
 
+## 0.14.0
+
+### Minor Changes
+
+- Chore: Forked stitches packages to improve typing and class generation.
+  Feat: Added a new flexible and custom theme system. [Read the RFC for all details](https://github.com/FuelLabs/fuel-ui/issues/224) and [check out an example of usage](https://github.com/FuelLabs/fuel-ui/tree/feat/theme-system/examples/custom-theme).
+  Feat: Updated `Flex`, `BoxCentered`, `Grid`, and `Stack` components to be used within `Box` as namespaced components _[BREAKING CHANGE]_:
+  ```tsx
+  import { Box } from '@fuel-ui/react';
+  function App() {
+    return <Box.Flex>Hello world</Box.Flex>;
+  }
+  ```
+  Feat: Introduced a new polymorphic components system where as props automatically adjust prop typings. Any HTML element can be used in the component prop. For example, using an a tag will render an anchor:
+  ```tsx
+  import { Button } from '@fuel-ui/react';
+  import { IconExternalLink } from '@tabler/icons-react';
+  function Demo() {
+    return (
+      <Button
+        component="a"
+        href="#"
+        variant="outlined"
+        leftIcon={<IconExternalLink size={18} />}
+      >
+        Open in new tab
+      </Button>
+    );
+  }
+  ```
+  Feat: Refined the default light theme for better clarity and simplicity:
+  ```tsx
+  import {
+    ThemeProvider,
+    darkTheme,
+    lightTheme,
+    useFuelTheme,
+  } from '@fuel-ui/react';
+  function ThemeWrapper(props: any) {
+    const isDark = useSomeHookToDetectIsDark();
+    const { setTheme } = useFuelTheme();
+    useEffect(() => {
+      setTheme(isDark ? darkTheme : lightTheme);
+    }, [isDark]);
+    return <ThemeProvider>{props.children}</ThemeProvider>;
+  }
+  ```
+  Feat: Added new design tokens in this release. All color tokens are now auto-generated using the `design-system/tokens `project, based on the [Stitches design tokens pattern](https://stitches.dev/docs/tokens) and [Radix Colors](https://www.radix-ui.com/colors). Important notes about the new tokens:
+  - Always reference the semantic value of a token when using a color, e.g., use `$intentsPrimary9` instead of `$green9`.
+  - Semantic colors are available for all necessary layer styles and inputs. A `layer` mixin has been introduced to simplify token usage (see `Button/styles.ts` implementation for more details).
+  - New tokens are generated in the `design-tokens/tokens/build/tokens-raw.ts` file after running `pnpm build` inside the package.
+  - Understanding and following the new token system is crucial for easy light/dark theme switching.
+  - The number of colors and variations in `Button`, `Tag`, and `Badge` has been reduced to only include design system intents.
+    Chore: Removed `color` prop from `Button` and all derived/related components. Use `intent` instead.
+  ````tsx
+  import { Button } from '@fuel-ui/react'
+  function Demo() {
+  return <Button intent='base'>Cancel</Button>
+  }
+  ```, by [@pedronauck](https://github.com/pedronauck) (See [#228](https://github.com/FuelLabs/fuel-ui/pull/228))
+  ````
+
 ## 0.13.0
 
 ### Minor Changes

common/test-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuel-ui/test-utils",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "Apache-2.0",
   "main": "./src/index.ts",
   "publishConfig": {

design-system/css/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @fuel-ui/css
 
+## 0.14.0
+
+### Minor Changes
+
+- Chore: Forked stitches packages to improve typing and class generation.
+  Feat: Added a new flexible and custom theme system. [Read the RFC for all details](https://github.com/FuelLabs/fuel-ui/issues/224) and [check out an example of usage](https://github.com/FuelLabs/fuel-ui/tree/feat/theme-system/examples/custom-theme).
+  Feat: Updated `Flex`, `BoxCentered`, `Grid`, and `Stack` components to be used within `Box` as namespaced components _[BREAKING CHANGE]_:
+  ```tsx
+  import { Box } from '@fuel-ui/react';
+  function App() {
+    return <Box.Flex>Hello world</Box.Flex>;
+  }
+  ```
+  Feat: Introduced a new polymorphic components system where as props automatically adjust prop typings. Any HTML element can be used in the component prop. For example, using an a tag will render an anchor:
+  ```tsx
+  import { Button } from '@fuel-ui/react';
+  import { IconExternalLink } from '@tabler/icons-react';
+  function Demo() {
+    return (
+      <Button
+        component="a"
+        href="#"
+        variant="outlined"
+        leftIcon={<IconExternalLink size={18} />}
+      >
+        Open in new tab
+      </Button>
+    );
+  }
+  ```
+  Feat: Refined the default light theme for better clarity and simplicity:
+  ```tsx
+  import {
+    ThemeProvider,
+    darkTheme,
+    lightTheme,
+    useFuelTheme,
+  } from '@fuel-ui/react';
+  function ThemeWrapper(props: any) {
+    const isDark = useSomeHookToDetectIsDark();
+    const { setTheme } = useFuelTheme();
+    useEffect(() => {
+      setTheme(isDark ? darkTheme : lightTheme);
+    }, [isDark]);
+    return <ThemeProvider>{props.children}</ThemeProvider>;
+  }
+  ```
+  Feat: Added new design tokens in this release. All color tokens are now auto-generated using the `design-system/tokens `project, based on the [Stitches design tokens pattern](https://stitches.dev/docs/tokens) and [Radix Colors](https://www.radix-ui.com/colors). Important notes about the new tokens:
+  - Always reference the semantic value of a token when using a color, e.g., use `$intentsPrimary9` instead of `$green9`.
+  - Semantic colors are available for all necessary layer styles and inputs. A `layer` mixin has been introduced to simplify token usage (see `Button/styles.ts` implementation for more details).
+  - New tokens are generated in the `design-tokens/tokens/build/tokens-raw.ts` file after running `pnpm build` inside the package.
+  - Understanding and following the new token system is crucial for easy light/dark theme switching.
+  - The number of colors and variations in `Button`, `Tag`, and `Badge` has been reduced to only include design system intents.
+    Chore: Removed `color` prop from `Button` and all derived/related components. Use `intent` instead.
+  ````tsx
+  import { Button } from '@fuel-ui/react'
+  function Demo() {
+  return <Button intent='base'>Cancel</Button>
+  }
+  ```, by [@pedronauck](https://github.com/pedronauck) (See [#228](https://github.com/FuelLabs/fuel-ui/pull/228))
+  ````
+
 ## 0.13.0
 
 ### Minor Changes

design-system/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuel-ui/css",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "Apache-2.0",
   "main": "./src/index.ts",
   "publishConfig": {

design-system/react/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @fuel-ui/react
 
+## 0.14.0
+
+### Minor Changes
+
+- Chore: Forked stitches packages to improve typing and class generation.
+  Feat: Added a new flexible and custom theme system. [Read the RFC for all details](https://github.com/FuelLabs/fuel-ui/issues/224) and [check out an example of usage](https://github.com/FuelLabs/fuel-ui/tree/feat/theme-system/examples/custom-theme).
+  Feat: Updated `Flex`, `BoxCentered`, `Grid`, and `Stack` components to be used within `Box` as namespaced components _[BREAKING CHANGE]_:
+  ```tsx
+  import { Box } from '@fuel-ui/react';
+  function App() {
+    return <Box.Flex>Hello world</Box.Flex>;
+  }
+  ```
+  Feat: Introduced a new polymorphic components system where as props automatically adjust prop typings. Any HTML element can be used in the component prop. For example, using an a tag will render an anchor:
+  ```tsx
+  import { Button } from '@fuel-ui/react';
+  import { IconExternalLink } from '@tabler/icons-react';
+  function Demo() {
+    return (
+      <Button
+        component="a"
+        href="#"
+        variant="outlined"
+        leftIcon={<IconExternalLink size={18} />}
+      >
+        Open in new tab
+      </Button>
+    );
+  }
+  ```
+  Feat: Refined the default light theme for better clarity and simplicity:
+  ```tsx
+  import {
+    ThemeProvider,
+    darkTheme,
+    lightTheme,
+    useFuelTheme,
+  } from '@fuel-ui/react';
+  function ThemeWrapper(props: any) {
+    const isDark = useSomeHookToDetectIsDark();
+    const { setTheme } = useFuelTheme();
+    useEffect(() => {
+      setTheme(isDark ? darkTheme : lightTheme);
+    }, [isDark]);
+    return <ThemeProvider>{props.children}</ThemeProvider>;
+  }
+  ```
+  Feat: Added new design tokens in this release. All color tokens are now auto-generated using the `design-system/tokens `project, based on the [Stitches design tokens pattern](https://stitches.dev/docs/tokens) and [Radix Colors](https://www.radix-ui.com/colors). Important notes about the new tokens:
+  - Always reference the semantic value of a token when using a color, e.g., use `$intentsPrimary9` instead of `$green9`.
+  - Semantic colors are available for all necessary layer styles and inputs. A `layer` mixin has been introduced to simplify token usage (see `Button/styles.ts` implementation for more details).
+  - New tokens are generated in the `design-tokens/tokens/build/tokens-raw.ts` file after running `pnpm build` inside the package.
+  - Understanding and following the new token system is crucial for easy light/dark theme switching.
+  - The number of colors and variations in `Button`, `Tag`, and `Badge` has been reduced to only include design system intents.
+    Chore: Removed `color` prop from `Button` and all derived/related components. Use `intent` instead.
+  ````tsx
+  import { Button } from '@fuel-ui/react'
+  function Demo() {
+  return <Button intent='base'>Cancel</Button>
+  }
+  ```, by [@pedronauck](https://github.com/pedronauck) (See [#228](https://github.com/FuelLabs/fuel-ui/pull/228))
+  ````
+
+### Patch Changes
+
+- 🐞 Fix: PasswordStrengh component style was getting an wrong background, by [@pedronauck](https://github.com/pedronauck) (See [#233](https://github.com/FuelLabs/fuel-ui/pull/233))
+
 ## 0.13.0
 
 ### Minor Changes

design-system/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuel-ui/react",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "main": "./src/index.tsx",
   "publishConfig": {
     "access": "public",