ci(changesets): versioning packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

Releases

@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 and check out an example of usage.
• Feat: Updated Flex, BoxCentered, Grid, and Stack components to be used within Box as namespaced components [BREAKING CHANGE]:

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:

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:

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 and Radix 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.

import { Button } from '@fuel-ui/react'
function Demo() {
return <Button intent='base'>Cancel</Button>
}

@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 and check out an example of usage.
• Feat: Updated Flex, BoxCentered, Grid, and Stack components to be used within Box as namespaced components [BREAKING CHANGE]:

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:

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:

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 and Radix 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.

import { Button } from '@fuel-ui/react'
function Demo() {
return <Button intent='base'>Cancel</Button>
}

@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 and check out an example of usage.
• Feat: Updated Flex, BoxCentered, Grid, and Stack components to be used within Box as namespaced components [BREAKING CHANGE]:

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:

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:

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 and Radix 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.

import { Button } from '@fuel-ui/react'
function Demo() {
return <Button intent='base'>Cancel</Button>
}

@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 and check out an example of usage.
• Feat: Updated Flex, BoxCentered, Grid, and Stack components to be used within Box as namespaced components [BREAKING CHANGE]:

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:

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:

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 and Radix 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.

import { Button } from '@fuel-ui/react'
function Demo() {
return <Button intent='base'>Cancel</Button>
}

Patch Changes

• 🐞 Fix: PasswordStrengh component style was getting an wrong background, by @pedronauck (See #233)